diff options
| author | Ray Cromwell <cromwellian@gmail.com> | 2009-05-14 01:06:43 +0000 |
|---|---|---|
| committer | Ray Cromwell <cromwellian@gmail.com> | 2009-05-14 01:06:43 +0000 |
| commit | 7557842d252c50ca4751ba545abb1e52e2a7a285 (patch) | |
| tree | f6da4649646c64c58f19c9e0e6a4a7c2a22a6f6c /samples/src/main | |
| parent | 78021c84b550086bedeafe37cdde241788e85999 (diff) | |
| download | gwtquery-7557842d252c50ca4751ba545abb1e52e2a7a285.tar.gz gwtquery-7557842d252c50ca4751ba545abb1e52e2a7a285.zip | |
Plugins
Diffstat (limited to 'samples/src/main')
| -rw-r--r-- | samples/src/main/java/gwtquery/samples/client/GwtQuerySampleModule.java | 3 | ||||
| -rw-r--r-- | samples/src/main/java/gwtquery/samples/public/GwtQuerySample.html | 720 |
2 files changed, 722 insertions, 1 deletions
diff --git a/samples/src/main/java/gwtquery/samples/client/GwtQuerySampleModule.java b/samples/src/main/java/gwtquery/samples/client/GwtQuerySampleModule.java index 0562206d..9ab09fcf 100644 --- a/samples/src/main/java/gwtquery/samples/client/GwtQuerySampleModule.java +++ b/samples/src/main/java/gwtquery/samples/client/GwtQuerySampleModule.java @@ -4,6 +4,7 @@ import com.google.gwt.core.client.EntryPoint; import com.google.gwt.query.client.Effects;
import com.google.gwt.query.client.Function;
import com.google.gwt.query.client.GQuery;
+import com.google.gwt.query.client.plugins.Ratings;
import static com.google.gwt.query.client.GQuery.$;
import static com.google.gwt.query.client.GQuery.$$;
import static com.google.gwt.query.client.GQuery.lazy;
@@ -43,6 +44,6 @@ public class GwtQuerySampleModule implements EntryPoint { $(".note").click(lazy().fadeOut().done());
$(".note").append(" Hello");
-
+ $("input").as(Ratings.Ratings).rating();
}
}
diff --git a/samples/src/main/java/gwtquery/samples/public/GwtQuerySample.html b/samples/src/main/java/gwtquery/samples/public/GwtQuerySample.html index b15701a7..db6fbc95 100644 --- a/samples/src/main/java/gwtquery/samples/public/GwtQuerySample.html +++ b/samples/src/main/java/gwtquery/samples/public/GwtQuerySample.html @@ -2,6 +2,8 @@ <head>
<title>GQuery Demo</title>
<script language="javascript" src="gwtquery.samples.GwtQuerySample.nocache.js"></script>
+ <link href='gquery-star-ratings.css' type="text/css" rel="stylesheet"/>
+
</head>
<body>
<div class="outer">
@@ -15,6 +17,724 @@ <div>Foo <span class="note">bar</span> baz</div>
</div>
+<div id="tab-Overview">
+ <h2>What is this?</h2>
+ <p>
+ The <strong>Star Rating Plugin</strong> is a plugin
+ for the jQuery Javascript library that creates a non-obstrusive
+ star rating control based on a set of radio input boxes.
+ </p>
+
+ <h2>What does it do?</h2>
+ <ul>
+ <li>
+ It turns a collection of radio boxes into a neat star-rating control.
+ </li>
+ <li>
+ It creates the interface based on standard form elements, which means the
+ basic functionality will still be available even if Javascript is disabled.
+ </li>
+ <li>
+ <strong style="color: rgb(0, 153, 0);">NEW</strong> (12-Mar-08):
+ In read only mode (using the 'readOnly' option or <code>disabled</code> property), the plugin is a neat way of
+ displaying star-like values without any additional code
+ </li>
+ </ul>
+
+ <h2>How do I use it?</h2>
+ <p>
+ Just add the <code><strong>star</strong></code> class to your radio boxes
+ </p>
+ <table cellspacing="5" width="100%">
+ <tr>
+ <td valign="top">
+ <pre class="code"><code class="html"><input name="star1" type="radio" class="star"/>
+ <input name="star1" type="radio" class="star"/>
+ <input name="star1" type="radio" class="star"/>
+ <input name="star1" type="radio" class="star"/>
+ <input name="star1" type="radio" class="star"/></code></pre>
+ </td>
+ <td valign="top" width="10">»</td>
+ <td valign="top" width="180">
+ <input name="star1" type="radio" class="star"/>
+ <input name="star1" type="radio" class="star"/>
+ <input name="star1" type="radio" class="star"/>
+ <input name="star1" type="radio" class="star"/>
+ <input name="star1" type="radio" class="star"/>
+ </td>
+ </tr>
+ </table>
+
+ <p>
+ Use the <code><strong>checked</strong></code> property to specify the initial/default value of the control
+ </p>
+ <table cellspacing="5" width="100%">
+ <tr>
+ <td valign="top">
+ <pre class="code"><code class="html"><input name="star2" type="radio" class="star"/>
+ <input name="star2" type="radio" class="star"/>
+ <input name="star2" type="radio" class="star" checked="checked"/>
+ <input name="star2" type="radio" class="star"/>
+ <input name="star2" type="radio" class="star"/></code></pre>
+ </td>
+ <td valign="top" width="10">»</td>
+ <td valign="top" width="180">
+ <input name="star2" type="radio" class="star"/>
+ <input name="star2" type="radio" class="star"/>
+ <input name="star2" type="radio" class="star" checked="checked"/>
+ <input name="star2" type="radio" class="star"/>
+ <input name="star2" type="radio" class="star"/>
+ </td>
+ </tr>
+ </table>
+
+ <p>
+ Use the <code><strong>disabled</strong></code> property to use a control for display purposes only
+ </p>
+ <table cellspacing="5" width="100%">
+ <tr>
+ <td valign="top">
+ <pre class="code"><code class="html"><input name="star3" type="radio" class="star" disabled="disabled"/>
+ <input name="star3" type="radio" class="star" disabled="disabled"/>
+ <input name="star3" type="radio" class="star" disabled="disabled" checked="checked"/>
+ <input name="star3" type="radio" class="star" disabled="disabled"/>
+ <input name="star3" type="radio" class="star" disabled="disabled"/></code></pre>
+ </td>
+ <td valign="top" width="10">»</td>
+ <td valign="top" width="180">
+ <input name="star3" type="radio" class="star" disabled="disabled"/>
+ <input name="star3" type="radio" class="star" disabled="disabled"/>
+ <input name="star3" type="radio" class="star" disabled="disabled" checked="checked"/>
+ <input name="star3" type="radio" class="star" disabled="disabled"/>
+ <input name="star3" type="radio" class="star" disabled="disabled"/>
+ </td>
+ </tr>
+ </table>
+
+ <h2>What about split stars and 'half ratings'???</h2>
+ <p>
+ Use metadata plugin to pass advanced settings to the plugin via the class property.
+ </p>
+ <table cellspacing="5" width="100%">
+ <tr>
+ <td valign="top">
+ <pre class="code"><code class="html"><input name="adv1" type="radio" class="star {split:4}"/>
+ <input name="adv1" type="radio" class="star {split:4}"/>
+ <input name="adv1" type="radio" class="star {split:4}"/>
+ <input name="adv1" type="radio" class="star {split:4}"/>
+ <input name="adv1" type="radio" class="star {split:4}" checked="checked"/>
+ <input name="adv1" type="radio" class="star {split:4}"/>
+ <input name="adv1" type="radio" class="star {split:4}"/>
+ <input name="adv1" type="radio" class="star {split:4}"/></code></pre>
+ </td>
+ <td valign="top" width="10">»</td>
+ <td valign="top" width="180">
+ <input name="adv1" type="radio" class="star {split:4}"/>
+ <input name="adv1" type="radio" class="star {split:4}"/>
+ <input name="adv1" type="radio" class="star {split:4}"/>
+ <input name="adv1" type="radio" class="star {split:4}"/>
+ <input name="adv1" type="radio" class="star {split:4}" checked="checked"/>
+ <input name="adv1" type="radio" class="star {split:4}"/>
+ <input name="adv1" type="radio" class="star {split:4}"/>
+ <input name="adv1" type="radio" class="star {split:4}"/>
+ </td>
+ </tr>
+ </table>
+
+ <p>
+ Use custom selector
+ </p>
+ <table cellspacing="5" width="100%">
+ <tr>
+ <td valign="top">
+ <script>$(function(){ // wait for document to load
+ $('input.wow').rating();
+ });</script>
+ <pre class="code"><code class="js">$(function(){ // wait for document to load
+ $('input.wow').rating();
+ });</code></pre>
+ <pre class="code"><code class="html"><input name="adv2" type="radio" class="wow {split:4}"/>
+ <input name="adv2" type="radio" class="wow {split:4}"/>
+ <input name="adv2" type="radio" class="wow {split:4}"/>
+ <input name="adv2" type="radio" class="wow {split:4}"/>
+ <input name="adv2" type="radio" class="wow {split:4}" checked="checked"/>
+ <input name="adv2" type="radio" class="wow {split:4}"/>
+ <input name="adv2" type="radio" class="wow {split:4}"/>
+ <input name="adv2" type="radio" class="wow {split:4}"/></code></pre>
+ </td>
+ <td valign="top" width="10">»</td>
+ <td valign="top" width="180">
+ <input name="adv2" type="radio" class="wow {split:4}"/>
+ <input name="adv2" type="radio" class="wow {split:4}"/>
+ <input name="adv2" type="radio" class="wow {split:4}"/>
+ <input name="adv2" type="radio" class="wow {split:4}"/>
+ <input name="adv2" type="radio" class="wow {split:4}" checked="checked"/>
+ <input name="adv2" type="radio" class="wow {split:4}"/>
+ <input name="adv2" type="radio" class="wow {split:4}"/>
+ <input name="adv2" type="radio" class="wow {split:4}"/>
+ </td>
+ </tr>
+ </table>
+ </div><!--// tab-Overview //-->
+
+ <div id="tab-Testing">
+ <h2>Test Suite</h2>
+ <script type="text/javascript" language="javascript">
+ $(function(){
+ $('#form1 :radio.star').rating();
+ $('#form2 :radio.star').rating({cancel: 'Cancel', cancelValue: '0'});
+ $('#form3 :radio.star').rating();
+ $('#form4 :radio.star').rating();
+ });
+ </script>
+ <script>
+ $(function(){
+ $('#tab-Testing form').submit(function(){
+$('.test',this).html('');
+$('input',this).each(function(){
+ if(this.checked) $('.test',this.form).append(''+this.name+': '+this.value+'<br/>');
+ });
+return false;
+ });
+ });
+ </script>
+
+ <div class="Clear"> </div>
+ <form id="form1">
+ <strong style='font-size:150%'>Test 1</strong> - A blank form
+ <table width="100%" cellspacing="10"> <tr>
+<td valign="top" width="">
+ <table width="100%">
+ <tr>
+ <td valign="top" width="50%">
+ <div class="Clear">
+ Rating 1:
+ (N/M/Y)
+ <input class="star" type="radio" name="test-1-rating-1" value="N" title="No"/>
+ <input class="star" type="radio" name="test-1-rating-1" value="M" title="Maybe"/>
+ <input class="star" type="radio" name="test-1-rating-1" value="Y" title="Yes"/>
+ </div>
+ <br/>
+ <div class="Clear">
+ Rating 2:
+ (10 - 50)
+ <input class="star" type="radio" name="test-1-rating-2" value="10"/>
+ <input class="star" type="radio" name="test-1-rating-2" value="20"/>
+ <input class="star" type="radio" name="test-1-rating-2" value="30"/>
+ <input class="star" type="radio" name="test-1-rating-2" value="40"/>
+ <input class="star" type="radio" name="test-1-rating-2" value="50"/>
+ </div>
+ <br/>
+ <div class="Clear">
+ Rating 3:
+ (1 - 7)
+ <input class="star" type="radio" name="test-1-rating-3" value="1"/>
+ <input class="star" type="radio" name="test-1-rating-3" value="2"/>
+ <input class="star" type="radio" name="test-1-rating-3" value="3"/>
+ <input class="star" type="radio" name="test-1-rating-3" value="4"/>
+ <input class="star" type="radio" name="test-1-rating-3" value="5"/>
+ <input class="star" type="radio" name="test-1-rating-3" value="6"/>
+ <input class="star" type="radio" name="test-1-rating-3" value="7"/>
+ </div>
+</td>
+ <td valign="top" width="50%">
+ <div class="Clear">
+ Rating 4:
+ (1 - 5)
+ <input class="star" type="radio" name="test-1-rating-4" value="1" title="Worst"/>
+ <input class="star" type="radio" name="test-1-rating-4" value="2" title="Bad"/>
+ <input class="star" type="radio" name="test-1-rating-4" value="3" title="OK"/>
+ <input class="star" type="radio" name="test-1-rating-4" value="4" title="Good"/>
+ <input class="star" type="radio" name="test-1-rating-4" value="5" title="Best"/>
+ </div>
+ <br/>
+ <div class="Clear">
+ Rating 5:
+ (1 - 5)
+ <input class="star" type="radio" name="test-1-rating-5" value="1"/>
+ <input class="star" type="radio" name="test-1-rating-5" value="2"/>
+ <input class="star" type="radio" name="test-1-rating-5" value="3"/>
+ <input class="star" type="radio" name="test-1-rating-5" value="4"/>
+ <input class="star" type="radio" name="test-1-rating-5" value="5"/>
+ </div>
+ <br/>
+ <div class="Clear">
+ Rating 6 (readonly):
+ (1 - 5)
+ <input class="star" type="radio" name="test-1-rating-6" value="1" disabled="disabled"/>
+ <input class="star" type="radio" name="test-1-rating-6" value="2" disabled="disabled"/>
+ <input class="star" type="radio" name="test-1-rating-6" value="3" disabled="disabled"/>
+ <input class="star" type="radio" name="test-1-rating-6" value="4" disabled="disabled"/>
+ <input class="star" type="radio" name="test-1-rating-6" value="5" disabled="disabled"/>
+ </div>
+ </td>
+ </tr>
+ </table>
+</td>
+<td valign="top" width="5"> </td> <td valign="top" width="50">
+ <input type="submit" value="Submit scores!" /> </td>
+<td valign="top" width="5"> </td> <td valign="top" width="160">
+ <u>Test results</u>:<br/><br/>
+ <div class="test Smaller">
+ <span style="color:#FF0000">Results will be displayed here</span>
+ </div>
+</td>
+ </tr>
+ </table>
+ </form>
+
+ <div class="Clear"> </div><div class="Clear"> </div>
+
+ <form id="form2">
+ <strong style='font-size:150%'>Test 2</strong> - With defaults ('checked')
+ <table width="100%" cellspacing="10"> <tr>
+<td valign="top" width="">
+ <table width="100%">
+ <tr>
+ <td valign="top" width="50%">
+ <div class="Clear">
+ Rating 1:
+ (N/M/Y, default M)
+ </div>
+ <div class="Clear">
+ <input class="star" type="radio" name="test-2-rating-1" value="N" title="No"/>
+ <input class="star" type="radio" name="test-2-rating-1" value="M" title="Maybe" checked="checked"/>
+ <input class="star" type="radio" name="test-2-rating-1" value="Y" title="Yes"/>
+ </div>
+ <div class="Clear">
+ Rating 2:
+ (10 - 50, default 30)
+ </div>
+ <div class="Clear">
+ <input class="star" type="radio" name="test-2-rating-2" value="10"/>
+ <input class="star" type="radio" name="test-2-rating-2" value="20"/>
+ <input class="star" type="radio" name="test-2-rating-2" value="30" checked="checked"/>
+ <input class="star" type="radio" name="test-2-rating-2" value="40"/>
+ <input class="star" type="radio" name="test-2-rating-2" value="50"/>
+ </div>
+ <div class="Clear">
+ Rating 3:
+ (1 - 7, default 4)
+ </div>
+ <div class="Clear">
+ <input class="star" type="radio" name="test-2-rating-3" value="1"/>
+ <input class="star" type="radio" name="test-2-rating-3" value="2"/>
+ <input class="star" type="radio" name="test-2-rating-3" value="3"/>
+ <input class="star" type="radio" name="test-2-rating-3" value="4" checked="checked"/>
+ <input class="star" type="radio" name="test-2-rating-3" value="5"/>
+ <input class="star" type="radio" name="test-2-rating-3" value="6"/>
+ <input class="star" type="radio" name="test-2-rating-3" value="7"/>
+ </div>
+</td>
+ <td valign="top" width="50%">
+ <div class="Clear">
+ Rating 4:
+ (1 - 5, default 1)
+ </div>
+ <div class="Clear">
+ <input class="star" type="radio" name="test-2-rating-4" value="1" title="Worst" checked="checked"/>
+ <input class="star" type="radio" name="test-2-rating-4" value="2" title="Bad"/>
+ <input class="star" type="radio" name="test-2-rating-4" value="3" title="OK"/>
+ <input class="star" type="radio" name="test-2-rating-4" value="4" title="Good"/>
+ <input class="star" type="radio" name="test-2-rating-4" value="5" title="Best"/>
+ </div>
+ <div class="Clear">
+ Rating 5:
+ (1 - 5, default 5)
+ </div>
+ <div class="Clear">
+ <input class="star" type="radio" name="test-2-rating-5" value="1"/>
+ <input class="star" type="radio" name="test-2-rating-5" value="2"/>
+ <input class="star" type="radio" name="test-2-rating-5" value="3"/>
+ <input class="star" type="radio" name="test-2-rating-5" value="4"/>
+ <input class="star" type="radio" name="test-2-rating-5" value="5" checked="checked"/>
+ </div>
+ <div class="Clear">
+ Rating 6 (readonly):
+ (1 - 5, default 3)
+ </div>
+ <div class="Clear">
+ <input class="star" type="radio" name="test-2-rating-6" value="1" disabled="disabled"/>
+ <input class="star" type="radio" name="test-2-rating-6" value="2" disabled="disabled"/>
+ <input class="star" type="radio" name="test-2-rating-6" value="3" disabled="disabled" checked="checked"/>
+ <input class="star" type="radio" name="test-2-rating-6" value="4" disabled="disabled"/>
+ <input class="star" type="radio" name="test-2-rating-6" value="5" disabled="disabled"/>
+ </div>
+</td>
+ </tr>
+ </table>
+</td>
+<td valign="top" width="5"> </td> <td valign="top" width="50">
+ <input type="submit" value="Submit scores!" /> </td>
+<td valign="top" width="5"> </td> <td valign="top" width="160">
+ <u>Test results</u>:<br/><br/>
+ <div class="test Smaller">
+ <span style="color:#FF0000">Results will be displayed here</span>
+ </div>
+</td>
+ </tr>
+ </table>
+ </form>
+
+ <div class="Clear"> </div><div class="Clear"> </div>
+
+ <form id="form3A">
+ <script>
+ $(function(){
+ $('.auto-submit-star').rating({
+callback: function(value, link){
+ // 'this' is the hidden form element holding the current value
+ // 'value' is the value selected
+ // 'element' points to the link element that received the click.
+ alert("The value selected was '" + value + "'\n\nWith this callback function I can automatically submit the form with this code:\nthis.form.submit();");
+
+ // To submit the form automatically:
+ //this.form.submit();
+
+ // To submit the form via ajax:
+ //$(this.form).ajaxSubmit();
+}
+ });
+ });
+ </script>
+ <strong style='font-size:150%'>Test 3-A</strong> - With callback
+ <table width="100%" cellspacing="10"> <tr>
+<td valign="top" width="">
+ <div class="Clear">
+ Rating 1:
+ (1 - 3, default 2)
+ <input class="auto-submit-star" type="radio" name="test-3A-rating-1" value="1"/>
+ <input class="auto-submit-star" type="radio" name="test-3A-rating-1" value="2" checked="checked"/>
+ <input class="auto-submit-star" type="radio" name="test-3A-rating-1" value="3"/>
+ </div>
+ <div class="Clear">
+ <pre class="code"><code class="js">$('.auto-submit-star').rating({
+callback: function(value, link){
+ alert(value);
+}
+ });</code></pre>
+ </div>
+</td>
+<td valign="top" width="5"> </td> <td valign="top" width="50">
+ <input type="submit" value="Submit scores!" /> </td>
+<td valign="top" width="5"> </td> <td valign="top" width="160">
+ <u>Test results</u>:<br/><br/>
+ <div class="test Smaller">
+ <span style="color:#FF0000">Results will be displayed here</span>
+ </div>
+</td>
+ </tr>
+ </table>
+ </form>
+
+ <div class="Clear"> </div><div class="Clear"> </div>
+
+ <script>
+ $(function(){
+ $('.hover-star').rating({
+focus: function(value, link){
+ // 'this' is the hidden form element holding the current value
+ // 'value' is the value selected
+ // 'element' points to the link element that received the click.
+ var tip = $('#hover-test');
+ tip[0].data = tip[0].data || tip.html();
+ tip.html(link.title || 'value: '+value);
+},
+blur: function(value, link){
+ var tip = $('#hover-test');
+ $('#hover-test').html(tip[0].data || '');
+}
+ });
+ });
+ </script>
+ <form id="form3B">
+ <strong style='font-size:150%'>Test 3-B</strong> - With hover effects
+ <table width="100%" cellspacing="10"> <tr>
+<td valign="top" width="">
+ <div class="Clear">
+ Rating 1:
+ (1 - 3, default 2)
+ <div>
+ <input class="hover-star" type="radio" name="test-3B-rating-1" value="1" title="Very poor"/>
+ <input class="hover-star" type="radio" name="test-3B-rating-1" value="2" title="Poor"/>
+ <input class="hover-star" type="radio" name="test-3B-rating-1" value="3" title="OK"/>
+ <input class="hover-star" type="radio" name="test-3B-rating-1" value="4" title="Good"/>
+ <input class="hover-star" type="radio" name="test-3B-rating-1" value="5" title="Very Good"/>
+ <span id="hover-test" style="margin:0 0 0 20px;">Hover tips will appear in here</span>
+ </div>
+ </div>
+ <div class="Clear">
+ <pre class="code"><code class="js">$('.hover-star').rating({
+focus: function(value, link){
+ var tip = $('#hover-test');
+ tip[0].data = tip[0].data || tip.html();
+ tip.html(link.title || 'value: '+value);
+},
+blur: function(value, link){
+ var tip = $('#hover-test');
+ $('#hover-test').html(tip[0].data || '');
+}
+ });</code></pre>
+ </div>
+</td>
+<td valign="top" width="5"> </td> <td valign="top" width="50">
+ <input type="submit" value="Submit scores!" /> </td>
+<td valign="top" width="5"> </td> <td valign="top" width="160">
+ <u>Test results</u>:<br/><br/>
+ <div class="test Smaller">
+ <span style="color:#FF0000">Results will be displayed here</span>
+ </div>
+</td>
+ </tr>
+ </table>
+ </form>
+
+ <div class="Clear"> </div><div class="Clear"> </div>
+
+ <form id="form4">
+ <strong style='font-size:150%'>Test 4</strong> - <strong>Half Stars</strong> and <strong>Split Stars</strong>
+ <table width="100%" cellspacing="10"> <tr>
+<td valign="top" width="">
+ <table width="100%">
+ <tr>
+ <td width="50%">
+ <div class="Clear">
+ Rating 1:
+ (N/M/Y/?)
+ <div><small><pre class="code"><code class="html"><input class="star {half:true}"</code></pre></small></div>
+ <input class="star {half:true}" type="radio" name="test-4-rating-1" value="N" title="No"/>
+ <input class="star {half:true}" type="radio" name="test-4-rating-1" value="M" title="Maybe"/>
+ <input class="star {half:true}" type="radio" name="test-4-rating-1" value="Y" title="Yes"/>
+ <input class="star {half:true}" type="radio" name="test-4-rating-1" value="?" title="Don't Know"/>
+ </div>
+ <br/>
+ <div class="Clear">
+ Rating 2:
+ (10 - 60)
+ <div><small><pre class="code"><code class="html"><input class="star {split:3}"</code></pre></small></div>
+ <input class="star {split:3}" type="radio" name="test-4-rating-2" value="10"/>
+ <input class="star {split:3}" type="radio" name="test-4-rating-2" value="20"/>
+ <input class="star {split:3}" type="radio" name="test-4-rating-2" value="30"/>
+ <input class="star {split:3}" type="radio" name="test-4-rating-2" value="40"/>
+ <input class="star {split:3}" type="radio" name="test-4-rating-2" value="50"/>
+ <input class="star {split:3}" type="radio" name="test-4-rating-2" value="60"/>
+ </div>
+ <br/>
+ <div class="Clear">
+ Rating 3:
+ (0-5.0, default 3.5)
+ <div><small><pre class="code"><code class="html"><input class="star {split:2}"</code></pre></small></div>
+ <input class="star {split:2}" type="radio" name="test-4-rating-3" value="0.5"/>
+ <input class="star {split:2}" type="radio" name="test-4-rating-3" value="1.0"/>
+ <input class="star {split:2}" type="radio" name="test-4-rating-3" value="1.5"/>
+ <input class="star {split:2}" type="radio" name="test-4-rating-3" value="2.0"/>
+ <input class="star {split:2}" type="radio" name="test-4-rating-3" value="2.5"/>
+ <input class="star {split:2}" type="radio" name="test-4-rating-3" value="3.0"/>
+ <input class="star {split:2}" type="radio" name="test-4-rating-3" value="3.5" checked="checked"/>
+ <input class="star {split:2}" type="radio" name="test-4-rating-3" value="4.0"/>
+ <input class="star {split:2}" type="radio" name="test-4-rating-3" value="4.5"/>
+ <input class="star {split:2}" type="radio" name="test-4-rating-3" value="5.0"/>
+ </div>
+</td>
+<td valign="top" width="50%">
+ <div class="Clear">
+ Rating 4:
+ (1-6, default 5)
+ <div><small><pre class="code"><code class="html"><input class="star {split:2}"</code></pre></small></div>
+ <input class="star {split:2}" type="radio" name="test-4-rating-4" value="1" title="Worst"/>
+ <input class="star {split:2}" type="radio" name="test-4-rating-4" value="2" title="Bad"/>
+ <input class="star {split:2}" type="radio" name="test-4-rating-4" value="3" title="OK"/>
+ <input class="star {split:2}" type="radio" name="test-4-rating-4" value="4" title="Good"/>
+ <input class="star {split:2}" type="radio" name="test-4-rating-4" value="5" title="Best" checked="checked"/>
+ <input class="star {split:2}" type="radio" name="test-4-rating-4" value="6" title="Bestest!!!"/>
+ </div>
+ <br/>
+ <div class="Clear">
+ Rating 5:
+ (1-20, default 11)
+ <div><small><pre class="code"><code class="html"><input class="star {split:4}"</code></pre></small></div>
+ <input class="star {split:4}" type="radio" name="test-4-rating-5" value="1"/>
+ <input class="star {split:4}" type="radio" name="test-4-rating-5" value="2"/>
+ <input class="star {split:4}" type="radio" name="test-4-rating-5" value="3"/>
+ <input class="star {split:4}" type="radio" name="test-4-rating-5" value="4"/>
+ <input class="star {split:4}" type="radio" name="test-4-rating-5" value="5"/>
+ <input class="star {split:4}" type="radio" name="test-4-rating-5" value="6"/>
+ <input class="star {split:4}" type="radio" name="test-4-rating-5" value="7"/>
+ <input class="star {split:4}" type="radio" name="test-4-rating-5" value="8"/>
+ <input class="star {split:4}" type="radio" name="test-4-rating-5" value="9"/>
+ <input class="star {split:4}" type="radio" name="test-4-rating-5" value="10"/>
+ <input class="star {split:4}" type="radio" name="test-4-rating-5" value="11" checked="checked"/>
+ <input class="star {split:4}" type="radio" name="test-4-rating-5" value="12"/>
+ <input class="star {split:4}" type="radio" name="test-4-rating-5" value="13"/>
+ <input class="star {split:4}" type="radio" name="test-4-rating-5" value="14"/>
+ <input class="star {split:4}" type="radio" name="test-4-rating-5" value="15"/>
+ <input class="star {split:4}" type="radio" name="test-4-rating-5" value="16"/>
+ <input class="star {split:4}" type="radio" name="test-4-rating-5" value="17"/>
+ <input class="star {split:4}" type="radio" name="test-4-rating-5" value="18"/>
+ <input class="star {split:4}" type="radio" name="test-4-rating-5" value="19"/>
+ <input class="star {split:4}" type="radio" name="test-4-rating-5" value="20"/>
+ </div>
+ <br/>
+ <div class="Clear">
+ Rating 6 (readonly):
+ (1-20, default 13)
+ <div><small><pre class="code"><code class="html"><input class="star {split:4}"</code></pre></small></div>
+ <input class="star {split:4}" type="radio" name="test-4-rating-6" value="1" disabled="disabled"/>
+ <input class="star {split:4}" type="radio" name="test-4-rating-6" value="2" disabled="disabled"/>
+ <input class="star {split:4}" type="radio" name="test-4-rating-6" value="3" disabled="disabled"/>
+ <input class="star {split:4}" type="radio" name="test-4-rating-6" value="4" disabled="disabled"/>
+ <input class="star {split:4}" type="radio" name="test-4-rating-6" value="5" disabled="disabled"/>
+ <input class="star {split:4}" type="radio" name="test-4-rating-6" value="6" disabled="disabled"/>
+ <input class="star {split:4}" type="radio" name="test-4-rating-6" value="7" disabled="disabled"/>
+ <input class="star {split:4}" type="radio" name="test-4-rating-6" value="8" disabled="disabled"/>
+ <input class="star {split:4}" type="radio" name="test-4-rating-6" value="9" disabled="disabled"/>
+ <input class="star {split:4}" type="radio" name="test-4-rating-6" value="10" disabled="disabled"/>
+ <input class="star {split:4}" type="radio" name="test-4-rating-6" value="11" disabled="disabled"/>
+ <input class="star {split:4}" type="radio" name="test-4-rating-6" value="12" disabled="disabled"/>
+ <input class="star {split:4}" type="radio" name="test-4-rating-6" value="13" disabled="disabled" checked="checked"/>
+ <input class="star {split:4}" type="radio" name="test-4-rating-6" value="14" disabled="disabled"/>
+ <input class="star {split:4}" type="radio" name="test-4-rating-6" value="15" disabled="disabled"/>
+ <input class="star {split:4}" type="radio" name="test-4-rating-6" value="16" disabled="disabled"/>
+ <input class="star {split:4}" type="radio" name="test-4-rating-6" value="17" disabled="disabled"/>
+ <input class="star {split:4}" type="radio" name="test-4-rating-6" value="18" disabled="disabled"/>
+ <input class="star {split:4}" type="radio" name="test-4-rating-6" value="19" disabled="disabled"/>
+ <input class="star {split:4}" type="radio" name="test-4-rating-6" value="20" disabled="disabled"/>
+ </div>
+ </td>
+ </tr>
+ </table>
+</td>
+<td valign="top" width="5"> </td> <td valign="top" width="50">
+ <input type="submit" value="Submit scores!" /> </td>
+<td valign="top" width="5"> </td> <td valign="top" width="160">
+ <u>Test results</u>:<br/><br/>
+ <div class="test Smaller">
+ <span style="color:#FF0000">Results will be displayed here</span>
+ </div>
+</td>
+ </tr>
+ </table>
+ </form>
+ </div><!--// tab-Testing //-->
+
+ <div id="tab-API">
+ <h2>API</h2>
+ <p class="B Yes">NEW to v3</p>
+
+ <p>API methods can be invoked this this:</p>
+ <div><pre class="code"><code class="js">$(selector).rating(
+ 'method', // method name
+ [] // method arguments (not required)
+ );</code></pre></div>
+
+ <br/><br/><br/>
+
+ <h3>$().rating('select', index / value)</h3>
+ <p>
+ Use this method to set the value (and display) of the star rating control
+ via javascript. It accepts the index of the star you want to select (0 based)
+ or its value (which must be passed as a string.
+ </p>
+ <p>
+ Example: (values A/B/C/D/E)
+ </p>
+ <form name="api-select">
+ <input type="radio" class="star" name="api-select-test" value="A"/>
+ <input type="radio" class="star" name="api-select-test" value="B"/>
+ <input type="radio" class="star" name="api-select-test" value="C"/>
+ <input type="radio" class="star" name="api-select-test" value="D"/>
+ <input type="radio" class="star" name="api-select-test" value="E"/>
+ <input type="button" value="Submit »" onClick="
+ $(this).next().html( $(this.form).serialize() || '(nothing submitted)' );
+ "/>
+ <span></span>
+ <br/>
+ By index:
+ <input type="button" onClick="javascript:$('input',this.form).rating('select',0)" value="0"/>
+ <input type="button" onClick="javascript:$('input',this.form).rating('select',1)" value="1"/>
+ <input type="button" onClick="javascript:$('input',this.form).rating('select',2)" value="2"/>
+ <input type="button" onClick="javascript:$('input',this.form).rating('select',3)" value="3"/>
+ <input type="button" onClick="javascript:$('input',this.form).rating('select',4)" value="4"/>
+ eg.: $('input').rating('select',3)
+ <br/>
+ By value:
+ <input type="button" onClick="javascript:$('input',this.form).rating('select',this.value)" value="A"/>
+ <input type="button" onClick="javascript:$('input',this.form).rating('select',this.value)" value="B"/>
+ <input type="button" onClick="javascript:$('input',this.form).rating('select',this.value)" value="C"/>
+ <input type="button" onClick="javascript:$('input',this.form).rating('select',this.value)" value="D"/>
+ <input type="button" onClick="javascript:$('input',this.form).rating('select',this.value)" value="E"/>
+ eg.: $('input').rating('select','C')
+ </form>
+
+ <br/><br/><br/>
+
+ <h3>$().rating('readOnly', true / false)</h3>
+ <p>
+ Use this method to set the value (and display) of the star rating control
+ via javascript. It accepts the index of the star you want to select (0 based)
+ or its value (which must be passed as a string.
+ </p>
+ <p>
+ Example: (values 1,2,3...10)
+ </p>
+ <form name="api-readonly">
+ <input type="radio" class="star {split:2}" name="api-readonly-test" value="1"/>
+ <input type="radio" class="star {split:2}" name="api-readonly-test" value="2"/>
+ <input type="radio" class="star {split:2}" name="api-readonly-test" value="3"/>
+ <input type="radio" class="star {split:2}" name="api-readonly-test" value="4"/>
+ <input type="radio" class="star {split:2}" name="api-readonly-test" value="5"/>
+ <input type="radio" class="star {split:2}" name="api-readonly-test" value="6"/>
+ <input type="radio" class="star {split:2}" name="api-readonly-test" value="7"/>
+ <input type="radio" class="star {split:2}" name="api-readonly-test" value="8"/>
+ <input type="radio" class="star {split:2}" name="api-readonly-test" value="9"/>
+ <input type="radio" class="star {split:2}" name="api-readonly-test" value="10"/>
+ <input type="button" value="Submit »" onClick="
+ $(this).next().html( $(this.form).serialize() || '(nothing submitted)' );
+ "/>
+ <span></span>
+ <br/>
+ <input type="button" onClick="javascript:$('input',this.form).rating('readOnly',true)" value="Set readOnly = true"/>
+ eg.: $('input').rating('readOnly',true)
+ <br/>
+ <input type="button" onClick="javascript:$('input',this.form).rating('readOnly',false)" value="Set readOnly = false"/>
+ eg.: $('input').rating('readOnly',false) or simply $('input').rating('readOnly');
+ </form>
+
+ <br/><br/><br/>
+
+ <h3>$().rating('disable') / $().rating('enable')</h3>
+ <p>
+ These methods bahve almost exactly as the readOnly method, however
+ they also control whether or not the select value is submitted with
+ the form.
+ </p>
+ <p>
+ Example: (values 1,2,3...10)
+ </p>
+ <form name="api-readonly">
+ <input type="radio" class="star {split:2}" name="api-readonly-test" value="1"/>
+ <input type="radio" class="star {split:2}" name="api-readonly-test" value="2"/>
+ <input type="radio" class="star {split:2}" name="api-readonly-test" value="3"/>
+ <input type="radio" class="star {split:2}" name="api-readonly-test" value="4"/>
+ <input type="radio" class="star {split:2}" name="api-readonly-test" value="5"/>
+ <input type="radio" class="star {split:2}" name="api-readonly-test" value="6"/>
+ <input type="radio" class="star {split:2}" name="api-readonly-test" value="7"/>
+ <input type="radio" class="star {split:2}" name="api-readonly-test" value="8"/>
+ <input type="radio" class="star {split:2}" name="api-readonly-test" value="9"/>
+ <input type="radio" class="star {split:2}" name="api-readonly-test" value="10"/>
+ <input type="button" value="Submit »" onClick="
+ $(this).next().html( $(this.form).serialize() || '(nothing submitted)' );
+ "/>
+ <span></span>
+ <br/>
+ <input type="button" onClick="javascript:$('input',this.form).rating('disable')" value="disable"/>
+ eg.: $('input').rating('disable')
+ <br/>
+ <input type="button" onClick="javascript:$('input',this.form).rating('enable')" value="enable"/>
+ eg.: $('input').rating('enable');
+ </form>
+ </div><!--// tab-API //-->
+
</body>
</html>
\ No newline at end of file |