灵活星级评价插件
2015-11-12 15:17
489 查看
http://www.jq22.com/yanshi291
A Star Rating Plugin
You need just to have a
Used when we want starts with saved rating.
If you need to start you score depending of a dynamic value, you can to use callback for it.
You can pass any value for it, not necessarily a
for example.
Changes the number of stars.
Change the maximum of start that can be created.
Changes the name of the hidden score field.
It can be submited on a
You can receive the number of stars dynamic using callback to set it.
You can prevent users to vote. It can be applied with or without score and all stars will receives the hint corresponding
of the selected star.
Stop the mouse over the stars to see:
You can decide if the rating will be readOnly dynamically returning
the callback.
If readOnly is enabled and there is no score,
the hint "Not rated yet!" will be shown for all stars. But you can change it.
Stop the mouse over the star to see:
You can represent a float score as a half star icon.
This options is just to show the half star. If you want enable the vote with half star on mouseover, please check the option half.
The round options showed belows is just for the icon, the score keeps as float always.
Down: score <= x.25 the star will be rounded down;
Half: score >= x.26 and <= x.75 the star will be a half star;
Up: score >= x.76 the star will be rounded up.
Down: score < x.6 the star will be rounded down;
Up: score >= x.6 the star will be rounded up;
You can customize the round values of the halfShow option.
We changed the default interval [x.25 .. x.76], now x.26 will round down instead of to be a half star.
Remember that the
disabled.
You can specify just the attribute you want to change and keeps the others as default.
Enables the half star mouseover to be possible vote with half values.
If you want to vote with more precison than half value, please check the option precision.
Changes the name of the half star.
Callback to handle the score and the click
click action.
You can mension the Raty element (DOM) itself using
Changes the hint for each star by it position on array.
If you pass
of this star will be the hint.
If you pass
Changes the path where your icons are located.
Set it only if you want the same path for all icons.
Don't mind about the last slash of the path, if you don't put it, we will set it for you.
Now we have the following full paths:
so.
Changes the name of the star on and star off.
Add a cancel button on the left side of the stars to cacel the score.
Inside the click callback the argument
the value
Like the stars, the cancel button have a hint too, and you can change it.
Stop the mouse over the cancel button to see:
Changes the cancel button to the right side.
Changes the off and on icon of the cancel button.
It's an array of objects where each one represents a custom icon.
The
The
The
You can use an interval of the same icon jumping some number.
The
If the value
omitted then the attribute
be used.
Now we have all off icons as
icon 3 as
The size in pixel of the icon you will to use.
It changes the size for all icons.
By default Raty calculates the width calculating the size of the stars plus the spaces.
But for some reason the calculated width not fits on your layout, you can change it manually.
If you want to avoid that Raty applies the style width on you wrapper, set it to
Some place to display the hints or the cancelHint.
Your target can be a
Your target can be a
Your target can be a
Your target can be a
-- bad
poor regular
good gorgeous
You have the option
chosse.
You can choose to see the score instead the hints using
the value
For the cancel button the value is empty.
If you want to keep the score into the hint box after you do the rating, turn on this option.
Normally all target is keeped blank if you don't use the targetKeep option.
If you want a default content you can use this option.
--
You can choose a template to be merged with your hints and displayed on target.
You can handle the action on mouseover.
The arguments is the same of the click callback.
The options target, targetFormat, targetKeep, targetText and targetType are
abstractions of this callback. You can do it by yourself.
You can handle the action on mouseout.
The arguments is the same of the mouseover callback.
You can get the right position of the cursor to get a precision score.
The star is represented just as half and full star, but the score is saved with precision.
When you enable this option the half options is automatically enabled and targetType is
changed to
You can take off the space between the star.
You can turn on just the mouseovered star instead all from the first until the mouseovered one.
You can change any option mentioning the scope
It must be called before you bind the plugin.
cancel: false
Creates a cancel button to cancel the rating.
cancelHint: 'Cancel this rating!'
The cancel's button hint.
cancelOff: 'cancel-off.png'
Icon used on active cancel.
cancelOn: 'cancel-on.png'
Icon used inactive cancel.
cancelPlace: 'left'
Cancel's button position.
click: undefined
Callback executed on rating click.
half: false
Enables half star selection.
halfShow: true
Enables half star display.
hints: ['bad', 'poor', 'regular', 'good', 'gorgeous']
Hints used on each star.
iconRange: undefined
Object list with position and icon on and off to do a mixed icons.
mouseout: undefined
Callback executed on mouseout.
mouseover: undefined
Callback executed on mouseover.
noRatedMsg: 'Not rated yet!'
Hint for no rated elements when it's readOnly.
number: 5
Number of stars that will be presented.
numberMax: 20
Max of star the option number can
creates.
path: ''
A global locate where the icon will be looked.
precision: false
Enables the selection of a precision score.
readOnly: false
Turns the rating read-only.
round: { down: .25, full: .6, up: .76 }
Included values attributes to do the score round
math.
score: undefined
Initial rating.
scoreName: 'score'
Name of the hidden field that holds the score value.
single: false
Enables just a single star selection.
size: 16
The size of the icons that will be used.
space: true
Puts space between the icons.
starHalf: 'star-half.png'
The name of the half star image.
starOff: 'star-off.png'
Name of the star image off.
starOn: 'star-on.png'
Name of the star image on.
target: undefined
Element selector where the score will
be displayed.
targetFormat: '{score}'
Template to interpolate the score in.
targetKeep: false
If the last rating value will be keeped after mouseout.
targetText: ''
Default text setted on target.
targetType: 'hint'
Option to choose if target will
receive hint o 'score' type.
width: undefined
Manually adjust the width for the project.
Get the current score. If there is no score then
be returned.
Set a score.
Click on some star. It always call the click callback if it exists.
Change the read-only state.
Cancel the rating. The boolean parameter tells if the click will be called or not. If you ommit it,
will be.
Reload the rating with the same configuration it was binded.
Reset the rating with new configurations. Only options especified will be overrided.
Destroy the bind and gives you the raw element before the bind.
1.5
score: run
click: run
readOnly: run
cancel: trigger: run
reload: run
score: run
score: run
set: run
destroy: run
jQuery Raty
A Star Rating Plugin
Default
You need just to have a divto build the Raty.
<div id="star"></div>
$('#star').raty();
Score
Used when we want starts with saved rating.$('#star').raty({ score: 3 });
Score callback
If you need to start you score depending of a dynamic value, you can to use callback for it.You can pass any value for it, not necessarily a
data-value. You can use a field value
for example.
<div id="star" data-score="1"></div>
$('#star').raty({ score: function() { return $(this).attr('data-score'); } });
Number
Changes the number of stars.$('#star').raty({ number: 10 });
Number Max
Change the maximum of start that can be created.$('#numberMax-demo').raty({ numberMax: 5, number : 500 });
Score Name
Changes the name of the hidden score field.It can be submited on a
formor captured via JavaScript to be sended via ajax.
$('#star').raty({ scoreName: 'entity[score]' });
Number callback
You can receive the number of stars dynamic using callback to set it.<div id="star" data-number="3"></div>
$('#star').raty({ number: function() { return $(this).attr('data-number'); } });
Read Only
You can prevent users to vote. It can be applied with or without score and all stars will receives the hint correspondingof the selected star.
Stop the mouse over the stars to see:
$('#star').raty({ readOnly: true, score: 3 });
Read Only callback
You can decide if the rating will be readOnly dynamically returning trueof
falseon
the callback.
$('#star').raty({ readOnly: function() { return 'true becomes readOnly' == 'true becomes readOnly'; } });
No Rated Message
If readOnly is enabled and there is no score,the hint "Not rated yet!" will be shown for all stars. But you can change it.
Stop the mouse over the star to see:
$('#star').raty({ readOnly : true, noRatedMsg: "I'am readOnly and I haven't rated yet!" });
Half Show
You can represent a float score as a half star icon.This options is just to show the half star. If you want enable the vote with half star on mouseover, please check the option half.
The round options showed belows is just for the icon, the score keeps as float always.
Enabled
The round rules are:Down: score <= x.25 the star will be rounded down;
Half: score >= x.26 and <= x.75 the star will be a half star;
Up: score >= x.76 the star will be rounded up.
$('#star').raty({ score: 3.26 });
Disabled
The rules becomes:Down: score < x.6 the star will be rounded down;
Up: score >= x.6 the star will be rounded up;
$('#halfShow-demo').raty({ halfShow: false, score : 3.26 });
Round
You can customize the round values of the halfShow option.We changed the default interval [x.25 .. x.76], now x.26 will round down instead of to be a half star.
Remember that the
fullattribute is used only when halfShow is
disabled.
You can specify just the attribute you want to change and keeps the others as default.
$('#star').raty({ round: { down: .26, full: .6, up: .76 }, score: 3.26 });
Half
Enables the half star mouseover to be possible vote with half values.If you want to vote with more precison than half value, please check the option precision.
$('#star').raty({ half: true });
Star Half
Changes the name of the half star.$('#star').raty({ half : true, starHalf: 'half.png' });
Click
Callback to handle the score and the click eventon
click action.
You can mension the Raty element (DOM) itself using
this.
$('#star').raty({ click: function(score, evt) { alert('ID: ' + $(this).attr('id') + "\nscore: " + score + "\nevent: " + evt); } });
Hints
Changes the hint for each star by it position on array.If you pass
null, the score value
of this star will be the hint.
If you pass
undefined, this position will be ignored and receive the default hint.
$('#star').raty({ hints: ['a', null, '', undefined, '*_*']});
Path
Changes the path where your icons are located.Set it only if you want the same path for all icons.
Don't mind about the last slash of the path, if you don't put it, we will set it for you.
$('#star').raty({ path: 'assets/images' });
Now we have the following full paths:
assets/images/star-on.png,
assets/images/star-off.pngand
so.
Star Off and Star On
Changes the name of the star on and star off.$('#star').raty({ starOff: 'img/off.png', starOn : 'http://icons.com/on.png' });
Cancel
Add a cancel button on the left side of the stars to cacel the score.Inside the click callback the argument
codereceives
the value
nullwhen we click on cancel button.
$('#star').raty({ cancel: true });
Cancel Hint
Like the stars, the cancel button have a hint too, and you can change it.Stop the mouse over the cancel button to see:
$('#star').raty({ cancel : true, cancelHint: 'My cancel hint!' });
Cancel Place
Changes the cancel button to the right side.$('#star').raty({ cancel : true, cancelPlace: 'right' });
Cancel off and Cancel On
Changes the off and on icon of the cancel button.$('#star').raty({ cancel : true, cancelOff: 'off.png', cancelOn : 'on.png' });
Icon Range
It's an array of objects where each one represents a custom icon.The
rangeattribute is until wich position the icon will be displayed.
The
onattribute is the active icon.
The
offattribute is the inactive icon.
$('#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' } ] });
You can use an interval of the same icon jumping some number.
The
rangeattribute must be in an ascending order.
If the value
onor
offis
omitted then the attribute
starOnand
starOffwill
be used.
$('#iconRange-demo').raty({ starOff : '0.png', iconRange: [ { range: 1, on: '1.png' }, { range: 3, on: '3.png' }, { range: 5, on: '5.png' } ] });
Now we have all off icons as
0.png, icons 1 and 2 as
1.png,
icon 3 as
3.pngand icons 4 and 5 as
5.png.
Size
The size in pixel of the icon you will to use.It changes the size for all icons.
$('#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' });
Width
By default Raty calculates the width calculating the size of the stars plus the spaces.But for some reason the calculated width not fits on your layout, you can change it manually.
If you want to avoid that Raty applies the style width on you wrapper, set it to
false.
$('#star').raty({ width: 150 });
Target
Some place to display the hints or the cancelHint.$('#star').raty({ cancel: true, target: '#hint' });
Your target can be a
div.
<div id="hint"></div>
Your target can be a
textfield.
<input id="hint" type="text" />
Your target can be a
textarea.
<textarea id="hint"></textarea>
Your target can be a
select.
-- bad
poor regular
good gorgeous
<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>
Target Type
You have the option hintor
scoreto
chosse.
You can choose to see the score instead the hints using
the value
score.
For the cancel button the value is empty.
<div id="hint"></div>
$('#targetType-demo').raty({ cancel : true, target : '#hint', targetType: 'number' });
Target Keep
If you want to keep the score into the hint box after you do the rating, turn on this option.<div id="hint"></div>
$('#star').raty({ cancel : true, target : '#hint', targetKeep: true });
Target Text
Normally all target is keeped blank if you don't use the targetKeep option.If you want a default content you can use this option.
--
$('#star').raty({ target : '#hint', targetText: '--' });
Target Format
You can choose a template to be merged with your hints and displayed on target.$('#star').raty({ target : '#hint', targetFormat: 'Rating: {score}' });
Mouseover
You can handle the action on mouseover.The arguments is the same of the click callback.
The options target, targetFormat, targetKeep, targetText and targetType are
abstractions of this callback. You can do it by yourself.
$('#star').raty({ mouseover: function(score, evt) { alert('ID: ' + $(this).attr('id') + "\nscore: " + score + "\nevent: " + evt); } });
Mouseout
You can handle the action on mouseout.The arguments is the same of the mouseover callback.
$('#star').raty({ mouseout: function(score, evt) { alert('ID: ' + $(this).attr('id') + "\nscore: " + score + "\nevent: " + evt); } });
Precision
You can get the right position of the cursor to get a precision score.The star is represented just as half and full star, but the score is saved with precision.
When you enable this option the half options is automatically enabled and targetType is
changed to
score.
$('#star').raty({ precision: true });
Space
You can take off the space between the star.$('#star').raty({ space: false });
Single
You can turn on just the mouseovered star instead all from the first until the mouseovered one.$('#star').raty({ single: true });
Changing the settings globally
You can change any option mentioning the scope $.fn.raty.defaults.+ option_name.
It must be called before you bind the plugin.
$.fn.raty.defaults.path = assets; $.fn.raty.defaults.cancel = true;
Options
cancel: falseCreates a cancel button to cancel the rating.
cancelHint: 'Cancel this rating!'
The cancel's button hint.
cancelOff: 'cancel-off.png'
Icon used on active cancel.
cancelOn: 'cancel-on.png'
Icon used inactive cancel.
cancelPlace: 'left'
Cancel's button position.
click: undefined
Callback executed on rating click.
half: false
Enables half star selection.
halfShow: true
Enables half star display.
hints: ['bad', 'poor', 'regular', 'good', 'gorgeous']
Hints used on each star.
iconRange: undefined
Object list with position and icon on and off to do a mixed icons.
mouseout: undefined
Callback executed on mouseout.
mouseover: undefined
Callback executed on mouseover.
noRatedMsg: 'Not rated yet!'
Hint for no rated elements when it's readOnly.
number: 5
Number of stars that will be presented.
numberMax: 20
Max of star the option number can
creates.
path: ''
A global locate where the icon will be looked.
precision: false
Enables the selection of a precision score.
readOnly: false
Turns the rating read-only.
round: { down: .25, full: .6, up: .76 }
Included values attributes to do the score round
math.
score: undefined
Initial rating.
scoreName: 'score'
Name of the hidden field that holds the score value.
single: false
Enables just a single star selection.
size: 16
The size of the icons that will be used.
space: true
Puts space between the icons.
starHalf: 'star-half.png'
The name of the half star image.
starOff: 'star-off.png'
Name of the star image off.
starOn: 'star-on.png'
Name of the star image on.
target: undefined
Element selector where the score will
be displayed.
targetFormat: '{score}'
Template to interpolate the score in.
targetKeep: false
If the last rating value will be keeped after mouseout.
targetText: ''
Default text setted on target.
targetType: 'hint'
Option to choose if target will
receive hint o 'score' type.
width: undefined
Manually adjust the width for the project.
Functions
$('#star').raty('score');
Get the current score. If there is no score then
undefinedwill
be returned.
$('#star').raty('score', number);
Set a score.
$('#star').raty('click', number);
Click on some star. It always call the click callback if it exists.
$('.star').raty('readOnly', boolean);
Change the read-only state.
$('#star').raty('cancel', boolean);
Cancel the rating. The boolean parameter tells if the click will be called or not. If you ommit it,
falseit
will be.
$('#star').raty('reload');
Reload the rating with the same configuration it was binded.
$('#star').raty('set', { option: value });
Reset the rating with new configurations. Only options especified will be overrided.
$('#star').raty('destroy');
Destroy the bind and gives you the raw element before the bind.
1.5
score: run
click: run
readOnly: run
cancel: trigger: run
reload: run
score: run
score: run
set: run
destroy: run
相关文章推荐
- Jenkins配置-Invoke ant
- OData V4 系列 服务创建
- 评论
- PullToRefreshView的样式以及一些问题
- Making the Grade---poj3666(类似离散化+dp)
- jboss 5.1启动报错
- 转 hadoop 参数配置
- 一个计算机毕业生的经历
- 1112语法树评论
- poj 1330 Nearest Common Ancestors(LCA)
- Inheritance in JavaScript 继承
- git 配置多个SSH-Key
- 写android相机应用开发PictureCallback无法执行
- iOS: JS和Native交互的两种方法,iosjsnative交互
- 【挖坑】CERC2012
- MYSQL5.6/5.0管理之主从同步管理 及搭建主从库
- jsoup 语法整理
- 关于主机FTP连接不上,无法列出目录,列表错误,上传速度慢,掉速的解决办法
- Fresco Fbcore源码分析_executor(一)
- mysql中的auto_increment的问题(MyISAM,InnoDB)