插件描述：一款功能强大的jquery评分插件jquery.raty
使用jQuery Raty，可以很方便的在页面上嵌入一个评分组件
使用方法很简单
引用以下文件
1 2 | <script type="text/javascript" src="demo/js/jquery.min.js"></script><script type="text/javascript" src="lib/jquery.raty.min.js"></script> |
Html结构
1 2 3 4 5 6 7 8 9 10 | <div style="width:500px; margin:100px auto;"> <div class="demo"> <div id="function-demo" class="target-demo"></div> <div id="function-hint" class="hint"></div> </div> <div class="demo"> <div id="function-demo1" class="target-demo"></div> <div id="function-hint1" class="hint"></div> </div></div> |
js调用方法
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | $(function() { $.fn.raty.defaults.path = 'lib/img'; $('#function-demo').raty({ number: 5, //多少个星星设置 targetType: 'hint', //类型选择，number是数字值，hint，是设置的数组值 path: 'demo/img', hints: ['差', '一般', '好', '非常好', '全五星'], cancelOff: 'cancel-off-big.png', cancelOn: 'cancel-on-big.png', size: 24, starHalf: 'star-half-big.png', starOff: 'star-off-big.png', starOn: 'star-on-big.png', target: '#function-hint', cancel: false, targetKeep: true, targetText: '请选择评分', click: function(score, evt) { alert('ID: ' + $(this).attr('id') + "\nscore: " + score + "\nevent: " + evt.type); } }); $('#function-demo1').raty({ number: 10, //多少个星星设置 score: 2, //初始值是设置 targetType: 'number', //类型选择，number是数字值，hint，是设置的数组值 path: 'demo/img', cancelOff: 'cancel-off-big.png', cancelOn: 'cancel-on-big.png', size: 24, starHalf: 'star-half-big.png', starOff: 'star-off-big.png', starOn: 'star-on-big.png', target: '#function-hint1', cancel: false, targetKeep: true, precision: false, //是否包含小数 click: function(score, evt) { alert('ID: ' + $(this).attr('id') + "\nscore: " + score + "\nevent: " + evt.type); } });}); |
特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com
- 上一个特效： 移动端web端图片轮播
- 下一个特效： 手机移动端图片播放