rails-rateit 0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- data/.gitignore +17 -0
- data/Gemfile +4 -0
- data/LICENSE +22 -0
- data/README.md +36 -0
- data/Rakefile +2 -0
- data/example/content/antenna-black.png +0 -0
- data/example/content/antenna-red.png +0 -0
- data/example/content/antenna-yellow.png +0 -0
- data/example/content/antenna.css +16 -0
- data/example/content/bigstars.css +34 -0
- data/example/content/star-black32.png +0 -0
- data/example/content/star-gold32.png +0 -0
- data/example/content/star-red32.png +0 -0
- data/example/content/star-white32.png +0 -0
- data/example/content/star_2.gif +0 -0
- data/example/content/star_3.gif +0 -0
- data/example/content/star_4.gif +0 -0
- data/example/example.htm +576 -0
- data/example/rateit.aspx +9 -0
- data/example/sh/shBrushCSharp.js +65 -0
- data/example/sh/shBrushCss.js +91 -0
- data/example/sh/shBrushJScript.js +52 -0
- data/example/sh/shBrushXml.js +69 -0
- data/example/sh/shCore.css +226 -0
- data/example/sh/shCore.js +17 -0
- data/example/sh/shCoreDefault.css +328 -0
- data/lib/generators/rateit/install/install_generator.rb +18 -0
- data/lib/rails-rateit.rb +17 -0
- data/lib/rateit/version.rb +3 -0
- data/lib/rateit/view_helpers/action_view.rb +14 -0
- data/rails-rateit.gemspec +17 -0
- data/vendor/assets/images/delete.gif +0 -0
- data/vendor/assets/images/star.gif +0 -0
- data/vendor/assets/javascripts/jquery.rateit.js +250 -0
- data/vendor/assets/stylesheets/rateit.css.erb +90 -0
- metadata +80 -0
data/.gitignore
ADDED
data/Gemfile
ADDED
data/LICENSE
ADDED
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
Copyright (c) 2012 Ouvrages
|
|
2
|
+
|
|
3
|
+
MIT License
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining
|
|
6
|
+
a copy of this software and associated documentation files (the
|
|
7
|
+
"Software"), to deal in the Software without restriction, including
|
|
8
|
+
without limitation the rights to use, copy, modify, merge, publish,
|
|
9
|
+
distribute, sublicense, and/or sell copies of the Software, and to
|
|
10
|
+
permit persons to whom the Software is furnished to do so, subject to
|
|
11
|
+
the following conditions:
|
|
12
|
+
|
|
13
|
+
The above copyright notice and this permission notice shall be
|
|
14
|
+
included in all copies or substantial portions of the Software.
|
|
15
|
+
|
|
16
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
|
17
|
+
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
|
18
|
+
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
|
19
|
+
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
|
|
20
|
+
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
|
|
21
|
+
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
|
|
22
|
+
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
data/README.md
ADDED
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
# Rails Rateit
|
|
2
|
+
|
|
3
|
+
Rails wrapper for the jQuery RateIt plugin
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
Add this line to your application's Gemfile:
|
|
8
|
+
|
|
9
|
+
gem 'rails-rateit'
|
|
10
|
+
|
|
11
|
+
And then execute:
|
|
12
|
+
|
|
13
|
+
$ bundle
|
|
14
|
+
|
|
15
|
+
Or install it yourself as:
|
|
16
|
+
|
|
17
|
+
$ gem install rails-rateit
|
|
18
|
+
|
|
19
|
+
## Usage
|
|
20
|
+
|
|
21
|
+
Add the javascript and stylesheets :
|
|
22
|
+
|
|
23
|
+
$ rails generate rateit:install
|
|
24
|
+
|
|
25
|
+
In you view, use the rateit_tag helper :
|
|
26
|
+
|
|
27
|
+
<%= form.number_field(:rating, min: 0, max: 10, step: 1) %>
|
|
28
|
+
<%= rateit_tag(backingfld: "#my_object_rating", max: 10, min: 0, step: 1, resetable: "false") %>
|
|
29
|
+
|
|
30
|
+
## Contributing
|
|
31
|
+
|
|
32
|
+
1. Fork it
|
|
33
|
+
2. Create your feature branch (`git checkout -b my-new-feature`)
|
|
34
|
+
3. Commit your changes (`git commit -am 'Added some feature'`)
|
|
35
|
+
4. Push to the branch (`git push origin my-new-feature`)
|
|
36
|
+
5. Create new Pull Request
|
data/Rakefile
ADDED
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
div.antenna div.rateit-range
|
|
2
|
+
{
|
|
3
|
+
background: url(antenna-black.png) no-repeat;
|
|
4
|
+
height: 25px;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
div.antenna div.rateit-hover
|
|
8
|
+
{
|
|
9
|
+
background: url(antenna-yellow.png) no-repeat;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
div.antenna div.rateit-selected
|
|
13
|
+
{
|
|
14
|
+
background: url(antenna-red.png) no-repeat;
|
|
15
|
+
}
|
|
16
|
+
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
/*
|
|
2
|
+
SOURCE: http://iconexpo.com/2008/12/free-8color-star-icons/
|
|
3
|
+
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
div.bigstars div.rateit-range
|
|
8
|
+
{
|
|
9
|
+
background: url(star-white32.png);
|
|
10
|
+
height: 32px;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
div.bigstars div.rateit-hover
|
|
14
|
+
{
|
|
15
|
+
background: url(star-gold32.png);
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
div.bigstars div.rateit-selected
|
|
19
|
+
{
|
|
20
|
+
background: url(star-red32.png);
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
div.bigstars div.rateit-reset
|
|
24
|
+
{
|
|
25
|
+
background: url(star-black32.png);
|
|
26
|
+
width: 32px;
|
|
27
|
+
height: 32px;
|
|
28
|
+
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
div.bigstars div.rateit-reset:hover
|
|
32
|
+
{
|
|
33
|
+
background: url(star-white32.png);
|
|
34
|
+
}
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
data/example/example.htm
ADDED
|
@@ -0,0 +1,576 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<title>RateIt</title>
|
|
5
|
+
<link href="../src/rateit.css" rel="stylesheet" type="text/css">
|
|
6
|
+
|
|
7
|
+
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
|
|
8
|
+
|
|
9
|
+
<style>
|
|
10
|
+
body
|
|
11
|
+
{
|
|
12
|
+
font-family: Tahoma;
|
|
13
|
+
font-size: 12px;
|
|
14
|
+
}
|
|
15
|
+
h1
|
|
16
|
+
{
|
|
17
|
+
font-size: 1.7em;
|
|
18
|
+
}
|
|
19
|
+
h2
|
|
20
|
+
{
|
|
21
|
+
font-size: 1.5em;
|
|
22
|
+
}
|
|
23
|
+
h3
|
|
24
|
+
{
|
|
25
|
+
font-size: 1.2em;
|
|
26
|
+
}
|
|
27
|
+
ul.nostyle
|
|
28
|
+
{
|
|
29
|
+
list-style: none;
|
|
30
|
+
}
|
|
31
|
+
ul.nostyle h3
|
|
32
|
+
{
|
|
33
|
+
margin-left: -20px;
|
|
34
|
+
}
|
|
35
|
+
</style>
|
|
36
|
+
<!-- alternative styles -->
|
|
37
|
+
<link href="content/bigstars.css" rel="stylesheet" type="text/css">
|
|
38
|
+
<link href="content/antenna.css" rel="stylesheet" type="text/css">
|
|
39
|
+
<!-- syntax highlighter -->
|
|
40
|
+
<link href="sh/shCore.css" rel="stylesheet" type="text/css">
|
|
41
|
+
<link href="sh/shCoreDefault.css" rel="stylesheet" type="text/css">
|
|
42
|
+
</head>
|
|
43
|
+
<body>
|
|
44
|
+
<h1>
|
|
45
|
+
RateIt plugin</h1>
|
|
46
|
+
<h2>
|
|
47
|
+
Prerequisites</h2>
|
|
48
|
+
<p>
|
|
49
|
+
In order to use RateIt you'll need:
|
|
50
|
+
<ul>
|
|
51
|
+
<li><a target="_blank" href="http://www.jquery.com">jQuery 1.6.0</a> or newer.</li>
|
|
52
|
+
<li>jquery.rateit.min.js, rateit.css, delete.gif, star.gif - <a href="http://rateit.codeplex.com/releases">
|
|
53
|
+
Download RateIt</a></li>
|
|
54
|
+
<li>Place a reference to the rateit.css stylesheet into the page head.</li>
|
|
55
|
+
<li>Place a script reference to jquery.rateit.js before your </body> tag.
|
|
56
|
+
</li>
|
|
57
|
+
</ul>
|
|
58
|
+
</p>
|
|
59
|
+
<h2>
|
|
60
|
+
Options</h2>
|
|
61
|
+
Go to the <a href="http://rateit.codeplex.com">RateIt project homepage</a> to view
|
|
62
|
+
the documentation.
|
|
63
|
+
<h2>
|
|
64
|
+
Examples</h2>
|
|
65
|
+
<div style="font-weight: bold">
|
|
66
|
+
<span id="toc"></span>
|
|
67
|
+
</div>
|
|
68
|
+
<ul class="nostyle" id="examples">
|
|
69
|
+
<li id="ex_1">
|
|
70
|
+
<h3>
|
|
71
|
+
1) Basic usage</h3>
|
|
72
|
+
<div class="rateit">
|
|
73
|
+
</div>
|
|
74
|
+
<pre class="brush: xml">
|
|
75
|
+
<div class="rateit">
|
|
76
|
+
</div>
|
|
77
|
+
</pre>
|
|
78
|
+
</li>
|
|
79
|
+
<li id="ex_2a">
|
|
80
|
+
<h3>
|
|
81
|
+
2a) Progressive enhancement (using HTML5 range input type)
|
|
82
|
+
</h3>
|
|
83
|
+
<input type="range" min="0" max="7" value="0" step="0.5" id="backing2">
|
|
84
|
+
<div class="rateit" data-rateit-backingfld="#backing2">
|
|
85
|
+
</div>
|
|
86
|
+
<pre class="brush: xml">
|
|
87
|
+
<input type="range" min="0" max="7" value="0" step="0.5" id="backing2">
|
|
88
|
+
<div class="rateit" data-rateit-backingfld="#backing2"></div>
|
|
89
|
+
</pre>
|
|
90
|
+
<button onclick="$('#backing2').toggle()">
|
|
91
|
+
Toggle Backing Field visibility</button>
|
|
92
|
+
</li>
|
|
93
|
+
<li id="ex_2b">
|
|
94
|
+
<h3>
|
|
95
|
+
2b) Progressive enhancement (using select)
|
|
96
|
+
</h3>
|
|
97
|
+
<select id="backing2b">
|
|
98
|
+
<option value="0">Bad</option>
|
|
99
|
+
<option value="1">OK</option>
|
|
100
|
+
<option value="2">Great</option>
|
|
101
|
+
<option value="3">Excellent</option>
|
|
102
|
+
</select>
|
|
103
|
+
<div class="rateit" data-rateit-backingfld="#backing2b">
|
|
104
|
+
</div>
|
|
105
|
+
<pre class="brush: xml">
|
|
106
|
+
<select id="backing2b">
|
|
107
|
+
<option value="0">Bad</option>
|
|
108
|
+
<option value="1">OK</option>
|
|
109
|
+
<option value="2">Great</option>
|
|
110
|
+
<option value="3">Excellent</option>
|
|
111
|
+
</select>
|
|
112
|
+
<div class="rateit" data-rateit-backingfld="#backing2b"></div>
|
|
113
|
+
</pre>
|
|
114
|
+
</li>
|
|
115
|
+
<li id="ex_3">
|
|
116
|
+
<h3>
|
|
117
|
+
3) Readonly and preset value</h3>
|
|
118
|
+
<div class="rateit" data-rateit-value="2.5" data-rateit-ispreset="true" data-rateit-readonly="true">
|
|
119
|
+
</div>
|
|
120
|
+
<pre class="brush: xml">
|
|
121
|
+
<div class="rateit" data-rateit-value="2.5" data-rateit-ispreset="true" data-rateit-readonly="true"></div>
|
|
122
|
+
</pre>
|
|
123
|
+
</li>
|
|
124
|
+
<li id="ex_4">
|
|
125
|
+
<h3>
|
|
126
|
+
4) More settings</h3>
|
|
127
|
+
<input type="range" value="4" step="0.25" id="backing4">
|
|
128
|
+
<div class="rateit" data-rateit-backingfld="#backing4" data-rateit-resetable="false" data-rateit-ispreset="true"
|
|
129
|
+
data-rateit-min="0" data-rateit-max="10">
|
|
130
|
+
</div>
|
|
131
|
+
<pre class="brush: xml">
|
|
132
|
+
<input type="range" value="4" step="0.25" id="backing4">
|
|
133
|
+
<div class="rateit" data-rateit-backingfld="#backing4" data-rateit-resetable="false" data-rateit-ispreset="true"
|
|
134
|
+
data-rateit-min="0" data-rateit-max="10">
|
|
135
|
+
</div>
|
|
136
|
+
|
|
137
|
+
</pre>
|
|
138
|
+
</li>
|
|
139
|
+
<li id="ex_5">
|
|
140
|
+
<h3>
|
|
141
|
+
5) Javascript interaction</h3>
|
|
142
|
+
<div class="rateit" id="rateit5" data-rateit-min="2">
|
|
143
|
+
</div>
|
|
144
|
+
<div>
|
|
145
|
+
<span id="value5"></span><span id="hover5"></span>
|
|
146
|
+
</div>
|
|
147
|
+
|
|
148
|
+
<script type="text/javascript">
|
|
149
|
+
$("#rateit5").bind('rated', function (event, value) { $('#value5').text('You\'ve rated it: ' + value); });
|
|
150
|
+
$("#rateit5").bind('reset', function () { $('#value5').text('Rating reset'); });
|
|
151
|
+
$("#rateit5").bind('over', function (event, value) { $('#hover5').text('Hovering over: ' + value); });
|
|
152
|
+
</script>
|
|
153
|
+
|
|
154
|
+
<pre class="brush: xml">
|
|
155
|
+
<div class="rateit" id="rateit5" data-rateit-min="2">
|
|
156
|
+
</div>
|
|
157
|
+
<div>
|
|
158
|
+
<span id="value5"></span>
|
|
159
|
+
<span id="hover5"></span>
|
|
160
|
+
</div>
|
|
161
|
+
|
|
162
|
+
<script type="text/javascript">
|
|
163
|
+
$("#rateit5").bind('rated', function (event, value) { $('#value5').text('You\'ve rated it: ' + value); });
|
|
164
|
+
$("#rateit5").bind('reset', function () { $('#value5').text('Rating reset'); });
|
|
165
|
+
$("#rateit5").bind('over', function (event, value) { $('#hover5').text('Hovering over: ' + value); });
|
|
166
|
+
</script>
|
|
167
|
+
</pre>
|
|
168
|
+
</li>
|
|
169
|
+
<li id="ex_6">
|
|
170
|
+
<h3>
|
|
171
|
+
6) Javascript invocation</h3>
|
|
172
|
+
<input type="hidden" id="backing6">
|
|
173
|
+
<div id="rateit6">
|
|
174
|
+
</div>
|
|
175
|
+
|
|
176
|
+
<script type="text/javascript">
|
|
177
|
+
$(function () { $('#rateit6').rateit({ max: 20, step: 2, backingfld: '#backing6' }); });
|
|
178
|
+
</script>
|
|
179
|
+
|
|
180
|
+
<pre class="brush: xml">
|
|
181
|
+
<input type="hidden" id="backing6">
|
|
182
|
+
<div id="rateit6">
|
|
183
|
+
</div>
|
|
184
|
+
|
|
185
|
+
<script type="text/javascript">
|
|
186
|
+
$(function () { $('#rateit6').rateit({ max: 20, step: 2, backingfld: '#backing6' }); });
|
|
187
|
+
</script>
|
|
188
|
+
</pre>
|
|
189
|
+
</li>
|
|
190
|
+
<li id="ex_7a">
|
|
191
|
+
<h3>
|
|
192
|
+
7a) Styling</h3>
|
|
193
|
+
<p>
|
|
194
|
+
You can change the styles of the plugin in a two ways.
|
|
195
|
+
<ul>
|
|
196
|
+
<li>You can change change the star.gif and delete.gif pictures (and perhaps the default
|
|
197
|
+
starwidth, and starheight values in the javascript file). This will change the style
|
|
198
|
+
everywhere.</li>
|
|
199
|
+
<li>You can change individual items, by adding a stylesheet with a few rules.</li>
|
|
200
|
+
</ul>
|
|
201
|
+
Here I've opted for the second option.
|
|
202
|
+
</p>
|
|
203
|
+
<div class="rateit bigstars" data-rateit-starwidth="32" data-rateit-starheight="32">
|
|
204
|
+
</div>
|
|
205
|
+
<h4>
|
|
206
|
+
Inline code</h4>
|
|
207
|
+
<pre class="brush: xml">
|
|
208
|
+
<div class="rateit bigstars" data-rateit-starwidth="32" data-rateit-starheight="32"></div>
|
|
209
|
+
</pre>
|
|
210
|
+
<h4>
|
|
211
|
+
Style sheet</h4>
|
|
212
|
+
<pre class="brush: css">
|
|
213
|
+
div.bigstars div.rateit-range
|
|
214
|
+
{
|
|
215
|
+
background: url(star-white32.png);
|
|
216
|
+
height: 32px;
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
div.bigstars div.rateit-hover
|
|
220
|
+
{
|
|
221
|
+
background: url(star-gold32.png);
|
|
222
|
+
}
|
|
223
|
+
|
|
224
|
+
div.bigstars div.rateit-selected
|
|
225
|
+
{
|
|
226
|
+
background: url(star-red32.png);
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
div.bigstars div.rateit-reset
|
|
230
|
+
{
|
|
231
|
+
background: url(star-black32.png);
|
|
232
|
+
width: 32px;
|
|
233
|
+
height: 32px;
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
div.bigstars div.rateit-reset:hover
|
|
237
|
+
{
|
|
238
|
+
background: url(star-white32.png);
|
|
239
|
+
}
|
|
240
|
+
</pre>
|
|
241
|
+
</li>
|
|
242
|
+
<li id="ex_7b">
|
|
243
|
+
<h3>
|
|
244
|
+
7b) More styling</h3>
|
|
245
|
+
<p>
|
|
246
|
+
Here we use one big image (actually 3), with different dimensions. Not very pretty,
|
|
247
|
+
but it conveys the message I hope.</p>
|
|
248
|
+
<div class="rateit antenna" data-rateit-starwidth="11" data-rateit-starheight="25">
|
|
249
|
+
</div>
|
|
250
|
+
<h4>
|
|
251
|
+
Inline code</h4>
|
|
252
|
+
<pre class="brush: xml">
|
|
253
|
+
<div class="rateit antenna" data-rateit-starwidth="11" data-rateit-starheight="25"></div>
|
|
254
|
+
</pre>
|
|
255
|
+
<h4>
|
|
256
|
+
Style sheet</h4>
|
|
257
|
+
<pre class="brush: css">
|
|
258
|
+
div.antenna div.rateit-range
|
|
259
|
+
{
|
|
260
|
+
background: url(antenna-black.png) no-repeat;
|
|
261
|
+
height: 25px;
|
|
262
|
+
}
|
|
263
|
+
|
|
264
|
+
div.antenna div.rateit-hover
|
|
265
|
+
{
|
|
266
|
+
background: url(antenna-yellow.png) no-repeat;
|
|
267
|
+
}
|
|
268
|
+
|
|
269
|
+
div.antenna div.rateit-selected
|
|
270
|
+
{
|
|
271
|
+
background: url(antenna-red.png) no-repeat;
|
|
272
|
+
}
|
|
273
|
+
</pre>
|
|
274
|
+
</li>
|
|
275
|
+
<li id="ex_8">
|
|
276
|
+
<h3>
|
|
277
|
+
8) RTL support</h3>
|
|
278
|
+
<div style="direction: rtl">
|
|
279
|
+
Now we are in RTL mode. No changes needed to make this work.
|
|
280
|
+
<div class="rateit">
|
|
281
|
+
</div>
|
|
282
|
+
</div>
|
|
283
|
+
</li>
|
|
284
|
+
<li id="ex_9">
|
|
285
|
+
<h3>
|
|
286
|
+
9) Setting and Getting values</h3>
|
|
287
|
+
<p>
|
|
288
|
+
All properties can also be set on the fly. Here are a few examples:</p>
|
|
289
|
+
<div class="rateit" id="rateit9">
|
|
290
|
+
</div>
|
|
291
|
+
<div>
|
|
292
|
+
<button onclick="alert($('#rateit9').rateit('value'))">
|
|
293
|
+
Get value</button>
|
|
294
|
+
<button onclick="$('#rateit9').rateit('value', prompt('Input numerical value'))">
|
|
295
|
+
Set value</button>
|
|
296
|
+
</div>
|
|
297
|
+
<div>
|
|
298
|
+
<button onclick="alert($('#rateit9').rateit('max'))">
|
|
299
|
+
Get max value</button>
|
|
300
|
+
<button onclick="$('#rateit9').rateit('max', prompt('Input numerical value'))">
|
|
301
|
+
Set max value</button>
|
|
302
|
+
</div>
|
|
303
|
+
<div>
|
|
304
|
+
<button onclick="alert($('#rateit9').rateit('step'))">
|
|
305
|
+
Get step size</button>
|
|
306
|
+
<button onclick="$('#rateit9').rateit('step', prompt('Input numerical value'))">
|
|
307
|
+
Set step size</button>
|
|
308
|
+
</div>
|
|
309
|
+
<div>
|
|
310
|
+
<button onclick="alert($('#rateit9').rateit('readonly'))">
|
|
311
|
+
Get readonly value</button>
|
|
312
|
+
<button onclick="$('#rateit9').rateit('readonly',!$('#rateit9').rateit('readonly'))">
|
|
313
|
+
Toggle readonly</button>
|
|
314
|
+
</div>
|
|
315
|
+
<div>
|
|
316
|
+
<button onclick="alert($('#rateit9').rateit('ispreset'))">
|
|
317
|
+
Get ispreset value</button>
|
|
318
|
+
<button onclick="$('#rateit9').rateit('ispreset',!$('#rateit9').rateit('ispreset'))">
|
|
319
|
+
Toggle ispreset</button>
|
|
320
|
+
</div>
|
|
321
|
+
|
|
322
|
+
<pre class="brush: xml">
|
|
323
|
+
<div class="rateit" id="rateit9">
|
|
324
|
+
</div>
|
|
325
|
+
<div>
|
|
326
|
+
<button onclick="alert($('#rateit9').rateit('value'))">Get value</button>
|
|
327
|
+
<button onclick="$('#rateit9').rateit('value', prompt('Input numerical value'))">Set value</button>
|
|
328
|
+
</div>
|
|
329
|
+
<div>
|
|
330
|
+
<button onclick="alert($('#rateit9').rateit('max'))">Get max value</button>
|
|
331
|
+
<button onclick="$('#rateit9').rateit('max', prompt('Input numerical value'))">Set max value</button>
|
|
332
|
+
</div>
|
|
333
|
+
<div>
|
|
334
|
+
<button onclick="alert($('#rateit9').rateit('step'))">Get step size</button>
|
|
335
|
+
<button onclick="$('#rateit9').rateit('step', prompt('Input numerical value'))">Set step size</button>
|
|
336
|
+
</div>
|
|
337
|
+
<div>
|
|
338
|
+
<button onclick="alert($('#rateit9').rateit('readonly'))">Get readonly value</button>
|
|
339
|
+
<button onclick="$('#rateit9').rateit('readonly',!$('#rateit9').rateit('readonly'))">Toggle readonly</button>
|
|
340
|
+
</div>
|
|
341
|
+
<div>
|
|
342
|
+
<button onclick="alert($('#rateit9').rateit('ispreset'))">Get ispreset value</button>
|
|
343
|
+
<button onclick="$('#rateit9').rateit('ispreset',!$('#rateit9').rateit('ispreset'))">Toggle ispreset</button>
|
|
344
|
+
</div>
|
|
345
|
+
|
|
346
|
+
</pre>
|
|
347
|
+
</li>
|
|
348
|
+
<li id="ex_10">
|
|
349
|
+
<h3>
|
|
350
|
+
10) Tooltip example</h3>
|
|
351
|
+
<p>
|
|
352
|
+
Using tooltips is easy. Just bind to the hover event, and do your thing. Shown here
|
|
353
|
+
is the basic tooltip, but of course you can use any tooltip you'd like.</p>
|
|
354
|
+
<h4>
|
|
355
|
+
Basic numbers</h4>
|
|
356
|
+
<div class="rateit" id="rateit10">
|
|
357
|
+
</div>
|
|
358
|
+
|
|
359
|
+
<script type="text/javascript">
|
|
360
|
+
$("#rateit10").bind('over', function (event, value) { $(this).attr('title', value); });
|
|
361
|
+
</script>
|
|
362
|
+
|
|
363
|
+
<pre class="brush: xml">
|
|
364
|
+
<div class="rateit" id="rateit10">
|
|
365
|
+
</div>
|
|
366
|
+
|
|
367
|
+
<script type="text/javascript">
|
|
368
|
+
$("#rateit10").bind('over', function (event,value) { $(this).attr('title', value); });
|
|
369
|
+
</script>
|
|
370
|
+
</pre>
|
|
371
|
+
<h4>
|
|
372
|
+
Custom text</h4>
|
|
373
|
+
<div class="rateit" id="rateit10b" data-rateit-step="1">
|
|
374
|
+
</div>
|
|
375
|
+
|
|
376
|
+
<script type="text/javascript">
|
|
377
|
+
var tooltipvalues = ['bad', 'poor', 'ok', 'good', 'super'];
|
|
378
|
+
$("#rateit10b").bind('over', function (event, value) { $(this).attr('title', tooltipvalues[value - 1]); });
|
|
379
|
+
</script>
|
|
380
|
+
|
|
381
|
+
<pre class="brush: xml">
|
|
382
|
+
<div class="rateit" id="rateit10b" data-rateit-step="1">
|
|
383
|
+
</div>
|
|
384
|
+
|
|
385
|
+
<script type="text/javascript">
|
|
386
|
+
var tooltipvalues = ['bad', 'poor', 'ok', 'good', 'super'];
|
|
387
|
+
$("#rateit10b").bind('over', function (event, value) { $(this).attr('title', tooltipvalues[value-1]); });
|
|
388
|
+
</script>
|
|
389
|
+
</pre>
|
|
390
|
+
</li>
|
|
391
|
+
<li id="ex_11">
|
|
392
|
+
<h3>
|
|
393
|
+
11) AJAX example</h3>
|
|
394
|
+
<p>
|
|
395
|
+
Most times RateIt will be used using some Ajax. There are different ways of implementing
|
|
396
|
+
it (with/without backing field, using data-* attributes etc.)</p>
|
|
397
|
+
<div id="products">
|
|
398
|
+
<div style="float: right; width: 350px; border: 1px solid #ccc; padding: 1em;">
|
|
399
|
+
<strong>Server response:</strong>
|
|
400
|
+
<ul id="response">
|
|
401
|
+
</ul>
|
|
402
|
+
</div>
|
|
403
|
+
<ul>
|
|
404
|
+
<li>
|
|
405
|
+
<h4>
|
|
406
|
+
Product X (id: 312)</h4>
|
|
407
|
+
RateIt:
|
|
408
|
+
<div data-productid="312" class="rateit">
|
|
409
|
+
</div>
|
|
410
|
+
</li>
|
|
411
|
+
<li>
|
|
412
|
+
<h4>
|
|
413
|
+
Product Y (id: 423)</h4>
|
|
414
|
+
RateIt:
|
|
415
|
+
<div data-productid="423" class="rateit">
|
|
416
|
+
</div>
|
|
417
|
+
</li>
|
|
418
|
+
<li>
|
|
419
|
+
<h4>
|
|
420
|
+
Product Z (id: 653)</h4>
|
|
421
|
+
RateIt:
|
|
422
|
+
<div data-productid="653" class="rateit">
|
|
423
|
+
</div>
|
|
424
|
+
</li>
|
|
425
|
+
</ul>
|
|
426
|
+
</div>
|
|
427
|
+
|
|
428
|
+
<script type="text/javascript">
|
|
429
|
+
//we bind only to the rateit controls within the products div
|
|
430
|
+
$('#products .rateit').bind('rated reset', function (e) {
|
|
431
|
+
var ri = $(this);
|
|
432
|
+
|
|
433
|
+
//if the use pressed reset, it will get value: 0 (to be compatible with the HTML range control), we could check if e.type == 'reset', and then set the value to null .
|
|
434
|
+
var value = ri.rateit('value');
|
|
435
|
+
var productID = ri.data('productid'); // if the product id was in some hidden field: ri.closest('li').find('input[name="productid"]').val()
|
|
436
|
+
|
|
437
|
+
//maybe we want to disable voting?
|
|
438
|
+
ri.rateit('readonly', true);
|
|
439
|
+
|
|
440
|
+
$.ajax({
|
|
441
|
+
url: 'rateit.aspx', //your server side script
|
|
442
|
+
data: { id: productID, value: value }, //our data
|
|
443
|
+
type: 'POST',
|
|
444
|
+
success: function (data) {
|
|
445
|
+
$('#response').append('<li>' + data + '</li>');
|
|
446
|
+
|
|
447
|
+
},
|
|
448
|
+
error: function (jxhr, msg, err) {
|
|
449
|
+
$('#response').append('<li style="color:red">' + msg + '</li>');
|
|
450
|
+
}
|
|
451
|
+
});
|
|
452
|
+
});
|
|
453
|
+
</script>
|
|
454
|
+
|
|
455
|
+
<h4>
|
|
456
|
+
Client</h4>
|
|
457
|
+
<pre class="brush: xml">
|
|
458
|
+
<div id="products">
|
|
459
|
+
<div style="float:right; width:350px; border:1px solid #ccc; padding:1em;">
|
|
460
|
+
<strong>Server response:</strong>
|
|
461
|
+
<ul id="response">
|
|
462
|
+
|
|
463
|
+
</ul>
|
|
464
|
+
</div>
|
|
465
|
+
<ul>
|
|
466
|
+
<li><h4>Product X (id: 312)</h4>
|
|
467
|
+
RateIt: <div data-productid="312" class="rateit"></div>
|
|
468
|
+
</li>
|
|
469
|
+
<li><h4>Product Y (id: 423)</h4>
|
|
470
|
+
RateIt: <div data-productid="423" class="rateit"></div></li>
|
|
471
|
+
<li><h4>Product Z (id: 653)</h4>
|
|
472
|
+
RateIt: <div data-productid="653" class="rateit"></div>
|
|
473
|
+
</li>
|
|
474
|
+
</ul>
|
|
475
|
+
|
|
476
|
+
</div>
|
|
477
|
+
|
|
478
|
+
<script type ="text/javascript">
|
|
479
|
+
//we bind only to the rateit controls within the products div
|
|
480
|
+
$('#products .rateit').bind('rated reset', function (e) {
|
|
481
|
+
var ri = $(this);
|
|
482
|
+
|
|
483
|
+
//if the use pressed reset, it will get value: 0 (to be compatible with the HTML range control), we could check if e.type == 'reset', and then set the value to null .
|
|
484
|
+
var value = ri.rateit('value');
|
|
485
|
+
var productID = ri.data('productid'); // if the product id was in some hidden field: ri.closest('li').find('input[name="productid"]').val()
|
|
486
|
+
|
|
487
|
+
//maybe we want to disable voting?
|
|
488
|
+
ri.rateit('readonly', true);
|
|
489
|
+
|
|
490
|
+
$.ajax({
|
|
491
|
+
url: 'rateit.aspx', //your server side script
|
|
492
|
+
data: { id: productID, value: value }, //our data
|
|
493
|
+
type: 'POST',
|
|
494
|
+
success: function (data) {
|
|
495
|
+
$('#response').append('<li>' + data + '</li>');
|
|
496
|
+
|
|
497
|
+
},
|
|
498
|
+
error: function (jxhr, msg, err) {
|
|
499
|
+
$('#response').append('<li style="color:red">' + msg + '</li>');
|
|
500
|
+
}
|
|
501
|
+
});
|
|
502
|
+
});
|
|
503
|
+
</script>
|
|
504
|
+
|
|
505
|
+
</pre>
|
|
506
|
+
<h4>
|
|
507
|
+
Server (ASPX) super simplified</h4>
|
|
508
|
+
<pre class="brush: c-sharp">
|
|
509
|
+
<%@ Page Language="C#" %>
|
|
510
|
+
<%
|
|
511
|
+
//Get value
|
|
512
|
+
float value = float.Parse(Request.Form["value"]);
|
|
513
|
+
int productID = int.Parse(Request.Form["id"]);
|
|
514
|
+
|
|
515
|
+
Response.Write(string.Format("You voted {0} on product: {1}.<br/>Time on server: {2}", value, productID, DateTime.Now.ToString()));
|
|
516
|
+
|
|
517
|
+
%>
|
|
518
|
+
|
|
519
|
+
|
|
520
|
+
|
|
521
|
+
</pre>
|
|
522
|
+
</li>
|
|
523
|
+
<!-- <li id="ex_12">
|
|
524
|
+
<h3>
|
|
525
|
+
12) Initial value in different color</h3>
|
|
526
|
+
<p>Sometimes we want to show the average rating as the initial value. In most cases this should be in a different color. </p>
|
|
527
|
+
<p>RateIt is flexible enough to also allow this scenario with little effort.
|
|
528
|
+
|
|
529
|
+
</p>
|
|
530
|
+
|
|
531
|
+
|
|
532
|
+
</li>-->
|
|
533
|
+
</ul>
|
|
534
|
+
|
|
535
|
+
<script src="../src/jquery.rateit.js" type="text/javascript"></script>
|
|
536
|
+
|
|
537
|
+
<script>
|
|
538
|
+
//build toc
|
|
539
|
+
var toc = [];
|
|
540
|
+
$('#examples > li').each(function (i, e) {
|
|
541
|
+
|
|
542
|
+
|
|
543
|
+
if (i > 0)
|
|
544
|
+
toc.push(', ');
|
|
545
|
+
toc.push('<a href="#')
|
|
546
|
+
toc.push(e.id)
|
|
547
|
+
toc.push('">')
|
|
548
|
+
var title = $(e).find('h3:first').text();
|
|
549
|
+
title = title.substring(title.indexOf(')') + 2);
|
|
550
|
+
toc.push(title);
|
|
551
|
+
toc.push('</a>');
|
|
552
|
+
|
|
553
|
+
});
|
|
554
|
+
|
|
555
|
+
$('#toc').html(toc.join(''));
|
|
556
|
+
|
|
557
|
+
</script>
|
|
558
|
+
|
|
559
|
+
<!-- syntax highlighter -->
|
|
560
|
+
|
|
561
|
+
<script src="sh/shCore.js" type="text/javascript"></script>
|
|
562
|
+
|
|
563
|
+
<script src="sh/shBrushJScript.js" type="text/javascript"></script>
|
|
564
|
+
|
|
565
|
+
<script src="sh/shBrushXml.js" type="text/javascript"></script>
|
|
566
|
+
|
|
567
|
+
<script src="sh/shBrushCss.js" type="text/javascript"></script>
|
|
568
|
+
|
|
569
|
+
<script src="sh/shBrushCSharp.js" type="text/javascript"></script>
|
|
570
|
+
|
|
571
|
+
<script type="text/javascript">
|
|
572
|
+
SyntaxHighlighter.all()
|
|
573
|
+
</script>
|
|
574
|
+
|
|
575
|
+
</body>
|
|
576
|
+
</html>
|