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.tmpl JQuery模板插件
Oct 10 Javascript
JS添加删除一组文本框并对输入信息加以验证判断其正确性
Apr 11 Javascript
Javascript代码在页面加载时的执行顺序介绍
May 03 Javascript
js通过iframe加载外部网页的实现代码
Apr 05 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(下)
Oct 28 Javascript
fastclick插件导致日期(input[type=&quot;date&quot;])控件无法被触发该如何解决
Nov 09 Javascript
正则表达式(语法篇推荐)
Jun 24 Javascript
利用Jasmine对Angular进行单元测试的方法详解
Jun 12 Javascript
JavaScript Canvas实现验证码
Aug 02 Javascript
基于node简单实现RSA加解密的方法步骤
Mar 21 Javascript
浅谈Vue3.0新版API之composition-api入坑指南
Apr 30 Javascript
Node与Python 双向通信的实现代码
Jul 16 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 前加at符合@的作用解析
2015/07/31 PHP
php实现遍历文件夹的方法汇总
2017/03/02 PHP
PHP实现的最大正向匹配算法示例
2017/12/19 PHP
PHP实现二维数组按照指定的字段进行排序算法示例
2019/04/23 PHP
jQuery客户端分页实例代码
2013/11/18 Javascript
结合JQ1.9通过js正则判断各种浏览器版本的方法
2013/12/30 Javascript
JavaScript隐式类型转换
2016/03/15 Javascript
AngularJS双向绑定和依赖反转实例详解
2017/04/15 Javascript
详解用node-images 打造简易图片服务器
2017/05/08 Javascript
JS实现Cookie读、写、删除操作工具类示例
2018/08/28 Javascript
vue移动端下拉刷新和上拉加载的实现代码
2018/09/08 Javascript
详解SPA中前端路由基本原理与实现方式
2018/09/12 Javascript
vue服务端渲染页面缓存和组件缓存的实例详解
2018/09/18 Javascript
微信小程序实现自动定位功能
2018/10/31 Javascript
JavaScript实现获取两个排序数组的中位数算法示例
2019/02/26 Javascript
Vue3新特性之在Composition API中使用CSS Modules
2020/07/13 Javascript
JS画布动态实现黑客帝国背景效果
2020/11/08 Javascript
Django中的Model操作表的实现
2018/07/24 Python
python网络应用开发知识点浅析
2019/05/28 Python
Python+opencv 实现图片文字的分割的方法示例
2019/07/04 Python
利用python实现AR教程
2019/11/20 Python
PyTorch学习:动态图和静态图的例子
2020/01/06 Python
anaconda3安装及jupyter环境配置全教程
2020/08/24 Python
体验完美剃须:The Art of Shaving
2018/08/06 全球购物
你的创业计划书怎样才能打动风投
2014/02/06 职场文书
运动会方阵解说词
2014/02/12 职场文书
企业精细化管理实施方案
2014/03/23 职场文书
校园安全演讲稿
2014/05/09 职场文书
暑期培训班策划方案
2014/08/26 职场文书
学雷锋活动倡议书
2014/08/30 职场文书
三好学生竞选稿
2015/11/21 职场文书
python小程序之飘落的银杏
2021/04/17 Python
如何获取numpy array前N个最大值
2021/05/14 Python
redis实现排行榜功能
2021/05/24 Redis
JavaScript中isPrototypeOf函数
2021/11/07 Javascript
详解Go语言中配置文件使用与日志配置
2022/06/01 Golang