基于jQuery和Bootstrap 3的简单星级评分系统

Bootstrap星级评分系统

一款基于jQuery和Bootstrap 3的简单星级评分系统插件,支持触屏模式。

使用步骤

1.在页面中引入Bootstrap 3 的CSS文件

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

2.在jQuery库后面引入Bootstrap星级评分系统插件的JavaScript和CSS文件

<link href="css/star-rating.css" media="all" rel="stylesheet" type="text/css" />
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></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.jQuery脚本

// 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');
打赏
下载 在线预览 积分 (-2) 吐槽 (4)
×
加载中,请稍候…

您需要 登录 后才能发表评论。

avatar

- 评论

  • 加载中,请稍候…
我要吐槽