forked from ripter/jquery.rating
/
default.html
163 lines (143 loc) · 5.97 KB
/
default.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
<html>
<head>
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="jquery.rating.js"></script>
<link rel="stylesheet" media="screen" type="text/css" href="jquery.rating.css" />
<script type="text/javascript">
$(document).ready(function(){
//Turn all the select boxes into rating controls
$(".rating").rating();
//Show that we can bind on the select box
$("#serialStar2").bind("change", function(){
$('#serialString2').text( $('#serialStar2').serialize() );
});
$("#serialStar").rating();
});
</script>
</head>
<body>
<h2>What</h2>
<p>
An easy to use rating control. It takes a normal select box, and turns it into a rating that your users can click on. The select box is preserved so you can still bind on change, get, and set the value in the rating control. The image is controlled with CSS and a simple gif, so you can make it look like anything you need.</p>
<h2>Example</h2>
<p>
Here is a sample default rating control with no options.
</p>
<select class="rating" id="tmp">
<option value="0">Did not like</option>
<option value="1">Ok</option>
<option value="2" selected="selected">Liked</option>
<option value="3">Loved!</option>
</select>
<h4 style="clear: both;">Source</h4>
<pre name="code" class="html">
<select class="rating">
<option value="0">Did not like</option>
<option value="1">Ok</option>
<option value="2" selected="selected">Liked</option>
<option value="3">Loved!</option>
</select>
</pre>
<pre name="code" class="JS">
$(".rating").rating();
</pre>
<h4>That's it!</h4>
<p>
The select box is now replaced with the rating control. Each option you put in the select box is turned into a star, so you can easily have as many stars as you want. The value you set is the value that is returned for the selected star. The text becomes the title on the star.
</p>
<p>
You can turn the cancel button on and off, and change the value of the cancel button by passing it when you create the rating control.
<code>$(".rating").rating({showCancel: true, cancelValue: null,})</code>
</p>
<p>
Available Options:
<ul>
<li><code>showCancel: true</code> : Should the cancel button be shown?</li>
<li><code>cancelValue: null</code> : If cancel button is shown, what should it's value be?</li>
<li><code>startValue: null</code> : If no property has the 'selected' attribute, what value should be displayed?</li>
<li><code>cancelTitle: "Cancel"</code> : The title for the cancel button.</li>
</ul>
</p>
<h2>Get Value</h2>
<select name="myRating" class="rating" id="serialStar">
<option value="1">This</option>
<option value="2">can</option>
<option value="3">be</option>
<option value="4">Anything</option>
</select>
<span id="seralString">Click for Value</span>
<button onclick="$('#seralString').text( $('#serialStar').val() );">Serialize</button>
<h4>Source</h4>
<pre name="code" class="html">
<select name="myRating" class="rating" id="serialStar">
<option value="0">Did not like</option>
<option value="1">Ok</option>
<option value="2">Liked</option>
<option value="3">Loved!</option>
</select>
<span id="seralString">Click for Value</span>
<button onclick="$('#seralString').text( $('#serialStar').val() );">Serialize</button>
</pre>
<pre name="code" class="JS">
//Turn the Select into a rating
$(".rating").rating();
//Action on button click
$('#seralString').text( $('#serialStar').val() );
</pre>
<h2>Bind $.serialize() On Change</h2>
<p>Of course you don't have to call $.serialize() here, you can call anything you want. It's just a normal event. You even have access to the value with <code>$("#serialStar2").val()</code>!</p>
<select name="myRating" class="rating" id="serialStar2">
<option value="1">ALright</option>
<option value="2">Ok</option>
<option value="3">Getting Better</option>
<option value="4">Pretty Good</option>
<option value="5">Awesome</option>
</select>
<span id="serialString2">Just click and I'll change.</span>
<h4>Source</h4>
<pre name="code" class="html">
<select name="myRating" class="rating" id="serialStar2">
<option value="1">ALrighte</option>
<option value="2">Ok</option>
<option value="3">Getting Better</option>
<option value="4">Pretty Good</option>
<option value="5">Awesome</option>
</select>
<span id="serialString2">serialize that star rating!</span>
</pre>
<pre name="code" class="JS">
//Turn the select box into rating controls
$(".rating").rating();
//Show that we can bind on the select box
$("#serialStar2").bind("change", function(){
$('#serialString2').text( $('#serialStar2').serialize() );
});
</pre>
<h2>Setting the Value</h2>
<p>There is one slight twist. In order to set the value programmatically, you have to set it, then trigger the change event on the select box.</p>
<select class="rating" id="star3">
<option value="1">ALright</option>
<option value="2">Ok</option>
<option value="3">Getting Better</option>
<option value="4">Pretty Good</option>
<option value="5">Awesome</option>
</select>
<button onclick="$('#star3').val(4).change()">Set to 'Pretty Good'</button>
<pre name="code" class="html">
<select name="myRating" class="rating" id="serialStar2">
<option value="1">ALrighte</option>
<option value="2">Ok</option>
<option value="3">Getting Better</option>
<option value="4">Pretty Good</option>
<option value="5">Awesome</option>
</select>
<button onclick="$('#star3').val(4).change()">Set to 'Pretty Good'</button>
</pre>
<pre name="code" class="JS">
//Turn the select box into rating controls
$(".rating").rating();
//Set the value to 4, then trigger change to update the rating.
$('#star3').val(4).change();
</pre>
</body>
</html>