New York Dog Fair
A fun day at the fair
Types
Rating
A basic rating
Star
A rating can use a set of star icons
Average rating:
Heart
A rating can use a set of heart icons
Variations
Size
A rating can vary in size
Setting existing values
Starting ratings can be set either using metadata values or the setting initialRating.
Dog Appreciation Day
I night to tell your dog he's great
Read-Only Ratings
You can disable or enable interactive rating
$('.toggle.example .rating')
.rating('disable')
;
$('.toggle.example .rating')
.rating('enable')
;
Clearing Ratings
When clearable is set to true you can clear the rating by clicking on the current start rating.
$('.clearing.example .rating')
.rating('setting', 'clearable', true)
;
Initializing
To change the range of your rating, simply adjust the number of icons in the initialized html
$('.ui.rating')
.rating()
;
Behavior
All the following behaviors can be called using the syntax:
$('.ui.rating')
.rating('behavior name', argumentOne, argumentTwo)
;
| Behavior | Description |
|---|---|
| set rating(rating) | Sets rating programmatically |
| get rating | Gets current rating |
| disable | Disables interactive rating mode |
| enable | Enables interactive rating mode |
| clear rating | Clears current rating |
Rating Settings
Rating settings modify the rating's behavior
| Setting | Default | Description |
|---|---|---|
| initialRating | 0 | A number representing the default rating to apply |
| clearable | false | If enabled clicking on the current star rating will clear the rating |
| interactive | true | Whether to enable user's ability to rate |
Callbacks
Callbacks specify a function to occur after a specific behavior.
| Setting | Context | Description |
|---|---|---|
| onRate(value) | Rating | Is called after user selects a new rating |
DOM Settings
DOM settings specify how this module should interface with the DOM
| Setting | Default | Description |
|---|---|---|
| namespace | rating | Event namespace. Makes sure module teardown does not effect other events attached to an element. |
| selector |
selector : {
icon : '.icon'
}
|
|
| className |
className : {
active : 'active',
hover : 'hover',
loading : 'loading'
},
|
|
Debug Settings
Debug settings controls debug output to the console
| Setting | Default | Description |
|---|---|---|
| name | Rating | Name used in debug logs |
| debug | True | Provides standard debug output to console |
| performance | True | Provides standard debug output to console |
| verbose | True | Provides ancillary debug output to console |
| error |
error : {
action : 'You called a rating action that was not defined'
}
|
|