默认

你只需要有一个 div构建Raty。

<div id="star"></div>
                            
$('#star').raty();

初始化星星分数 

$('#star').raty({ score: 3 });

分数回调

对应分数不同的动态值,您可以使用回调.

<div id="star" data-score="1"></div>
                            
$('#star').raty({
  score: function() {
    return $(this).attr('data-score');
  }
});

数量

改变星星的数量为10个。

$('#star').raty({ number: 10 });

设置星星最多数量 

$('#numberMax-demo').raty({
  numberMax: 5,
  number   : 500
});

可更改分数名称字段 

$('#star').raty({ scoreName: 'entity[score]' });

数量的回调

你可以使用回调函数来设置星星数量。

<div id="star" data-number="3"></div>
                            
$('#star').raty({
  number: function() {
    return $(this).attr('data-number');
  }
});

只读

在用户已投完票不可再点击 

$('#star').raty({ readOnly: true, score: 3 });

只读回调

根据评级只读返回true或false进行回调 

$('#star').raty({
  readOnly: function() {
    return 'true becomes readOnly' == 'true becomes readOnly';
  }
});

没有评级的消息提示 

$('#star').raty({
  readOnly  : true,
  noRatedMsg: "I'am readOnly and I haven't rated yet!"
});

设置带有半颗星星

启用

这个选项只是显示半颗星

规则如下:

  • 分数< = x.25,星星将被四舍五入
  • 一半: 分数 >= x.26 and <= x.75，星星将变成半颗;
  • 满星: 分数 >= x.76 星星将变成满颗星.
$('#star').raty({ score: 3.26 });

禁用

规则如下:

  • 分数 < x.6，星星将被四舍五入
  • 满星: score >= x.6，星星将变成满颗星;
$('#halfShow-demo').raty({
  halfShow: false,
  score   : 3.26
});

满颗星

您可以自定义halfShow
我们改变了默认的区间[x。25 . .x。76年),现在x。26日将一轮下来,而不是半星。
提示：full属性只有当halfShow是禁用的 

$('#star').raty({
  round: { down: .26, full: .6, up: .76 },
  score: 3.26
});

半颗星

点击的星星值在input[name='score']隐藏框里面。 

$('#star').raty({ half: true });

改变星星的图片名称 

$('#starHalf-demo').raty({
    path: 'demo/img',
    half: true,
    starOff: 'cookie-off.png',
    starOn: 'cookie-on.png',
    starHalf: 'cookie-half.png'
});

点击事件

回调处理分数和点击 event 

$('#star').raty({
  click: function(score, evt) {
    alert('ID: ' + $(this).attr('id') + "\nscore: " + score + "\nevent: " + evt);
  }
});

路径

更改图标所在的路径。 

$('#star').raty({ path: 'assets/images' });

Star Off 和 Star On

改变 star on 和 star off的名称

$('#star').raty({
  starOff: 'img/off.png',
  starOn : 'http://icons.com/on.png'
});

取消

添加一个取消按钮. 

$('#star').raty({ cancel: true });

取消提示 

$('#star').raty({
  cancel    : true,
  cancelHint: 'My cancel hint!'
});

设置取消按钮的位置

把 取消按钮 放在右边

$('#star').raty({
  cancel     : true,
  cancelPlace: 'right'
});

设置每个星星的图标 

$('#star').raty({
  iconRange: [
    { range: 1, on: '1.png', off: '0.png' },
    { range: 2, on: '2.png', off: '0.png' },
    { range: 3, on: '3.png', off: '0.png' },
    { range: 4, on: '4.png', off: '0.png' },
    { range: 5, on: '5.png', off: '0.png' }
  ]
});

设置星星的尺寸 

$('#star').raty({
  cancel   : true,
  cancelOff: 'cancel-off-big.png',
  cancelOn : 'cancel-on-big.png',
  half     : true,
  size     : 24,
  starHalf : 'star-half-big.png',
  starOff  : 'star-off-big.png',
  starOn   : 'star-on-big.png'
});

设置星星区域的宽度 

$('#star').raty({ width: 150 });

目标地址target 

$('#star').raty({
  cancel: true,
  target: '#hint'
});

你的目标可以是一个 div.

<div id="hint"></div>

你的目标可以是一个 text字段。

<input id="hint" type="text" />

你的目标可以是一个 textarea.

<textarea id="hint"></textarea>

你的目标可以是一个 select

<select id="hint">
  <option value="">--</option>
  <option value="bad">bad</option>
  <option value="poor">poor</option>
  <option value="regular">regular</option>
  <option value="good">good</option>
  <option value="gorgeous">gorgeous</option>
</select>

目标类型 

<div id="hint"></div>
                            
$('#targetType-demo').raty({
  cancel    : true,
  target    : '#hint',
  targetType: 'number'
});

目标保持 

<div id="hint"></div>
                            
$('#star').raty({
  cancel    : true,
  target    : '#hint',
  targetKeep: true
});

目标 Text 

$('#star').raty({
  target    : '#hint',
  targetText: '--'
});

目标格式 

$('#star').raty({
  target      : '#hint',
  targetFormat: 'Rating: {score}'
});

鼠标悬浮 

$('#star').raty({
  mouseover: function(score, evt) {
    alert('ID: ' + $(this).attr('id') + "\nscore: " + score + "\nevent: " + evt);
  }
});

鼠标离开 

$('#star').raty({
  mouseout: function(score, evt) {
    alert('ID: ' + $(this).attr('id') + "\nscore: " + score + "\nevent: " + evt);
  }
});

精确到小数 

$('#star').raty({ precision: true });

设置星星之间的距离 

$('#star').raty({ space: false });