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 相关文章推荐
jQuery 工具函数学习资料
Apr 29 Javascript
jQuery+ajax实现顶一下,踩一下效果
Jul 17 Javascript
深入理解JavaScript系列(2) 揭秘命名函数表达式
Jan 15 Javascript
javascript实现滑动解锁功能
Dec 31 Javascript
jQuery Ajax中的事件详细介绍
Apr 16 Javascript
js简单倒计时实现代码
Apr 30 Javascript
判断JS对象是否拥有某属性的方法推荐
May 12 Javascript
Javascript实现图片不间断滚动的代码
Jun 22 Javascript
Webpack中css-loader和less-loader的使用教程
Apr 27 Javascript
js通过Date对象实现倒计时动画效果
Oct 27 Javascript
vue+iview使用树形控件的具体使用
Nov 02 Javascript
JS如何监听div的resize事件详解
Dec 03 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获取金书网的书名的实现代码
2010/06/11 PHP
thinkphp跨库操作的简单代码实例
2016/09/22 PHP
Yii框架数据模型的验证规则rules()被执行的方法
2016/12/02 PHP
利用PHP抓取百度阅读的方法示例
2016/12/18 PHP
Docker搭建自己的PHP开发环境
2018/02/24 PHP
B/S开发中常用javaScript技术与代码
2007/03/09 Javascript
基于jquery的lazy loader插件实现图片的延迟加载[简单使用]
2011/05/07 Javascript
扩展jQuery对象时如何扩展成员变量具体怎么实现
2014/04/25 Javascript
js简单的弹出框有关闭按钮
2014/05/05 Javascript
node.js中的fs.ftruncate方法使用说明
2014/12/15 Javascript
js实现String.Fomat的实例代码
2016/09/02 Javascript
Angular的$http的ajax的请求操作(推荐)
2017/01/10 Javascript
AngularJS路由实现页面跳转实例
2017/03/03 Javascript
Vue中如何实现轮播图的示例代码
2017/07/27 Javascript
js精确的加减乘除实例
2017/11/14 Javascript
微信小程序checkbox组件使用详解
2018/01/31 Javascript
vue中mint-ui的使用方法
2018/04/04 Javascript
Vue.js图片预览插件使用详解
2018/08/27 Javascript
JavaScript自定义超时API代码实例
2020/04/30 Javascript
详解vue 组件注册
2020/11/20 Vue.js
JavaScript实现移动小精灵的案例代码
2020/12/12 Javascript
[07:43]《辉夜杯》公开赛晋级外卡赛战队—TRG训练生活探秘
2015/12/11 DOTA
[36:13]Mineski vs iG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[00:20]TI9观赛名额抽取Ⅱ
2019/07/24 DOTA
Python语言实现机器学习的K-近邻算法
2015/06/11 Python
python中while和for的区别总结
2019/06/28 Python
django 自定义过滤器(filter)处理较为复杂的变量方法
2019/08/12 Python
Python faker生成器生成虚拟数据代码实例
2020/07/20 Python
Python内置函数property()如何使用
2020/09/01 Python
python 使用paramiko模块进行封装,远程操作linux主机的示例代码
2020/12/03 Python
Django自带的用户验证系统实现
2020/12/18 Python
css3实现wifi信号逐渐增强效果实例
2017/08/09 HTML / CSS
详解HTML5中div和section以及article的区别
2015/07/14 HTML / CSS
HTML5中使用json对象的实例代码
2018/09/10 HTML / CSS
请说出你所知道的线程同步的方法
2013/04/19 面试题
授权委托书怎么写
2014/09/25 职场文书