当前位置: 首页 > 工具软件 > Star Rating > 使用案例 >

bootstrap五星评分_基于Bootstrap的jQuery星级评分插件bootstrap-star-rating

邹正阳
2023-12-01

一个简单但强大的jQuery的星级评分的Bootstrap插件,bootstrap-star-rating支持高级的功能,像小数星星填充和支持RTL输入。主要是通过利用纯CSS-3的风格来呈现控件进行开发。该插件使用Bootstrap标记和默认风格,但它可以用其它任意CSS标记覆盖。

基本要求

a、Bootstrap 3.x

b、最新版jQuery

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

使用方法

1,引入相关文件

2,HTML标签,即是输入控件,绑定属性后将自动转换成星星

3,JavaScript

// 默认

$("#input-id").rating();

// 带参数

$("#input-id").rating({'size':'lg'});

参数

size:定义星星有大小,预置了5种大小样式 xl, lg, md, sm, xs; 默认样式md

step:步长增加的星星大小,默认为 0.5(一半星星)

disabled:不可用设置

readonly:只读设置

showClear:是否显示清除星星按钮;默认为True

showCaption:

defaultCaption:

starCaptions:

starCaptionClasses:

事件

rating.change: $('#input-id').on('rating.change', function(event, value, caption) {

console.log(value);

console.log(caption);

});

rating.clear: $('#input-id').on('rating.clear', function(event) {

console.log("rating.clear");

});

rating.reset: $('#input-id').on('rating.reset', function(event) {

console.log("rating.reset");

});

rating.hover: $('#input-id').on('rating.hover', function(event, value, caption, target) {

console.log(value);

console.log(caption);

console.log(target);

});

rating.hoverleave: $('#input-id').on('rating.hoverleave', function(event, target) {

console.log(target);

});

rating.refresh: $('#input-id').on('rating.refresh', function(event) {

console.log("rating.refresh");

});

1. 本站所有资源来源于网络和用户上传!如有侵权请邮件联系客服!sys(at)hoohtml.com

2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!

3. 本由本站提供的程序对您的网站或计算机造成严重后果的本站概不负责。

 类似资料: