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 09 Javascript
js获取浏览器的可视区域尺寸的实现代码
Nov 30 Javascript
jQuery性能优化28条建议你值得借鉴
Feb 16 Javascript
ExtJS的拖拽效果示例
Dec 09 Javascript
javascript事件冒泡详解和捕获、阻止方法
Apr 12 Javascript
Javascript小技巧之生成html元素
May 15 Javascript
深入理解Commonjs规范及Node模块实现
May 17 Javascript
浅析node.js的模块加载机制
May 25 Javascript
express express-session的使用小结
Dec 12 Javascript
探索JavaScript中私有成员的相关知识
Jun 13 Javascript
Vue插槽_特殊特性slot,slot-scope与指令v-slot说明
Sep 04 Javascript
手机浏览器唤起微信分享(JS)
Oct 11 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的5个入手程序
2006/11/23 PHP
php下将多个数组合并成一个数组的方法与实例代码
2011/02/03 PHP
php中根据某年第几天计算出日期年月日的代码
2011/02/24 PHP
PHP mail()函数使用及配置方法
2014/01/14 PHP
php 魔术方法详解
2014/11/11 PHP
PHP框架Laravel的小技巧两则
2015/02/10 PHP
php ajax异步读取rss文档数据
2016/03/29 PHP
PHP错误提示It is not safe to rely on the system……的解决方法
2019/03/25 PHP
express的中间件basicAuth详解
2014/12/04 Javascript
基于Angularjs实现分页功能
2016/05/30 Javascript
Javascript的动态增加类的实现方法
2016/10/20 Javascript
基于jQuery实现Accordion手风琴自定义插件
2020/10/13 Javascript
浅谈jQuery中的$.extend方法来扩展JSON对象
2017/02/12 Javascript
Angular2安装angular-cli
2017/05/21 Javascript
详解Angular2表单-模板驱动的表单(Template-Driven Forms)
2017/08/04 Javascript
js实现文件上传功能 后台使用MultipartFile
2018/09/08 Javascript
js tab栏切换代码实例解析
2019/09/03 Javascript
vue-preview动态获取图片宽高并增加旋转功能的实现
2020/07/29 Javascript
原生js中运算符及流程控制示例详解
2021/01/05 Javascript
python函数缺省值与引用学习笔记分享
2013/02/10 Python
Python处理RSS、ATOM模块FEEDPARSER介绍
2015/02/18 Python
Python实现复杂对象转JSON的方法示例
2017/06/22 Python
Python退火算法在高次方程的应用
2018/07/26 Python
PyQt5 多窗口连接实例
2019/06/19 Python
关于pymysql模块的使用以及代码详解
2019/09/01 Python
Python OpenCV读取显示视频的方法示例
2020/02/20 Python
英国最大的邮寄种子和植物公司:Thompson & Morgan
2017/09/21 全球购物
经典公益广告词
2014/03/13 职场文书
就业意向书范文
2014/04/01 职场文书
小学二年级学生评语
2014/04/21 职场文书
信仰纪录片观后感
2015/06/08 职场文书
js Proxy的原理详解
2021/05/25 Javascript
解析MySQL binlog
2021/06/11 MySQL
前端JavaScript大管家 package.json
2021/11/02 Javascript
Redis 持久化 RDB 与 AOF的执行过程
2021/11/07 Redis
js中Map和Set的用法及区别实例详解
2022/02/15 Javascript