你知道怎么用最少的代码就能写出像卓越里的评分功能嘛,仅需非常少的代码就能实现评分功能。能够如此简单的实现这个功能,最主要是得益于jquery raty这个插件。下面介绍一下:
jquery raty(星级评分插件),使用它仅需要简单的两行就能实现评分功能。星级评分插件在jquery还不是很有名的时候已经就有了,但是代码多css多不易维护,后来用jquery改写了。(翻译自jquery raty官网)
这个基于jquery的插件是非常容易使用的,仅仅两行代码就能实现评分功能,看看到底是如何实现的呢?
- 首先将jquery和raty引入进来
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.raty.js"></script>
- 默认的配置值
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.
- 如何使用
$('#star').raty(); <div id="star"></div>
这样就ok咯,是不是很简单。复杂一点的去官网看例子吧。这个评分插件对ie6是支持的。在我使用的时候不知道是不是relative用多了,在ie6下怎么也点击不到,还是花了点时间还是没调好,希望你们使用的时候不要遇见这个问题。遇见这个问题也能解决。 查看更详细请到jquery raty官网