Skip to content

jQuery Raty介绍,最好用的jquery评分插件

你知道怎么用最少的代码就能写出像卓越里的评分功能嘛,仅需非常少的代码就能实现评分功能。能够如此简单的实现这个功能,最主要是得益于jquery raty这个插件。下面介绍一下:

jquery raty(星级评分插件),使用它仅需要简单的两行就能实现评分功能。星级评分插件在jquery还不是很有名的时候已经就有了,但是代码多css多不易维护,后来用jquery改写了。(翻译自jquery raty官网

这个基于jquery的插件是非常容易使用的,仅仅两行代码就能实现评分功能,看看到底是如何实现的呢?

  1. 首先将jquery和raty引入进来
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.raty.js"></script>
  1. 默认的配置值
cancel:       false              //是否可以进行取消操作
cancelHint:   '取消评分!'         // 取消的提示信息
cancelOff:    'cancel-off.png'   // Name of the cancel image off.
cancelOn:     'cancel-on.png'    // Name of the cancel image on.
cancelPlace:  'left'             // Position of the cancel button.
click:        null               // Default callback function.
half:         false              // Active the half star.
hintList:     ['1', '2', '3', '4', '5']  // A hint information for default 5 stars.
iconRange:    []         // A range of custom icons that you can set.
noRatedMsg:   'not rated yet'    // A hint for no rated elements when it's read-only.
number:       5         // Number of star.
path:         'img      // Path of images.
readOnly:     false     // read-only or not.
scoreName:    'score'   // The name of target score.
size:         16        // The icons size.
starHalf:     'star-half.png'  // The image of the half star.
starOff:      'star-off.png'   // Name of the star image on.
starOn:       'star-on.png'    // Name of the star image on.
start:        0                // Start with a score value.
target:       null             // Number of stars to be selected.
targetKeep:   false            // If the last choose value will be keeped on mouseout.
targetType:   'hint'           // What display on target element: hint or number.
width:        null             // The container width of the stars.
  1. 如何使用
$('#star').raty();
<div id="star"></div>

这样就ok咯,是不是很简单。复杂一点的去官网看例子吧。这个评分插件对ie6是支持的。在我使用的时候不知道是不是relative用多了,在ie6下怎么也点击不到,还是花了点时间还是没调好,希望你们使用的时候不要遇见这个问题。遇见这个问题也能解决。 查看更详细请到jquery raty官网