实例演示 Vote 类的使用方法

兼容范围：
IE:6.0+ FireFox:2.0+ Opera 9.0+ Sarari 3.0+ Chrome
使用说明：
使用此组件必需引入的js文件：

<script src="http://style.china.alibaba.com/js/fdevlib/core/fdev-min.js" type="text/javascript"></script>

<script src="http://style.china.alibaba.com/js/fdevlib/widget/adparty/fdev-vote.js" type="text/javascript"></script>

默认的css样式文件：

<link rel="stylesheet" href="http://style.china.alibaba.com/css/fdevlib/widget/vote.css" type="text/css" />

调用方法参数说明：

参数1：投票规则id数组（一个投票规则对应一个投票活动，在ad活动平台可创建投票规则，生成投票规则id）

参数2：配置json

使用范围：

1、仅限于中文站使用，即域名在china.alibaba.com之下

2、投票要求必须使用中文站帐号登录

3、新建一个投票，即新建一个投票规则，可以限IP，限ID或无限制，投票规则必须在活动平台 http://adol.china.alibaba.com/admin/login.htm 创建

调用说明：

页面上需要预先置入相关节点，三处的className 必须与配置参数里的 ruleClass、actionClass、numClass 值保持一致

<div class="voterule" ruleId="10363">
    <div class="votenum" objectId="1">  </div>
    <a class="voteaction" objectId="1" href=""> 点此投他一票 </a>

    <div class="votenum" objectId="3">  </div>
    <a class="voteaction" objectId="3" href=""> 点此投他一票 </a>

    <div class="votenum" objectId="2">  </div>
    <a class="voteaction" objectId="2" href=""> 点此投他一票 </a>
</div>

<script type="text/javascript"> FD.widget.Vote.init([10363,10423,10424],{}); </script>

注意1：一个页面可以有多个投票活动，每个投票活动对应一个 class="voterule" 节点，class="voterule" 节点上的 ruleId 属性可选，如果节点上没有设置 ruleId 值，则从上到下由调用方法 FD.widget.Vote.init([10363,10423,10424],{}); 中的第一个数组参数分配 id 值。如果节点上设置了 ruleId 属性，调用方法中的 id 值无效。

注意2：每个 class="voterule" 节点之间包含若干对 votenum 和 voteaction 节点，votenum 节点负责显示被投对象的得票数， voteaction 节点负责触发给此对象投票。每对子节点拥有相同的 objectId 值，若 objectId 未设置，则按其节点序号计算，如果是第一个节点，其值为 1 ，如果是第二个节点，但是其上设置有 objectId="3" 则按 3 计算。被投对象的 objectId 取值从 1 开始。

配置参数说明(默认)：

{

proxy : 'http://adol.china.alibaba.com/proxy.html?iframe_delete=true', //跨域代理页面地址，可使用本地跨域代理页面或线上，默认为线上

domain : 'china.alibaba.com', //本地ie调试设置为空

tips : { error :'投票系统错误，请刷新页面重新尝试！', notLogin : '您还没有登录，请登录！', voteDone : '投票成功！', voteBan : '您已经投过了！' }, //投票系统提示文案

successNoTip : 1, //投票成功后不弹出提示，方便无限制投票情况下的刷票行为

voteConfirm : 0, //投票行为确认，值为1 点击投票按钮会弹出提示框，默认不提示。

popMess : function (tip){alert(tip)}, //投票成功后执行popMess 方法，默认弹出提示框，可自定义。

ruleClass : 'voterule', //投票规则节点classNam

actionClass : 'voteaction', //投票动作点className

numClass : 'votenum', //投票计数节点classNam

}
演示：
无限制投票（所有投票行为均需要登录）
限ID投票（所有投票行为均需要登录）
限IP投票（所有投票行为均需要登录）
本地测试完整代码文件一（将以下方框中代码保存至文件 main.html 与 proxy.html 同一目录）
<link rel="stylesheet" href="http://style.china.alibaba.com/css/fdevlib/widget/vote.css?t=0708241" type="text/css" />

<script src="http://style.china.alibaba.com/js/fdevlib/core/fdev-min.js" type="text/javascript"></script>

<script src="http://style.china.alibaba.com/js/fdevlib/widget/adparty/fdev-vote.js" type="text/javascript"></script>

<body >

<div class="voterule" ruleId="10363">
    <div class="votenum" objectId="1">  </div>
    <a class="voteaction" objectId="1" href=""> 点此投他一票 </a>

    <div class="votenum" objectId="3">  </div>
    <a class="voteaction" objectId="3" href=""> 点此投他一票 </a>

    <div class="votenum" objectId="2">  </div>
    <a class="voteaction" objectId="2" href=""> 点此投他一票 </a>
</div>

</body >

<script type="text/javascript"> FD.widget.Vote.init([10363],{domain:'',proxy:'proxy.html'}); </script>
本地测试完整代码文件二（将以下方框中代码保存至文件 proxy.html 与 main.html 同一目录）
<script src="http://style.china.alibaba.com/js/common/adbase.js" type="text/javascript"></script>

<script type="text/javascript">
function callParentVoteInitialize(){
try{parent.voteInitialize()}catch(e){}
}
addEvent(window,'load',callParentVoteInitialize);
</script>
线上完整代码（使用线上默认的 proxy 页面，与本地测试的唯一区别是 FD.widget.Vote.init([10363],{}); 配置参数不用传值，使用默认配置）
<link rel="stylesheet" href="http://style.china.alibaba.com/css/fdevlib/widget/vote.css?t=0708241" type="text/css" /> <-- css可选 -->

<script src="http://style.china.alibaba.com/js/fdevlib/core/fdev-min.js" type="text/javascript"></script>

<script src="http://style.china.alibaba.com/js/fdevlib/widget/adparty/fdev-vote.js" type="text/javascript"></script>

<body >

<div class="voterule" ruleId="10363">
    <div class="votenum" objectId="1">  </div>
    <a class="voteaction" objectId="1" href=""> 点此投他一票 </a>

    <div class="votenum" objectId="3">  </div>
    <a class="voteaction" objectId="3" href=""> 点此投他一票 </a>

    <div class="votenum" objectId="2">  </div>
    <a class="voteaction" objectId="2" href=""> 点此投他一票 </a>
</div>

</body >

<script type="text/javascript"> FD.widget.Vote.init([10363],{}); </script>

用户登录

登录名：
密码：
	注册忘记密码

以上为默认的 Vote 类调用方式，若想结合 Block 类（施丹侠）做弹出遮罩式的信息提示效果（即本页面示例展示的效果），请在以上 main.html 页面完整代码的基础上，添加以下代码，并将原来的调用方式 FD.widget.Vote.init([10363],{}); 修改为黄色框内的方式，如果是本地测试，请设置 proxy:'proxy.html',domain:'' ，如果是线上的请去掉这两个配置。

<script src="http://style.china.alibaba.com/js/fdevlib/core/yui/animation-min.js" type="text/javascript"></script>
<script src="http://style.china.alibaba.com/js/fdevlib/widget/block/fdev-block.js" type="text/javascript"></script>

