帝国模板之家为广大用户提供专业、一站式建站服务。

网页特效

网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。

当前位置:首页 > 资源 > 网页特效 > 正文

简单好用的bootstrap星级评分插件

帝国模板之家 2020-12-10 网页特效 评论

插件介绍

bootstrap星级评分插件,它使用bootstrap3/4样式和glyph将输入的数字转换为星级评分组件。

使用方法

1. 在页面中加载bootstrap框架

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha512-Dop/vW3iOtayerlYAqCgkVr2aTr2ErwwTYOvRFUpzl2VhCMJyjQF0Q9TjUXIo6JhuM/3i0vVEt2e/7QQmnHQqw==" crossorigin="anonymous" />

2.在页面中加载最新的jQuery库和星级评分插件文件。

<link href="css/star-rating.css" media="all" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
<script src="js/star-rating.js" type="text/javascript"></script>

3. 使用输入的属性来定制星级评分组件。

<input id="rating-system" type="number" class="rating" min="1" max="5" step="1">

4. 可用选项。

// assign a CSS class with the rating-<theme-name> to the rating container
// The default (blank) theme (for displaying bootstrap glyphicons)
// krajee-svg (for displaying svg icons)
// krajee-uni (for displaying unicode symbols as stars)
// krajee-fa (for displaying font awesome icons)
theme: '',

// enable the plugin to display messages for your locale (you must set the ISO code for the language).
language: 'en',

// number of stars to display
stars: 5,

// the symbol markup to display for a filled / highlighted star
filledStar: '<i class="glyphicon glyphicon-star"></i>',

// the symbol markup to display for an empty star
emptyStar: '<i class="glyphicon glyphicon-star-empty"></i>',

// the CSS class to be appended to the star rating container.
containerClass: '',

// whether the input is read only
displayOnly: false,

// whether the rating input is to be oriented RIGHT TO LEFT. 
rtl: false,

// size of the rating control
// xl, lg, md, sm, and xs
size: 'md',

// whether the clear button is to be displayed
showClear: true,

// whether the rating caption is to be displayed
showCaption: true,

// the caption titles corresponding to each of the star rating selected
starCaptionClasses: {
  0.5: 'label label-danger',
  1: 'label label-danger',
  1.5: 'label label-warning',
  2: 'label label-warning',
  2.5: 'label label-info',
  3: 'label label-info',
  3.5: 'label label-primary',
  4: 'label label-primary',
  4.5: 'label label-success',
  5: 'label label-success'
},

// the markup for displaying the clear button
clearButton: '<i class="glyphicon glyphicon-minus-sign"></i>',

// the base CSS class for the clear button
clearButtonBaseClass: 'clear-rating',

// the CSS class for the clear button that will be appended to the base class above when button is hovered/activated. 
clearButtonActiveClass: 'clear-rating-active',

// the caption displayed when clear button is clicked
clearCaption: 'Not Rated',

// the CSS Class to apply to the caption displayed, when clear button is clicked
clearCaptionClass: 'label label-default',

// the value to clear the input to, when the clear button is clicked
clearValue: 0,

// the identifier for the container element selector for displaying the caption. 
captionElement: null,

// the identifier for the container element selector for displaying the clear button.
clearElement: null,

// whether hover functionality is enabled.
hoverEnabled: true,

// control whether the caption should dynamically change on mouse hover
hoverChangeCaption: true,

// control whether the stars should dynamically change on mouse hover
hoverChangeStars: true,

// whether to dynamically clear the rating on hovering the clear button
hoverOnClear: true

5. 方法。

// Update the rating by setting a value via javascript. 
// The method accepts a rating value as a parameter.
$('#input-id').rating('update', 3);

// Example: Call the method below in rating.change event to disable the rating and
// hide the clear button.
$('#input-id').rating('refresh', {disabled: true, showClear: false, showCaption: true});

// Reset the rating.
$('#input-id').rating('reset');

// Clear the rating.
$('#input-id').rating('clear');

// Destroy the rating.
$('#input-id').rating('destroy');

// Re-creates the rating (after a destroy).
$('#input-id').rating('create');
这世上无忧无虑的人,反而相对寿命会长点。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

网页插件

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言