当前位置：首页 > 网页特效 > 星级评分

Ratyli-简单的jQuery星级评分插件

分类：星级评分日期：2024-05-14 点击(1) 评论(0)

简介

##### 使用方法
使用该星级评分插件需要引入jQuery(1.7+)和jquery.ratyli.min文件。
```html
<script src="jquery.min.js"> </script>
<script src="jquery.ratyli.min.js"></script> 
```               
#####  HTML结构
你可以使用一个内联元素如span来作为该星级评分的容器。

```html
<span class="ratyli" data-rate="3" data-ratemax="5"></span>   
```          
其中data-rate属性是已点击的星星，data-ratemax是星星的总数。另外你可以通过data-full属性来自定义已经点击的星星的外观，通过data-empty来自定义未点击的星星的外观。

#####  初始化插件
在页面DOM元素加载完毕之后，可以通过ratyli()方法来初始化该星级评分插件。

```html
$(function() {
    $('.ratyli').ratyli();
});   
```          
#####  CSS样式
该星级评分插件不需要额外的CSS样式，但是你可以通过下面的CSS选择器来自定义星级评分的样式。

```js
.ratyli{} /* container style*/
.ratyli.rated{} /* container style after rating*/
.ratyli .rate{} /* sign style*/
.ratyli .rate-active{} /* sign hover style */
.ratyli .rate-full{} /* full sign style */
.ratyli .rate-empty{} /* empty sign style */
/*etc..*/    
```           
 于Font Awesome结合使用
你可以使用Font Awesome字体图标来作为星级评分的星星。
```html

$(".ratyli").ratyli({
  full:"<i class='fa fa-thumbs-up'></i>",
  empty:"<i class='fa fa-thumbs-o-up'></i>",
});
```
Ratyli星级评分插件的github地址为：https://github.com/peet86/Ratyli

web299.com

Ratyli-简单的jQuery星级评分插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果