#displayBox{display:none}
.displayBox{height:180px;background-color:#003366;padding-bottom:8px;}

.poptt{color:#fff;height:40px;line-height:42px;overflow:hidden;}
.poptt b{font-size:14px;margin:0 0 0 14px;}
.popct{margin:0 8px;height:100px;padding:16px 16px 20px 16px;background-color:#fff;}
.popclose:link,.popclose:visited{background-image:url(http://img.china.alibaba.com/images/cn/blog/quan/newbar.gif); background-position:2px -140px; background-repeat:no-repeat; float:right; height:34px; padding:0; width:34px;}
.popclose:hover{}

.tipsty{font-size:14px;font-weight:bold;color:#d00;}
</style>
<div id="displayBox" class="displayBox" >
	<div class="l23 f14 poptt">
		<a class="popclose" href="http://blog.china.alibaba.com/bizblog/index.html?action=logout" target="_self" onclick="FD.widget.unblock(window);return false;" target="_self" ></a><b>用户登录</b>
	</div>
	<div class="popct">		
		<form name="signFrm" method="POST" action="http://china.alibaba.com/member/turbine/template/member,Signin/action/member.Signin" target="_self"  onsubmit="window.setTimeout('FYG(\'Password\').value=\'\';FYG(\'LoginId\').value=\'\'',500)">
		<input type="hidden" name="action" value="Signin"/>
		<input type="hidden" name="eventSubmit_doPost" value="anywhere"/>
		<input id="desAfterLogin" type=hidden name=Done Value="">
		<table class="lgin" cellspacing="0" cellpadding="0" border="0">
		<tr>
			<th>登录名：</th>
			<td><span class="it"><input type="text" id="LoginId" name="LoginId" size="18" maxlength=30 onfocus="this.className='itc'" onblur="this.className=''"/></span></td>
		</tr>
		<tr>
			<th>密  码：</th>
			<td><span class="it"><input type="password" id="Password" name="Password" size="18" onfocus="this.className='itc'" onblur="this.className=''"/></span></td>
		</tr>
		<tr>
			<td> </td>
			<td><input type="submit" class="su" value="登录"/> <a class="ml14" href="http://china.alibaba.com/member/turbine/template/member,ClubJoin" target="_blank">注册</a> <a href="http://china.alibaba.com/member/retrieve_password.htm" target="_blank">忘记密码</a></td>
		</tr>
		</table>
	</form>
	</div>
</div>

本地调试 Vote 类调用
<script type="text/javascript"> FD.widget.Vote.init([10363],
{
domain:'',proxy:'proxy.html',

popMess:function (tip){ if(tip == '您还没有登录，请登录！'){ FYG('desAfterLogin').value = window.location.href; FD.widget.block(window, { message: FYG('displayBox'),css: { top: (FYD.getViewportHeight() - 180) / 2 + 'px', left: (FYD.getViewportWidth() -300) / 2 + 'px', width: '300px' }}); }else{ FD.widget.block(window, { message: '<div class="displayBox" > <div class="l23 f14 poptt"> <a class="popclose" href="http://blog.china.alibaba.com/bizblog/index.html?action=logout" target="_self" onclick="FD.widget.unblock(window);return false;" target="_self" ></a><b>提示</b> </div> <div class="popct"><table width="100%" height="100%" cellspacing="0" cellpadding="0"><tr><td valign="middle" align="center" class="tipsty">'+tip+'</td></tr></table></div> </div>' , css: { top: (FYD.getViewportHeight() - 180) / 2 + 'px', left: (FYD.getViewportWidth() - 300) / 2 + 'px', width: '300px' }}); } return true; }

}
); </script>
线上 Vote 类调用（区别本地调用在于去掉了domain:'',proxy:'proxy.html' ）
<script type="text/javascript"> FD.widget.Vote.init([10363],
{

popMess:function (tip){ if(tip == '您还没有登录，请登录！'){ FYG('desAfterLogin').value = window.location.href; FD.widget.block(window, { message: FYG('displayBox'),css: { top: (FYD.getViewportHeight() - 180) / 2 + 'px', left: (FYD.getViewportWidth() -300) / 2 + 'px', width: '300px' }}); }else{ FD.widget.block(window, { message: '<div class="displayBox" > <div class="l23 f14 poptt"> <a class="popclose" href="http://blog.china.alibaba.com/bizblog/index.html?action=logout" target="_self" onclick="FD.widget.unblock(window);return false;" target="_self" ></a><b>提示</b> </div> <div class="popct"><table width="100%" height="100%" cellspacing="0" cellpadding="0"><tr><td valign="middle" align="center" class="tipsty">'+tip+'</td></tr></table></div> </div>' , css: { top: (FYD.getViewportHeight() - 180) / 2 + 'px', left: (FYD.getViewportWidth() - 300) / 2 + 'px', width: '300px' }}); } return true; }

}
); </script>