标签：style blog io color ar os sp java for
需求：
1.投票分为带图片投票与无图片投票两个投票UI
2.投票前与投票后会有UI不同
3.投票line会跟随投票num进行百分比的增长（with通过js计算）
需要技术：
requires.js
template
ajax jsonp
javascript
投票javascript解析：
function Vote(o){ var me = this; me.voteWrap = o.voteWrap; me.votedWrap = o.votedWrap; me.submitBtn = null; me.voteInputs = null; me.lines = o.lines; me.tid = o.tid; me.fid = o.fid; me.scores = typeof o.scores === ‘undefined‘ ? [0,0,0] : o.scores; me.totalVote = typeof o.totalVote === ‘undefined‘ ? 0 : o.totalVote; // 有图片跟无图片的选中的的templated id me.templateNoPic = ‘J-template-vote-no-pic‘; me.templateHasPic = ‘J-template-pic-vote‘; me.voteHtmlDom = null; // 保持投票的HTML me.voteHtmlParDom = o.voteHtmlParDom; // 放置投票HTML的dom
// submit的时候，存储选中的投票对于的id me.selectedIds = []; }
init函数，初始化
执行regEvent函数进行注册事件。
Vote.prototype.init = function(){ var me = this; me.regEvent(); };
getData函数，获取数据，ajax从接口获取data数据
seccess获取数据成功后，执行renderHtml函数，渲染html投票。
定义触发事件按钮与投票选项。
/** * 获取数据 */ Vote.prototype.getData = function(){ var me = this; $.ajax({ url: ‘接口连接‘, data: { 传参 }, dataType: ‘jsonp‘, type: ‘GET‘, success: function(data){ me.data = data; // 渲染投票项目 me.renderHtml(); me.submitBtn = me.voteHtmlDom.find(‘.J-sure-btn‘); me.voteInputs = me.voteHtmlDom.find(‘input‘); me.regEvent(); } }) };
render函数，获取HtmlDom，投票html写进哪个div中
id参数由template传参。
/** * 投票HTML渲染，id为投票div的id。 */ Vote.prototype.render = function(id){ var me = this; me.voteHtmlDom = $(template(id,me.data)); me.voteHtmlParDom.html(me.voteHtmlDom); }
renderHtml函数，渲染投票Html。
用获取数据data.small判断是否是带图片投票。
/** * 投票HTML渲染。 */ Vote.prototype.renderHtml = function(){ var me = this; if (me.data.data[0].small) { me.render(me.templateHasPic); }else{ me.render(me.templateNoPic); } me.setvotedWidth(); // 需要现生成html，才能计算宽度，再重新设置线的宽度和百分比。 if (me.data.data[0].small) { me.render(me.templateHasPic); }else{ me.render(me.templateNoPic); } }
setData函数，提交数据。
计算投票后对应id的num数值。
/** * 提交数据 */ Vote.prototype.setData = function(){ var me = this; $.ajax({ url:‘接口连接‘, data:{ 传参 }, dataType: ‘jsonp‘, type: ‘GET‘, success: function(data){ var id, dataItem, i = 0, j = 0, len = me.selectedIds.length, len2 = me.data.data.length; if(parseInt(data.status) === 0){ // 设置为投过票 me.data.voted = true; // 给之前选中过的选项的投票数加1 for (i; i < len; i++) { id = me.selectedIds[i]; for (j=0; j < len2; j++){ dataItem = me.data.data[j]; if (parseInt(dataItem.id, 10) === parseInt(id, 10)) { dataItem.num = dataItem.num + 1; } } } me.renderHtml(); } } })
regEvent函数，注册事件。触发投票事件。
preventDefault();阻止浏览器默认动作。
getSelectedItem();判断是否有选中项。
setData();发送数据。
/** * 注册事件 to do */ Vote.prototype.regEvent = function(){ var me = this; me.submitBtn.click(function(e){ var currSelected = me.getSelectedItem(); e.preventDefault(); // 判断选择投票项了没有,或者是否超过最大选择数 if(me.selectedIds.length === 0 || me.selectedIds.length > me.data.maxchoice) { alert("还没有选择"); return false; } me.setData(); // me.renderHtml(); }); };
getSelectedItem函数，获取选中项。
循环数组voteInput。如果选中记录id。
/** * 获取选择项 */ Vote.prototype.getSelectedItem = function(){ var i, me = this, index, len = me.voteInputs.length; // 每次获取之前，先清空 me.selectedIds = []; for (i = 0; i < len; i++) { if($(me.voteInputs[i]).is(‘:checked‘)){ me.selectedIds.push(me.data.data[i].id); } } };
setvotedWidth函数，计算投票条长短，计算投票百分比。
/** * 计算投票条长度。百分比 */ Vote.prototype.setvotedWidth = function(){ var me = this; var i, index, maxWidth = me.voteHtmlDom.find(‘.voted-line‘).eq(0).width(), dataArr = me.data.data, len = dataArr.length, percent = 0; me.totalVote = 0; for (i = 0; i < len; i++){ me.totalVote += dataArr[i].num; } for (i = 0; i < len; i++){ dataArr[i].percent = (100 * (dataArr[i].num / me.totalVote)).toFixed(0); // toFixed 转为整数 dataArr[i].width = (maxWidth * (dataArr[i].num / me.totalVote)).toFixed(0); }
数据php接口
### 投票获取数据接口 参数： + mod: ‘viewthread‘ + tid: // 主题id + isjson: 1 返回值： { "status": 1, "msg": "success", "maxchoice": "3", // 选项最大可选数，1为单选 "voted": 0, // 判断是否投过票。voted=1表示投过票了，voted=0表示没有投过票。 "data": [ // 返回的主要数据是data，一个数组，里面是对象，每个对象代表一个投票选项 { "id": 156, // 投票选项id "num": 11, // 投票数目 "title": "string", // 投票标题 "small": null, // 小图片链接 判断是否是图片投票 "big": null // 大图片链接 }, ] } ### 投票提交数据接口 参数： + mod: ‘misc‘ + action: ‘votepoll‘ + fid: // 圈子id + tid: // 主题id + pollsubmit: yes + pollanswers: 156,157 + isjson: 1 返回值： { "status":1, "msg":"\u6ca1\u6709\u6295\u7968\u7684\u6743\u9650" // 是否有投票权限 }
项目HTML：
用template技术渲染模板。
Html模板解析:
<script type="text/html" id="J-template-vote-no-pic"> <div class="vote-wrap"> <div class="vote-box"> {{each data as value index}} <div class="item"> <label style="display: {{if voted}}none{{else}}block{{/if}}"><input name="vote" type="{{if maxchoice == 1 }}radio{{else}}checkbox{{/if}}" />{{value.title}}</label> <div class="voted-name" style="display: {{if voted}}block{{else}}none{{/if}}">{{value.title}}</div> <div class="voted-line" id="voted1"> <div class="voted-boder"> </div> <div class="voted-color voted-color1" style="width:{{value.width}}px"></div> <div class="voted-amount">({{value.num}}人支持)</div> </div> </div> {{/each}} </div><!-- end vote-box --> <div class="sure-box"> <span class="sure-text" style="display: {{if voted == 1}}block{{else}}none{{/if}}">你已经投过票了</span> <span class="sure-btn J-sure-btn" style="display: {{if voted}}none{{else}}block{{/if}}"></span> </div> </div><!-- end vote-wrap --> </script> <script type="text/html" id="J-template-pic-vote"> <div class="vote-wrap-pic"> <div class="vote-boxpic"> <ul> {{each data as value index}} <li> <div class="item"> <img src="{{value.small}}" width="180" height="180" /> <label style="display: {{if voted}}none{{else}}block{{/if}}"><input name="vote" type="{{if maxchoice == 1 }}radio{{else}}checkbox{{/if}}" />{{value.title}}</label> <div class="voted-name" style="display: {{if voted}}block{{else}}none{{/if}}">{{value.title}}</div> <div class="voted-line voted-color3" id="voted1"> <div class="voted-line"> <div class="voted-boder"> </div> <div class="voted-color voted-color3" style="width:{{value.width}}px"></div> </div> <div class="voted-amount">{{value.num}}票</div> <div class="voted-percentage">{{value.percent}}%</div> </div> </div> </li> {{/each}} </ul> </div> <!-- end vote-boxpic --> <div class="sure-box"> <span class="sure-btn J-sure-btn" style="display: {{if voted}}none{{else}}block{{/if}}"></span> <span class="sure-text" style="display: {{if voted}}block{{else}}none{{/if}}">你已经投过票了</span> </div> </div> </script>
投票less样式
/** * 投票样式 */
.vote-wrap{ background: #fdfdfd; width: 650px; .vote-box{ font-size: 14px; color: #636363; .item{ margin-top: 10px; label{ display: block; font: normal 14px/14px "SimSun"; color: #636363; input{ } } .voted-name{ } .voted-line{ height: 17px; width: 395px; margin-top: 10px; position: relative; z-index: 99; background: #f7f7f7; .voted-boder{ width: 395px; height: 17px; background: url(../css/img/nopicpk.png) no-repeat top center; position: absolute; z-index: 10; } .voted-color{ height: 17px; transition: width 2s; -moz-transition: width 2s; /* Firefox 4 */ -webkit-transition: width 2s; /* Safari 和 Chrome */ -o-transition: width 2s; position:absolute; top: 0px; left: 0px; z-index: 1; &.voted-color1{ background: #29a8fe; } &.voted-color2{ background: #ff6960; } &.voted-color3{ background: #40bb6a; } } .voted-amount{ width: 250px; height: 17px; position: absolute; top: 0px; right: -260px; text-align: left; font: normal 12px/17px "SimSun"; color: #a4a1a1; z-index: 999; } } } } .sure-box{ overflow: hidden; height: 35px; line-height: 35px; margin-top: 20px; .sure-btn{ display: inline; margin-right: 37px; float: left; width: 82px; height: 35px; background-image: url("../css/img/sure-btn.png"); background-position: 0px 0px; cursor: pointer; &:hover{ background-position: 0 -35px; } } .sure-text{ font-size: 12px; color: #a4a1a1; } } } .vote-wrap-pic{ width: 980px; .vote-boxpic{ ul{ width: 1000px; list-style: none; overflow: hidden; margin: 0px; padding: 0px; margin-left: -20px; li{ float: left; display: inline-block; margin-left: 20px; width: 180px; height: 245px; .item{ margin-top: 10px; label{ display: block; font: normal 12px/32px "SimSun"; color: #575958; width: 151px; height: 32px; margin: 0 auto; input{ } } .voted-name{ width: 151px; height: 35px; font: normal 12px/35px "SimSun"; color: #575958; } .voted-line{ height: 17px; width: 151px; position: relative; background: #f7f7f7; margin: 0 auto; .voted-boder{ width: 151px; height: 17px; background: url(../css/img/picpk.png) no-repeat top center; position: absolute; top: 0px; left: 0px; z-index: 10; } .voted-color{ height: 17px; transition: width 2s; -moz-transition: width 2s; /* Firefox 4 */ -webkit-transition: width 2s; /* Safari 和 Chrome */ -o-transition: width 2s; position:absolute; top: 0px; left: 0px; z-index: 1; &.voted-color1{ background: #29a8fe; } &.voted-color2{ background: #ff6960; } &.voted-color3{ background: #40bb6a; } } .voted-amount { width: 63px; height: 17px; position: absolute; top: 0px; left: 12px; text-align: left; font: normal 12px/17px "SimSun"; color: #5e5d5d; z-index: 999; } .voted-percentage{ width: 59px; height: 17px; position: absolute; top: 0px; right: 16px; text-align: right; font: normal 12px/17px "SimSun"; color: #5e5d5d; z-index: 999; } } } } } } .sure-box{ overflow: hidden; height: 35px; line-height: 35px; margin-top: 20px; .sure-btn{ display: inline; margin-right: 37px; float: left; width: 82px; height: 35px; background-image: url("../css/img/sure-btn.png"); background-position: 0px 0px; cursor: pointer; &:hover{ background-position: 0 -35px; } } .sure-text{ font-size: 12px; color: #a4a1a1; } } }
标签：style blog io color ar os sp java for
原文地址：http://www.cnblogs.com/moxiaohan/p/4097951.html
