jquery插件star-rating.js实现星级评分特效


Posted in Javascript onApril 15, 2015

特效介绍

jquery星级评分插件star-rating.js下载插件,点击星星或者心的左边,就是半分,右边就是1分。点击减号,分数置为0。不兼容IE8以下的浏览器。

演示图

jquery插件star-rating.js实现星级评分特效

使用方法

第一步、引入下面的代码:

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet">

<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>

<link href="css/star-rating.css" media="all" rel="stylesheet" type="text/css"/>

<script src="js/star-rating.js" type="text/javascript"></script>

第二步、想要使用什么效果,就引入相应的input框:

<input id="input-2b" type="number" class="rating" min="0" max="5" step="0.5" data-size="xl"

   data-symbol="" data-default-caption="{rating} hearts" data-star-captions="{}">

第三步,如果需要重置或者提交按钮,可以引入下面的代码:

<button type="submit" class="btn btn-primary">Submit</button>

<button type="reset" class="btn btn-default">Reset</button>

第四步、引入js调用代码:

<script>

   jQuery(document).ready(function () {

       $(".rating-kv").rating();

   });

</script>

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
在一个form用一个SUBMIT(或button)分别提交到两个处理表单页面的代码
Feb 15 Javascript
javascript 全选与全取消功能的实现代码
Dec 23 Javascript
javascript向后台传送相同属性的参数即数组参数
Feb 17 Javascript
js 采用delete实现继承示例代码
May 20 Javascript
在JS数组特定索引处指定位置插入元素的技巧
Aug 24 Javascript
JavaScript常用脚本汇总(三)
Mar 04 Javascript
jQuery实现表格颜色交替显示的方法
Mar 09 Javascript
JavaScript函数节流和函数防抖之间的区别
Feb 15 Javascript
使用canvas及js简单生成验证码方法
Apr 02 Javascript
五分钟搞懂Vuex实用知识(小结)
Aug 12 Javascript
Vue发布订阅模式实现过程图解
Apr 30 Javascript
vue-cli —— 如何局部修改Element样式
Oct 22 Javascript
JQuery判断radio(单选框)是否选中和获取选中值方法总结
Apr 15 #Javascript
jQuery实现首页顶部可伸缩广告特效代码
Apr 15 #Javascript
JavaScript实现网页对象拖放功能的方法
Apr 15 #Javascript
Jquery判断radio、selelct、checkbox是否选中及获取选中值方法总结
Apr 15 #Javascript
jQuery实现仿路边灯箱广告图片轮播效果
Apr 15 #Javascript
JavaScript中window.open用法实例详解
Apr 15 #Javascript
flash+jQuery实现可关闭及重复播放的压顶广告
Apr 15 #Javascript
You might like
如何使用PHP中的字符串函数
2006/10/09 PHP
BBS(php &amp; mysql)完整版(七)
2006/10/09 PHP
phpexcel导出excel的颜色和网页中的颜色显示不一致
2012/12/11 PHP
浅谈PHP中静态方法和非静态方法的相互调用
2016/10/04 PHP
jquery 查找select ,并触发事件的实现代码
2011/03/30 Javascript
javascript中eval和with用法实例总结
2015/11/30 Javascript
js获取所有checkbox的值的简单实例
2016/05/30 Javascript
NodeJs读取JSON文件格式化时的注意事项
2016/09/25 NodeJs
angular ngClick阻止冒泡使用默认行为的方法
2016/11/03 Javascript
Bootstrap基本插件学习笔记之轮播幻灯片(23)
2016/12/08 Javascript
使用p5.js临摹动态图形
2019/10/23 Javascript
vue Tab切换以及缓存页面处理的几种方式
2019/11/05 Javascript
js属性对象的hasOwnProperty方法的使用
2021/02/05 Javascript
[01:57]2016完美“圣”典风云人物:国士无双专访
2016/12/04 DOTA
[01:08:43]DOTA2-DPC中国联赛定级赛 Phoenix vs DLG BO3第一场 1月9日
2021/03/11 DOTA
布同 统计英文单词的个数的python代码
2011/03/13 Python
利用Python演示数型数据结构的教程
2015/04/03 Python
浅析Python中将单词首字母大写的capitalize()方法
2015/05/18 Python
尝试使用Python多线程抓取代理服务器IP地址的示例
2015/11/09 Python
详解Python的Lambda函数与排序
2016/10/25 Python
python中正则的使用指南
2016/12/04 Python
浅谈python正则的常用方法 覆盖范围70%以上
2018/03/14 Python
Django对接支付宝实现支付宝充值金币功能示例
2019/12/17 Python
python3实现从kafka获取数据,并解析为json格式,写入到mysql中
2019/12/23 Python
使用CSS3的appearance属性改变任何元素的浏览器默认风格
2012/12/24 HTML / CSS
HTML table 表格边框的实现思路
2019/10/12 HTML / CSS
阿玛尼美国官方网站:Armani.com
2016/11/25 全球购物
女士和男士时尚鞋在线购物:Shoespie
2019/02/28 全球购物
牛津在线药房:Oxford Online Pharmacy
2020/11/16 全球购物
自我鉴定范文200字
2013/10/02 职场文书
医学院护理专业应届生求职信
2013/11/12 职场文书
运动会开幕式邀请函
2014/01/22 职场文书
学习决心书
2014/03/11 职场文书
质监局领导班子对照检查材料思想汇报
2014/09/27 职场文书
2014年保洁员工作总结
2014/11/19 职场文书
网吧温馨提示
2015/07/17 职场文书