Fix up star ratings.

3 files changed, 12 insertions, 561 deletions

diff --git a/samples/src/main/java/gwtquery/samples/client/GwtQueryBenchModule.java b/samples/src/main/java/gwtquery/samples/client/GwtQueryBenchModule.java
index fbf4512c..486de751 100644
--- a/samples/src/main/java/gwtquery/samples/client/GwtQueryBenchModule.java
+++ b/samples/src/main/java/gwtquery/samples/client/GwtQueryBenchModule.java
@@ -23,7 +23,7 @@ public class GwtQueryBenchModule implements EntryPoint {
 

   private static final String JQUERY = "jquery";

 

-  private static final String GDYNAMIC = "gwtdynamic";

+  private static final String GDYNAMIC = "gwt";

 

   private static final String DOJO = "dojo";

 

@@ -40,7 +40,7 @@ public class GwtQueryBenchModule implements EntryPoint {
     h.addClickHandler(new ClickHandler() {

       public void onClick(ClickEvent clickEvent) {

 

-        runBenchmarks(dg, new GQueryCompiledBenchmark(), new JQueryBenchmark(),

+        runBenchmarks(dg, new GQueryDynamicBenchmark(), new JQueryBenchmark(),

             new DojoBenchmark(), new PrototypeBenchmark());

       }

     });

diff --git a/samples/src/main/java/gwtquery/samples/client/GwtQuerySampleModule.java b/samples/src/main/java/gwtquery/samples/client/GwtQuerySampleModule.java
index 9ab09fcf..7a8f20c0 100644
--- a/samples/src/main/java/gwtquery/samples/client/GwtQuerySampleModule.java
+++ b/samples/src/main/java/gwtquery/samples/client/GwtQuerySampleModule.java
@@ -43,7 +43,15 @@ public class GwtQuerySampleModule implements EntryPoint {
     });

     $(".note").click(lazy().fadeOut().done());

     $(".note").append(" Hello");

+    $(".outer").eq(0).after("<button id='enhance'>Enhance</button>");

+    $("#enhance").one(Event.ONCLICK, null, new Function() {

+      @Override

+      public boolean f(Event e) {

+        $(e).attr("disabled", "true");

+        $("input").as(Ratings.Ratings).rating();

+        return true;

+      }

+    });

 

-    $("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 db6fbc95..c0f50b1d 100644
--- a/samples/src/main/java/gwtquery/samples/public/GwtQuerySample.html
+++ b/samples/src/main/java/gwtquery/samples/public/GwtQuerySample.html
@@ -176,564 +176,7 @@
    </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">&nbsp;</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">&nbsp;</td>  <td valign="top" width="50">

- <input type="submit" value="Submit scores!" />  </td>

-<td valign="top" width="5">&nbsp;</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">&nbsp;</div><div class="Clear">&nbsp;</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">&nbsp;</td>  <td valign="top" width="50">

- <input type="submit" value="Submit scores!" />  </td>

-<td valign="top" width="5">&nbsp;</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">&nbsp;</div><div class="Clear">&nbsp;</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">&nbsp;</td>  <td valign="top" width="50">

- <input type="submit" value="Submit scores!" />  </td>

-<td valign="top" width="5">&nbsp;</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">&nbsp;</div><div class="Clear">&nbsp;</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">&nbsp;</td>  <td valign="top" width="50">

- <input type="submit" value="Submit scores!" />  </td>

-<td valign="top" width="5">&nbsp;</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">&nbsp;</div><div class="Clear">&nbsp;</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">&lt;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">&lt;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">&lt;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">&lt;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">&lt;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">&lt;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">&nbsp;</td>  <td valign="top" width="50">

- <input type="submit" value="Submit scores!" />  </td>

-<td valign="top" width="5">&nbsp;</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 &raquo;" 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 &raquo;" 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 &raquo;" 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>