mobile Web 星星打分 实践
2015-11-15 12:56
225 查看
<div class="text-center star-box" style="margin:20px 0">
<div class="star-group"><span>创新</span>
<i class="icon-star-empty star"></i>
<i class="icon-star-empty star"></i>
<i class="icon-star-empty star"></i>
<i class="icon-star-empty star"></i>
<i class="icon-star-empty star"></i>
<span class="star-result"></span><span class="star-avg"></span>
</div>
<div class="star-group"><span>实用</span>
<i class="icon-star-empty star"></i>
<i class="icon-star-empty star"></i>
<i class="icon-star-empty star"></i>
<i class="icon-star-empty star"></i>
<i class="icon-star-empty star"></i>
<span class="star-result"></span><span class="star-avg"></span>
</div>
<div class="star-group"><span>设计</span>
<i class="icon-star-empty star"></i>
<i class="icon-star-empty star"></i>
<i class="icon-star-empty star"></i>
<i class="icon-star-empty star"></i>
<i class="icon-star-empty star"></i>
<span class="star-result"></span><span class="star-avg"></span>
</div>
</div>
由于mobile端只能click,或者说tap,没有hover,故重新设计了这个插件。
<div class="star-group"><span>创新</span>
<i class="icon-star-empty star"></i>
<i class="icon-star-empty star"></i>
<i class="icon-star-empty star"></i>
<i class="icon-star-empty star"></i>
<i class="icon-star-empty star"></i>
<span class="star-result"></span><span class="star-avg"></span>
</div>
<div class="star-group"><span>实用</span>
<i class="icon-star-empty star"></i>
<i class="icon-star-empty star"></i>
<i class="icon-star-empty star"></i>
<i class="icon-star-empty star"></i>
<i class="icon-star-empty star"></i>
<span class="star-result"></span><span class="star-avg"></span>
</div>
<div class="star-group"><span>设计</span>
<i class="icon-star-empty star"></i>
<i class="icon-star-empty star"></i>
<i class="icon-star-empty star"></i>
<i class="icon-star-empty star"></i>
<i class="icon-star-empty star"></i>
<span class="star-result"></span><span class="star-avg"></span>
</div>
</div>
(function starin(){ var sg = new Array(); $(".star").click(function(){ var stargroup = $(this).parent(); var star = $(stargroup).find('.star'); var starvalue = $(this).index(); var stargroupvalue = $(stargroup).index(); sg[stargroupvalue] = starvalue; a = sg[0]; b = sg[1]; c = sg[2]; console.log(a,b,c) $(star).siblings('.star-result').html(starvalue+" 分"); for (var i = 0; i < starvalue; i++) { $(star[i]).removeClass("icon-star-empty"); $(star[i]).addClass("icon-star"); }; for (var y = starvalue; y < 6; y++) { $(star[y]).removeClass("icon-star"); $(star[y]).addClass("icon-star-empty"); }; a=null; b=null; c=null; }) })()
由于mobile端只能click,或者说tap,没有hover,故重新设计了这个插件。
相关文章推荐
- java-WEB中的监听器Lisener
- [转载]Activity中ConfigChanges属性的用法
- GUI - Web前端开发框架
- Extjs4.0 最新最全视频教程
- java自动生成验证码插件-kaptcha
- MyEclipse Web Project转Eclipse Dynamic Web Project
- axis备忘
- jQuery菜单插件用法实例
- Erlang实现的一个Web服务器代码实例
- 防止网页脚本病毒执行的方法-from web
- 自学成才的秘密:115个 web Develop 资源
- 使用批处理修改web打印设置笔记 适用于IE
- Apache Web让JSP“动”起来
- web下载的ActiveX控件自动更新
- 加载flash9.ocx出现错误的解决方法
- 推荐六款WEB上传组件性能测试与比较第1/10页
- 关于三种主流WEB架构的思考
- jquery实现的代替传统checkbox样式插件
- 使用 Iisext.vbs 列出 Web 服务扩展文件的方法
- 使用 Iisext.vbs 删除 Web 服务扩展文件的方法