注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

响应式jquery星星评分插件Bootstrap Star Rating

UI fishcity 5077浏览

jquery星星评分插件

Bootstrap Star Rating是一个简单而功能强大的jQuery星星评分插件,支持小数点星填充和先进的RTL输入功能。插件使用纯CSS3开发,虽然使用了bootstarp默认的标记风格,但它可以覆盖与其冲突的任何CSS标记。


插件特点

把任何HTML输入转换为星级控制。

如果设置了calss=rating,插件可自动把输入控制转换为星级控制,所有的输入选项将以html5的data属性记录。

使用html5的数字输入,插件会自动使用数字属性,如min,max,step等。注:动态数值输入在谷歌浏览器上有问题。

纯CSS3生成图形,加载速度快,与图片说再见。

渲染显示,可配置星星的数量,最小,最大,步阶,理论上支持任何分数评级。

使用Bootstrap 3.x的默认风格和默认图标,但可以通过修改插件参数和自定义CSS样来重写。

支持右到左(RTL)输入,插件自动根据RTL变化星星风格。

可以明了的看出星星的评分值,相当容易的使用控件评分。

表单重置时插件随着重置所有数值。

明了的展示和轻松改变星星的选中状态。

方便的定义星星有大小,预置了5种大小样式xl, lg, md, sm, xs。

支持不可以写和只读设置。

支持jquery 事件触发器,预定方法有:rating.change, rating.clear,rating.reset。

整个插件小于11 kb(约8 kb的缩小JS和3 kb缩小CSS)。

基本要求

a、Bootstrap 3.x

b、最新版jQuery

c、支持CSS3和html5的现代浏览器

使用方法

1、加载下列核心文件在你的网页头部,head区内。

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet">
<link href="path/to/css/star-rating.min.css" media="all" rel="stylesheet" type="text/css" />
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script src="path/to/js/star-rating.min.js" type="text/javascript"></script>

如果你注意到,你需要加载jquery.min.js和bootstrap.min.css来支持star-rating.min.css和star-rating.min.js插件使用默认设置。

2、写上html,即是输入控件,绑定属性后将自动转换成星星

<input id="input-id" type="number" class="rating" min=0 max=5 step=0.5 data-size="lg" >

3、初始化插件

$("#input-id").rating(); //默认值初始化

$("#input-id").rating({'size':'lg'});  //带参数初始化

#input-id是标识符的输入(例如: type=number)在你的页面,自动隐藏的插件。

或者,你可以直接调用插件选项通过数据属性设置为你的输入字段。

更多的参数请参考官方文档

转载请注明:jQ酷 » 响应式jquery星星评分插件Bootstrap Star Rating

下载地址:本站下载 | 百度云 | 官方下载
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。