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 格式字符串的应用
Mar 29 Javascript
js处理自己不能定义二维数组的方法详解
Mar 03 Javascript
JavaScript函数的4种调用方法详解
Apr 22 Javascript
用模版生成HTML的的框架jquery.tmpl使用详解
Jan 07 Javascript
使用coffeescript编写node.js项目的方法汇总
Aug 05 Javascript
js利用appendChild对标签进行排序的实现方法
Oct 16 Javascript
node.js爬虫爬取拉勾网职位信息
Mar 14 Javascript
原生js封装自定义滚动条
Mar 24 Javascript
详解weex默认webpack.config.js改造
Jan 08 Javascript
Bootstrap table中toolbar新增条件查询及refresh参数使用方法
May 18 Javascript
微信小程序云开发实现增删改查功能
May 17 Javascript
js实现带箭头的进度流程
Mar 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实现的用户查询类实例
2015/06/18 PHP
PHP实现C#山寨ArrayList的方法
2015/07/16 PHP
JS将数字转换成三位逗号分隔的样式(示例代码)
2014/02/19 Javascript
解决Jquery鼠标经过不停滑动的问题
2014/03/03 Javascript
js函数定时器实现定时读取系统实时连接数
2014/04/30 Javascript
js使用心得分享
2015/01/13 Javascript
jQuery实现径向动画菜单效果
2015/07/17 Javascript
jQuery实现滑动页面固定顶部显示(可根据显示位置消失与替换)
2015/10/28 Javascript
Vue.js每天必学之过渡与动画
2016/09/06 Javascript
JavaScript仿百度图片浏览效果
2016/11/23 Javascript
ReactJs快速入门教程(精华版)
2016/11/28 Javascript
JS基于正则截取替换特定字符之间字符串操作示例
2017/02/03 Javascript
footer定位页面底部(代码分享)
2017/03/07 Javascript
js, jQuery实现全选、反选功能
2017/03/08 Javascript
Vue如何实现组件的源码解析
2017/06/08 Javascript
node-sass安装失败的原因与解决方法
2017/09/04 Javascript
详解如何解决vue开发请求数据跨域的问题(基于浏览器的配置解决)
2018/11/12 Javascript
Node.js之readline模块的使用详解
2019/03/25 Javascript
小程序scroll-view安卓机隐藏横向滚动条的实现详解
2019/05/16 Javascript
layui下拉框获取下拉值(select)的例子
2019/09/10 Javascript
浅谈TypeScript 用 Webpack/ts-node 运行的配置记录
2019/10/11 Javascript
Python常用的内置序列结构(列表、元组、字典)学习笔记
2016/07/08 Python
python创建文件备份的脚本
2018/09/11 Python
Python使用selenium + headless chrome获取网页内容的方法示例
2019/10/16 Python
Python Flask异步发送邮件实现方法解析
2020/08/01 Python
HTML5之HTML元素扩展(上)—新增加的元素及使用概述
2013/01/31 HTML / CSS
Lookfantastic葡萄牙官方网站:欧洲第一大化妆品零售商
2018/03/17 全球购物
 Alo Yoga官网:购买瑜伽服装
2018/06/17 全球购物
nohup的用法
2012/11/26 面试题
先进个人获奖感言
2014/01/24 职场文书
积极向上的团队口号
2014/06/06 职场文书
旅行社优秀创业计划书
2014/08/16 职场文书
农业局党的群众路线教育实践活动整改方案
2014/09/20 职场文书
硕士学位论文评语
2014/12/31 职场文书
法务专员岗位职责
2015/02/14 职场文书
HTML5 新增内容和 API详解
2021/11/17 HTML / CSS