bootstrap-star-rating使用详解

来源:互联网 发布:linux中安装anaconda 编辑:程序博客网 时间:2024/05/29 10:21

最近使用了bootstrap提供的星级评价插件:bootstrap-star-rating,在某些地方纠结了一下下,浪费了一点点时间,也查不到有关于它的使用教程,官方文档是英文的,不方便大家使用。在这里给大家总结一下,希望对用到这款插件的童鞋有所帮助。
本人是个后台php开发,项目中需要使用星级评分的插件,于是乎搜到了它,话不多说,切入正题:
首先下载bootstrap-star-rating
下载时需要jq币,不过大家放心,这个插件需要0 Jq币也就是免费供大家使用,只需要注册成为他们的会员就可以了。在这里不得不提一下jq插件中心这个地方确实有很多宝贝jquery插件库,涵盖了大部分jq插件。
下载后得到bootstrap-star-rating-master压缩包,解压,获得js、css以及一个index.html demo,有很多类型的星级评分样式,可以根据自己的需求选择一种,star-rating是基于input标签,根据其value值展示星星数,打开index.html,可以发现它引入了这几个文件star-rating css及js文件,其中jq.js、bootstrap-3.3.4.css、font-awesome.min.css是以外链的形式引入,jq相信大家项目中都有,外链不稳定,若地址更改的话会引入失败,所以我的做法是访问外链地址,譬如font-awesome.min.css,访问它,会获得其完整css代码,在项目中新建一个css文件,然后将代码复制进去,就避免了这种情况。引入好相应文件后,我们再看index demo里写的js,可以直接在相应的input里设置相应的css属性,也可以调用$(“#input”).rating()来初始化,下面给大家介绍这个方法的基本参数及我所遇到的一个小坑:
先上index里的demo js代码rating
主要看$inp.rating,选好星星样式后其他的代码都可以删掉,其中:
min:最少星星数
max:最大星星数
step:随着鼠标滑动增加的星星数
size:星星大小
showClear:是否显示清除按钮
除了这些之外,翻阅官方文档,还发现了其他参数
stars:默认显示星星数(默认按照input的value值展示,本人这里设置无效,没有深究原因)
接下来就是本人所遇到的坑了,需求是一个列表,当点击列表中的每一行时弹出该行需要展示的星星数,然而发现,当点击完第一条tr数据后,再点击其他tr行时,展示的都是第一次的星星数,开始以为input value值有问题,但检测发现并不是这个问题。翻阅官方文档,浪费了1个小时,终于找到了答案,并且发现了其他很多有用的参数:譬如rating参数,可以设置readonly为只读形式等,大家若是场景需要可以查阅官方文档。
继续往下翻,终于找到了我想要的:刷新,于是rating写成这样:
var inp=(“#input”);
$inp.rating(‘refresh’,{
stars:5,
min: 0,
max: 5,
step: 1,
showClear: false,
});
这样,rating在每次点击后都会刷新重置星星数,这样rating就会根据每行tr的value值不同而显示不同的星星数,至此本人问题解决,若有其他用过或者正在使用这款插件的童鞋遇到相应或者其他问题,欢迎评论交流^_^~~

原创粉丝点击