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 相关文章推荐
Javascript下的keyCode键码值表
Apr 10 Javascript
初学js 新节点的创建 删除 的步骤
Jul 04 Javascript
jQuery 动态云标签插件
Nov 11 Javascript
jQuery设置指定网页元素宽度和高度的方法
Mar 25 Javascript
js基于myFocus实现轮播图效果
Feb 14 Javascript
JS完成画圆圈的小球
Mar 07 Javascript
jQuery实现动态生成表格并为行绑定单击变色动作的方法
Apr 17 jQuery
利用vueJs实现图片轮播实例代码
Jun 03 Javascript
JS实现新建文件夹功能
Jun 17 Javascript
vue.js实现条件渲染的实例代码
Jun 22 Javascript
深入理解Vue 单向数据流的原理
Nov 09 Javascript
vue柱状进度条图像的完美实现方案
Aug 26 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面向对象三大特点学习(充分理解抽象、封装、继承、多态)
2012/05/07 PHP
php中通过curl smtp发送邮件
2012/06/05 PHP
CMS中PHP判断系统是否已经安装的方法示例
2014/07/26 PHP
php输出xml属性的方法
2015/03/19 PHP
PHP curl伪造IP地址和header信息代码实例
2015/04/27 PHP
Nodejs极简入门教程(二):定时器
2014/10/25 NodeJs
JavaScript中用getDate()方法返回指定日期的教程
2015/06/09 Javascript
微信小程序 toast 详解及实例代码
2016/11/09 Javascript
javascript基本数据类型和转换
2017/03/17 Javascript
Vue 2.0 服务端渲染入门介绍
2017/03/29 Javascript
iscroll动态加载数据完美解决方法
2017/07/18 Javascript
总结js中的一些兼容性易错的问题
2017/12/18 Javascript
浅谈React前后端同构防止重复渲染
2018/01/05 Javascript
PHP实现基于Redis的MessageQueue队列封装操作示例
2019/02/02 Javascript
vue cli使用融云实现聊天功能的实例代码
2019/04/19 Javascript
python实现探测socket和web服务示例
2014/03/28 Python
python正常时间和unix时间戳相互转换的方法
2015/04/23 Python
Python数据类型详解(四)字典:dict
2016/05/12 Python
Python实现生成随机数据插入mysql数据库的方法
2017/12/25 Python
Django之模板层的实现代码
2019/09/09 Python
在Python中利用pickle保存变量的实例
2019/12/30 Python
使用CSS3制作版头动画效果
2020/12/24 HTML / CSS
香港永安旅游网:Wing On Travel
2017/04/10 全球购物
Marriott国际:万豪国际酒店查询预订
2017/09/25 全球购物
英国最大的割草机购买网站:Just Lawnmowers
2019/11/02 全球购物
泰国在线书店:SE-ED
2020/06/21 全球购物
既然说Ruby中一切都是对象,那么Ruby中类也是对象吗
2013/01/26 面试题
护士自我鉴定范文
2013/10/06 职场文书
大学生毕业自我评价范文分享
2013/11/11 职场文书
我的动漫时代的创业计划书范文
2014/01/27 职场文书
外国人来华邀请函
2015/01/31 职场文书
2015法院个人工作总结范文
2015/05/25 职场文书
家庭贫困证明
2015/06/16 职场文书
汤姆叔叔的小屋读书笔记
2015/06/30 职场文书
三八妇女节主持词
2015/07/04 职场文书
java代码实现空间切割
2022/01/18 Java/Android