Fix up star ratings.

diff --git a/gwtquery-core/src/main/java/com/google/gwt/query/client/Properties.java b/gwtquery-core/src/main/java/com/google/gwt/query/client/Properties.java
index 59e2da10c704bf506b4e7c33581d8734aaa83ce0..225cb51c99aa21bcf8fc3521e3f302819bb8d4de 100644 (file)
--- a/gwtquery-core/src/main/java/com/google/gwt/query/client/Properties.java
+++ b/gwtquery-core/src/main/java/com/google/gwt/query/client/Properties.java
@@ -48,6 +48,10 @@ public class Properties extends JavaScriptObject {
     return props;\r
   }-*/;\r
 \r
+  public final native boolean defined(String name) /*-{\r
+    return this[name] != undefined;  \r
+  }-*/;\r
+\r
   public final native String get(String name) /*-{\r
     return this[name];\r
   }-*/;\r

diff --git a/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/Ratings.java b/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/Ratings.java
index fc13d2e2dc692896ca6dfa9dfe46d67918f6bff9..ae8aa918342875b6f24295db79ce98b9e5d5c7d4 100644 (file)
--- a/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/Ratings.java
+++ b/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/Ratings.java
@@ -7,6 +7,8 @@ import com.google.gwt.query.client.Function;
 import com.google.gwt.query.client.GQuery;
 import com.google.gwt.query.client.JSArray;
 import com.google.gwt.query.client.Plugin;
+import com.google.gwt.query.client.Properties;
+import com.google.gwt.query.client.Regexp;
 import com.google.gwt.query.client.SelectorEngine;
 import com.google.gwt.user.client.Event;
 
@@ -71,6 +73,10 @@ public class Ratings extends GQuery {
       } else {
         control = new Control();
         control.setSerial(raters.bumpCount());
+        Properties metadata = getMetaData(input.get(0).getClassName());
+        if (metadata != null && metadata.defined("split")) {
+          control.setSplit(metadata.getInt("split"));
+        }
         // create rating element
         rater = $("<span class=\"star-rating-control\"/>");
         input.before(rater);
@@ -214,15 +220,26 @@ public class Ratings extends GQuery {
       rater.data("rating", control);
       star.data("rating", control);
       context.data("rating", raters);
-
-      // Initialize ratings (first draw)
-      $(".rating-to-be-drawn").as(Ratings).draw()
-          .removeClass("rating-to-be-drawn");
     }
+    // Initialize ratings (first draw)
+    $(".rating-to-be-drawn").as(Ratings).draw()
+        .removeClass("rating-to-be-drawn");
 
     return this;
   }
 
+  private Properties getMetaData(String className) {
+    if (className.indexOf("{") == -1) {
+      return Properties.createObject().cast();
+    }
+    Regexp re = new Regexp("{(.*)}");
+    JSArray match = re.exec(className);
+    if (match != null && match.size() > 1) {
+      return Properties.create(match.getStr(1));
+    }
+    return Properties.createObject().cast();
+  }
+
   public Ratings blurStar() {
     return this;
   }
@@ -237,122 +254,133 @@ public class Ratings extends GQuery {
   }
 
   public Ratings fill() {
-    Control control = (Control) this.data("rating");
-    if (control == null) {
-      return this;
-    }
-    // do not execute when control is in read-only mode
-    if (control.isReadOnly()) {
-      return this;
+    for (Element e : elements()) {
+      GQuery self = $(e);
+      Control control = nullControlIfShouldSkipStar(self);
+      if (control == null) {
+        continue;
+      }
+
+      // Reset all stars and highlight them up to this element
+      self.as(Ratings).drain();
+      self.prevAll().andSelf().filter(".rater-" + control.getSerial())
+          .addClass("star-rating-hover");
+
     }
-    // Reset all stars and highlight them up to this element
-    drain();
-    this.prevAll().andSelf().filter(".rater-" + control.getSerial())
-        .addClass("star-rating-hover");
+
     return this;
   }
 
   public Ratings draw() {
-    Control control = (Control) this.data("rating");
-    if (control == null) {
-      return this;
-    }
-    // do not execute when control is in read-only mode
-    if (control.isReadOnly()) {
-      return this;
-    }
-    // Clear all stars
-    this.drain();
-    // Set control value
-    if (control.getCurrent() != null) {
-      ((GQuery) control.current.data("rating.input"))
-          .attr("checked", "checked");
-      control.current.prevAll().andSelf().filter(".rater-" + control.serial)
-          .addClass("star-rating-on");
-    } else {
-      $(control.getInputs()).removeAttr("checked");
-    }
+    for (Element e : elements()) {
+      GQuery self = $(e);
+      Control control = nullControlIfShouldSkipStar(self);
+      if (control == null) {
+        continue;
+      }
 
-    // Show/hide 'cancel' button
+      // Clear all stars
+      self.as(Ratings).drain();
+      // Set control value
+      if (control.getCurrent() != null) {
+        ((GQuery) control.current.data("rating.input"))
+            .attr("checked", "checked");
+        control.current.prevAll().andSelf().filter(".rater-" + control.serial)
+            .addClass("star-rating-on");
+      } else {
+        $(control.getInputs()).removeAttr("checked");
+      }
+
+      // Show/hide 'cancel' button
 //                     control.cancel[control.readOnly || control.required?'hide':'show']();
-    // Add/remove read-only classes to remove hand pointer
-    this.siblings().toggleClass("star-rating-readonly", control.isReadOnly());
+      // Add/remove read-only classes to remove hand pointer
+      self.siblings().toggleClass("star-rating-readonly", control.isReadOnly());
+    }
+
     return this;
   }
 
   public Ratings selectStar(int value) {
-    Control control = (Control) this.data("rating");
-    if (control == null) {
-      return this;
-    }
-    // do not execute when control is in read-only mode
-    if (control.isReadOnly()) {
-      return this;
+    for (Element e : elements()) {
+      GQuery self = $(e);
+      Control control = nullControlIfShouldSkipStar(self);
+      if (control == null) {
+        continue;
+      }
+
+      control.setCurrent(null);
+      $(control.getStar(value)).as(Ratings).selectStar();
     }
-    control.setCurrent(null);
-    return $(control.getStar(value)).as(Ratings).selectStar();
+    return this;
   }
 
   public Ratings selectStar() {
-    Control control = (Control) this.data("rating");
-    if (control == null) {
-      return this;
-    }
-    // do not execute when control is in read-only mode
-    if (control.isReadOnly()) {
-      return this;
-    }
-
-    control.current = get(0).getTagName().equalsIgnoreCase("INPUT")
-        ? (GQuery) data("rating.star")
-        : is(".rater-" + control.getSerial()) ? this : null;
+    for (Element e : elements()) {
+      GQuery self = $(e);
+      Control control = nullControlIfShouldSkipStar(self);
+      if (control == null) {
+        continue;
+      }
 
-    // Update rating control state
-    data("rating", control);
-    // Update display
-    this.draw();
-    // find data for event
-    GQuery input = $(
-        control.current != null ? (GQuery) control.current.data("rating.input")
-            : null);
-    // click callback, as requested here: http://plugins.jquery.com/node/1655
+      control.current = self.get(0).getTagName().equalsIgnoreCase("INPUT")
+          ? (GQuery) self.data("rating.star")
+          : self.is(".rater-" + control.getSerial()) ? this : null;
+
+      // Update rating control state
+      self.data("rating", control);
+      // Update display
+      self.as(Ratings).draw();
+      // find data for event
+      GQuery input = $(control.current != null ? (GQuery) control.current
+          .data("rating.input") : null);
+      // click callback, as requested here: http://plugins.jquery.com/node/1655
 //                     if(control.callback) control.callback.apply(input[0], [input.val(), $('a', control.current)[0]]);// callback event
+    }
+
     return this;
   }
 
-  public Ratings selectStar(String value) {
-    Control control = (Control) this.data("rating");
+  private Control nullControlIfShouldSkipStar(GQuery q) {
+    Control control = (Control) q.data("rating");
     if (control == null) {
-      return this;
+      return null;
     }
     // do not execute when control is in read-only mode
     if (control.isReadOnly()) {
-      return this;
+      return null;
     }
-    control.setCurrent(null);
-
-    NodeList<Element> stars = control.getStars();
+    return control;
+  }
 
-    for (int i = 0; i < stars.getLength(); i++) {
-      String val = ((GQuery) $(stars.getItem(i)).data("rating.input")).val();
-      if (val != null && val.equals(value)) {
-        $(stars.getItem(i)).as(Ratings).selectStar();
+  public Ratings selectStar(String value) {
+    for (Element e : elements()) {
+      GQuery self = $(e);
+      Control control = nullControlIfShouldSkipStar(self);
+      if (control == null) {
+        continue;
+      }
+      control.setCurrent(null);
+      NodeList<Element> stars = control.getStars();
+      for (int i = 0; i < stars.getLength(); i++) {
+        String val = ((GQuery) $(stars.getItem(i)).data("rating.input")).val();
+        if (val != null && val.equals(value)) {
+          $(stars.getItem(i)).as(Ratings).selectStar();
+        }
       }
     }
     return this;
   }
 
   public Ratings drain() {
-    Control control = (Control) this.data("rating");
-    if (control == null) {
-      return this;
-    }
-    // do not execute when control is in read-only mode
-    if (control.isReadOnly()) {
-      return this;
+    for (Element e : elements()) {
+      GQuery self = $(e);
+      Control control = nullControlIfShouldSkipStar(self);
+      if (control == null) {
+        continue;
+      }
+      control.rater.children().filter(".rater-" + control.getSerial())
+          .removeClass("star-rating-on").removeClass("star-rating-hover");
     }
-    control.rater.children().filter(".rater-" + control.getSerial())
-        .removeClass("star-rating-on").removeClass("star-rating-hover");
     return this;
   }
 

diff --git a/samples/src/main/java/gwtquery/samples/client/GwtQueryBenchModule.java b/samples/src/main/java/gwtquery/samples/client/GwtQueryBenchModule.java
index fbf4512c27083ba1d531c3c422b67268edef7406..486de7514eb2b38e1983e6eb63c7c6e5203185d2 100644 (file)
--- 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 {
 \r
   private static final String JQUERY = "jquery";\r
 \r
-  private static final String GDYNAMIC = "gwtdynamic";\r
+  private static final String GDYNAMIC = "gwt";\r
 \r
   private static final String DOJO = "dojo";\r
 \r
@@ -40,7 +40,7 @@ public class GwtQueryBenchModule implements EntryPoint {
     h.addClickHandler(new ClickHandler() {\r
       public void onClick(ClickEvent clickEvent) {\r
 \r
-        runBenchmarks(dg, new GQueryCompiledBenchmark(), new JQueryBenchmark(),\r
+        runBenchmarks(dg, new GQueryDynamicBenchmark(), new JQueryBenchmark(),\r
             new DojoBenchmark(), new PrototypeBenchmark());\r
       }\r
     });\r

diff --git a/samples/src/main/java/gwtquery/samples/client/GwtQuerySampleModule.java b/samples/src/main/java/gwtquery/samples/client/GwtQuerySampleModule.java
index 9ab09fcf42771ee7e091654a2cafe580a4e09718..7a8f20c04092583fc83e73032d0d86beb490593a 100644 (file)
--- 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 {
     });\r
     $(".note").click(lazy().fadeOut().done());\r
     $(".note").append(" Hello");\r
+    $(".outer").eq(0).after("<button id='enhance'>Enhance</button>");\r
+    $("#enhance").one(Event.ONCLICK, null, new Function() {\r
+      @Override\r
+      public boolean f(Event e) {\r
+        $(e).attr("disabled", "true");\r
+        $("input").as(Ratings.Ratings).rating();\r
+        return true;\r
+      }\r
+    });\r
 \r
-    $("input").as(Ratings.Ratings).rating();\r
   }\r
 }\r

diff --git a/samples/src/main/java/gwtquery/samples/public/GwtQuerySample.html b/samples/src/main/java/gwtquery/samples/public/GwtQuerySample.html
index db6fbc95c5d769fab66220bd81e42de07434bb35..c0f50b1ded788b806aec7af1d729dbb8c3446d7f 100644 (file)
--- 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>\r
   </table>\r
  </div><!--// tab-Overview //-->\r
-   \r
- <div id="tab-Testing">\r
-  <h2>Test Suite</h2>\r
-  <script type="text/javascript" language="javascript">\r
-  $(function(){ \r
-   $('#form1 :radio.star').rating(); \r
-   $('#form2 :radio.star').rating({cancel: 'Cancel', cancelValue: '0'}); \r
-   $('#form3 :radio.star').rating(); \r
-   $('#form4 :radio.star').rating(); \r
-  });\r
-  </script>\r
-  <script>\r
-  $(function(){\r
-   $('#tab-Testing form').submit(function(){\r
-$('.test',this).html('');\r
-$('input',this).each(function(){\r
- if(this.checked) $('.test',this.form).append(''+this.name+': '+this.value+'<br/>');\r
-      });\r
-return false;\r
-   });\r
-  });\r
-  </script>\r
-\r
-  <div class="Clear">&nbsp;</div>\r
-  <form id="form1">\r
-  <strong style='font-size:150%'>Test 1</strong> - A blank form\r
-  <table width="100%" cellspacing="10"> <tr>\r
-<td valign="top" width="">\r
- <table width="100%">\r
-  <tr>\r
-   <td valign="top" width="50%">\r
-  <div class="Clear">\r
-  Rating 1:\r
-  (N/M/Y)\r
-  <input class="star" type="radio" name="test-1-rating-1" value="N" title="No"/>\r
-  <input class="star" type="radio" name="test-1-rating-1" value="M" title="Maybe"/>\r
-  <input class="star" type="radio" name="test-1-rating-1" value="Y" title="Yes"/>\r
- </div>\r
- <br/>\r
- <div class="Clear">\r
-  Rating 2:\r
-  (10 - 50)\r
-  <input class="star" type="radio" name="test-1-rating-2" value="10"/>\r
-  <input class="star" type="radio" name="test-1-rating-2" value="20"/>\r
-  <input class="star" type="radio" name="test-1-rating-2" value="30"/>\r
-  <input class="star" type="radio" name="test-1-rating-2" value="40"/>\r
-  <input class="star" type="radio" name="test-1-rating-2" value="50"/>\r
- </div>\r
- <br/>\r
- <div class="Clear">\r
-  Rating 3:\r
-  (1 - 7)\r
-  <input class="star" type="radio" name="test-1-rating-3" value="1"/>\r
-  <input class="star" type="radio" name="test-1-rating-3" value="2"/>\r
-  <input class="star" type="radio" name="test-1-rating-3" value="3"/>\r
-  <input class="star" type="radio" name="test-1-rating-3" value="4"/>\r
-  <input class="star" type="radio" name="test-1-rating-3" value="5"/>\r
-  <input class="star" type="radio" name="test-1-rating-3" value="6"/>\r
-  <input class="star" type="radio" name="test-1-rating-3" value="7"/>\r
- </div>\r
-</td>\r
-   <td valign="top" width="50%">\r
- <div class="Clear">\r
-  Rating 4:\r
-  (1 - 5)\r
-  <input class="star" type="radio" name="test-1-rating-4" value="1" title="Worst"/>\r
-  <input class="star" type="radio" name="test-1-rating-4" value="2" title="Bad"/>\r
-  <input class="star" type="radio" name="test-1-rating-4" value="3" title="OK"/>\r
-  <input class="star" type="radio" name="test-1-rating-4" value="4" title="Good"/>\r
-  <input class="star" type="radio" name="test-1-rating-4" value="5" title="Best"/>\r
- </div>\r
- <br/>\r
- <div class="Clear">\r
-  Rating 5:\r
-  (1 - 5)\r
-  <input class="star" type="radio" name="test-1-rating-5" value="1"/>\r
-  <input class="star" type="radio" name="test-1-rating-5" value="2"/>\r
-  <input class="star" type="radio" name="test-1-rating-5" value="3"/>\r
-  <input class="star" type="radio" name="test-1-rating-5" value="4"/>\r
-  <input class="star" type="radio" name="test-1-rating-5" value="5"/>\r
- </div>\r
- <br/>\r
- <div class="Clear">\r
-  Rating 6 (readonly):\r
-  (1 - 5)\r
-  <input class="star" type="radio" name="test-1-rating-6" value="1" disabled="disabled"/>\r
-  <input class="star" type="radio" name="test-1-rating-6" value="2" disabled="disabled"/>\r
-  <input class="star" type="radio" name="test-1-rating-6" value="3" disabled="disabled"/>\r
-  <input class="star" type="radio" name="test-1-rating-6" value="4" disabled="disabled"/>\r
-  <input class="star" type="radio" name="test-1-rating-6" value="5" disabled="disabled"/>\r
- </div>\r
-   </td>\r
-  </tr>\r
- </table>\r
-</td>\r
-<td valign="top" width="5">&nbsp;</td>  <td valign="top" width="50">\r
- <input type="submit" value="Submit scores!" />  </td>\r
-<td valign="top" width="5">&nbsp;</td>  <td valign="top" width="160">\r
- <u>Test results</u>:<br/><br/>\r
- <div class="test Smaller">\r
-  <span style="color:#FF0000">Results will be displayed here</span>\r
- </div>\r
-</td>\r
-   </tr>\r
-  </table>\r
-  </form>\r
-\r
-  <div class="Clear">&nbsp;</div><div class="Clear">&nbsp;</div>\r
-\r
-  <form id="form2">\r
-  <strong style='font-size:150%'>Test 2</strong> - With defaults ('checked')\r
-  <table width="100%" cellspacing="10"> <tr>\r
-<td valign="top" width="">\r
- <table width="100%">\r
-  <tr>\r
-   <td valign="top" width="50%">\r
- <div class="Clear">\r
-  Rating 1:\r
-  (N/M/Y, default M)\r
- </div>\r
- <div class="Clear">\r
-  <input class="star" type="radio" name="test-2-rating-1" value="N" title="No"/>\r
-  <input class="star" type="radio" name="test-2-rating-1" value="M" title="Maybe" checked="checked"/>\r
-  <input class="star" type="radio" name="test-2-rating-1" value="Y" title="Yes"/>\r
- </div>\r
- <div class="Clear">\r
-  Rating 2:\r
-  (10 - 50, default 30)\r
- </div>\r
- <div class="Clear">\r
-  <input class="star" type="radio" name="test-2-rating-2" value="10"/>\r
-  <input class="star" type="radio" name="test-2-rating-2" value="20"/>\r
-  <input class="star" type="radio" name="test-2-rating-2" value="30" checked="checked"/>\r
-  <input class="star" type="radio" name="test-2-rating-2" value="40"/>\r
-  <input class="star" type="radio" name="test-2-rating-2" value="50"/>\r
- </div>\r
- <div class="Clear">\r
-  Rating 3:\r
-  (1 - 7, default 4)\r
- </div>\r
- <div class="Clear">\r
-  <input class="star" type="radio" name="test-2-rating-3" value="1"/>\r
-  <input class="star" type="radio" name="test-2-rating-3" value="2"/>\r
-  <input class="star" type="radio" name="test-2-rating-3" value="3"/>\r
-  <input class="star" type="radio" name="test-2-rating-3" value="4" checked="checked"/>\r
-  <input class="star" type="radio" name="test-2-rating-3" value="5"/>\r
-  <input class="star" type="radio" name="test-2-rating-3" value="6"/>\r
-  <input class="star" type="radio" name="test-2-rating-3" value="7"/>\r
- </div>\r
-</td>\r
-   <td valign="top" width="50%">\r
- <div class="Clear">\r
-  Rating 4:\r
-  (1 - 5, default 1)\r
- </div>\r
- <div class="Clear">\r
-  <input class="star" type="radio" name="test-2-rating-4" value="1" title="Worst" checked="checked"/>\r
-  <input class="star" type="radio" name="test-2-rating-4" value="2" title="Bad"/>\r
-  <input class="star" type="radio" name="test-2-rating-4" value="3" title="OK"/>\r
-  <input class="star" type="radio" name="test-2-rating-4" value="4" title="Good"/>\r
-  <input class="star" type="radio" name="test-2-rating-4" value="5" title="Best"/>\r
- </div>\r
- <div class="Clear">\r
-  Rating 5:\r
-  (1 - 5, default 5)\r
- </div>\r
- <div class="Clear">\r
-  <input class="star" type="radio" name="test-2-rating-5" value="1"/>\r
-  <input class="star" type="radio" name="test-2-rating-5" value="2"/>\r
-  <input class="star" type="radio" name="test-2-rating-5" value="3"/>\r
-  <input class="star" type="radio" name="test-2-rating-5" value="4"/>\r
-  <input class="star" type="radio" name="test-2-rating-5" value="5" checked="checked"/>\r
- </div>\r
- <div class="Clear">\r
-  Rating 6 (readonly):\r
-  (1 - 5, default 3)\r
- </div>\r
- <div class="Clear">\r
-  <input class="star" type="radio" name="test-2-rating-6" value="1" disabled="disabled"/>\r
-  <input class="star" type="radio" name="test-2-rating-6" value="2" disabled="disabled"/>\r
-  <input class="star" type="radio" name="test-2-rating-6" value="3" disabled="disabled" checked="checked"/>\r
-  <input class="star" type="radio" name="test-2-rating-6" value="4" disabled="disabled"/>\r
-  <input class="star" type="radio" name="test-2-rating-6" value="5" disabled="disabled"/>\r
- </div>\r
-</td>\r
-   </tr>\r
-  </table>\r
-</td>\r
-<td valign="top" width="5">&nbsp;</td>  <td valign="top" width="50">\r
- <input type="submit" value="Submit scores!" />  </td>\r
-<td valign="top" width="5">&nbsp;</td>  <td valign="top" width="160">\r
- <u>Test results</u>:<br/><br/>\r
- <div class="test Smaller">\r
-  <span style="color:#FF0000">Results will be displayed here</span>\r
- </div>\r
-</td>\r
-   </tr>\r
-  </table>\r
-  </form>\r
-\r
-  <div class="Clear">&nbsp;</div><div class="Clear">&nbsp;</div>\r
-\r
-  <form id="form3A">\r
-  <script>\r
-  $(function(){\r
-   $('.auto-submit-star').rating({\r
-callback: function(value, link){\r
- // 'this' is the hidden form element holding the current value\r
- // 'value' is the value selected\r
- // 'element' points to the link element that received the click.\r
- alert("The value selected was '" + value + "'\n\nWith this callback function I can automatically submit the form with this code:\nthis.form.submit();");\r
-   \r
- // To submit the form automatically:\r
- //this.form.submit();\r
-   \r
- // To submit the form via ajax:\r
- //$(this.form).ajaxSubmit();\r
-}\r
-   });\r
-  });\r
-  </script>\r
-  <strong style='font-size:150%'>Test 3-A</strong> - With callback\r
-  <table width="100%" cellspacing="10"> <tr>\r
-<td valign="top" width="">\r
-  <div class="Clear">\r
-  Rating 1:\r
-  (1 - 3, default 2)\r
-  <input class="auto-submit-star" type="radio" name="test-3A-rating-1" value="1"/>\r
-  <input class="auto-submit-star" type="radio" name="test-3A-rating-1" value="2" checked="checked"/>\r
-  <input class="auto-submit-star" type="radio" name="test-3A-rating-1" value="3"/>\r
- </div>\r
- <div class="Clear">\r
-  <pre class="code"><code class="js">$('.auto-submit-star').rating({\r
-callback: function(value, link){\r
-  alert(value);\r
-}\r
-  });</code></pre>\r
- </div>\r
-</td>\r
-<td valign="top" width="5">&nbsp;</td>  <td valign="top" width="50">\r
- <input type="submit" value="Submit scores!" />  </td>\r
-<td valign="top" width="5">&nbsp;</td>  <td valign="top" width="160">\r
- <u>Test results</u>:<br/><br/>\r
- <div class="test Smaller">\r
-  <span style="color:#FF0000">Results will be displayed here</span>\r
- </div>\r
-</td>\r
-   </tr>\r
-  </table>\r
-  </form>\r
-\r
-  <div class="Clear">&nbsp;</div><div class="Clear">&nbsp;</div>\r
-\r
-  <script>\r
-  $(function(){\r
-   $('.hover-star').rating({\r
-focus: function(value, link){\r
-  // 'this' is the hidden form element holding the current value\r
-  // 'value' is the value selected\r
-  // 'element' points to the link element that received the click.\r
-  var tip = $('#hover-test');\r
-  tip[0].data = tip[0].data || tip.html();\r
-  tip.html(link.title || 'value: '+value);\r
-},\r
-blur: function(value, link){\r
-  var tip = $('#hover-test');\r
-  $('#hover-test').html(tip[0].data || '');\r
-}\r
-   });\r
-  });\r
-  </script>\r
-  <form id="form3B">\r
-  <strong style='font-size:150%'>Test 3-B</strong> - With hover effects\r
-  <table width="100%" cellspacing="10"> <tr>\r
-<td valign="top" width="">\r
-  <div class="Clear">\r
-  Rating 1:\r
-  (1 - 3, default 2)\r
-  <div>\r
-   <input class="hover-star" type="radio" name="test-3B-rating-1" value="1" title="Very poor"/>\r
-   <input class="hover-star" type="radio" name="test-3B-rating-1" value="2" title="Poor"/>\r
-   <input class="hover-star" type="radio" name="test-3B-rating-1" value="3" title="OK"/>\r
-   <input class="hover-star" type="radio" name="test-3B-rating-1" value="4" title="Good"/>\r
-   <input class="hover-star" type="radio" name="test-3B-rating-1" value="5" title="Very Good"/>\r
-   <span id="hover-test" style="margin:0 0 0 20px;">Hover tips will appear in here</span>\r
-  </div>\r
- </div>\r
- <div class="Clear">\r
-  <pre class="code"><code class="js">$('.hover-star').rating({\r
-focus: function(value, link){\r
-  var tip = $('#hover-test');\r
-  tip[0].data = tip[0].data || tip.html();\r
-  tip.html(link.title || 'value: '+value);\r
-},\r
-blur: function(value, link){\r
-  var tip = $('#hover-test');\r
-  $('#hover-test').html(tip[0].data || '');\r
-}\r
-  });</code></pre>\r
- </div>\r
-</td>\r
-<td valign="top" width="5">&nbsp;</td>  <td valign="top" width="50">\r
- <input type="submit" value="Submit scores!" />  </td>\r
-<td valign="top" width="5">&nbsp;</td>  <td valign="top" width="160">\r
- <u>Test results</u>:<br/><br/>\r
- <div class="test Smaller">\r
-  <span style="color:#FF0000">Results will be displayed here</span>\r
- </div>\r
-</td>\r
-   </tr>\r
-  </table>\r
-  </form>\r
-\r
-  <div class="Clear">&nbsp;</div><div class="Clear">&nbsp;</div>\r
-\r
-  <form id="form4">\r
-  <strong style='font-size:150%'>Test 4</strong> - <strong>Half Stars</strong> and <strong>Split Stars</strong>\r
-  <table width="100%" cellspacing="10"> <tr>\r
-<td valign="top" width="">\r
- <table width="100%">\r
-  <tr>\r
-   <td width="50%">\r
- <div class="Clear">\r
-  Rating 1:\r
-  (N/M/Y/?)\r
-  <div><small><pre class="code"><code class="html">&lt;input class="star {half:true}"</code></pre></small></div>\r
-  <input class="star {half:true}" type="radio" name="test-4-rating-1" value="N" title="No"/>\r
-  <input class="star {half:true}" type="radio" name="test-4-rating-1" value="M" title="Maybe"/>\r
-  <input class="star {half:true}" type="radio" name="test-4-rating-1" value="Y" title="Yes"/>\r
-  <input class="star {half:true}" type="radio" name="test-4-rating-1" value="?" title="Don't Know"/>\r
- </div>\r
- <br/>\r
- <div class="Clear">\r
-  Rating 2:\r
-  (10 - 60)\r
-  <div><small><pre class="code"><code class="html">&lt;input class="star {split:3}"</code></pre></small></div>\r
-  <input class="star {split:3}" type="radio" name="test-4-rating-2" value="10"/>\r
-  <input class="star {split:3}" type="radio" name="test-4-rating-2" value="20"/>\r
-  <input class="star {split:3}" type="radio" name="test-4-rating-2" value="30"/>\r
-  <input class="star {split:3}" type="radio" name="test-4-rating-2" value="40"/>\r
-  <input class="star {split:3}" type="radio" name="test-4-rating-2" value="50"/>\r
-  <input class="star {split:3}" type="radio" name="test-4-rating-2" value="60"/>\r
- </div>\r
- <br/>\r
- <div class="Clear">\r
-  Rating 3:\r
-  (0-5.0, default 3.5)\r
-  <div><small><pre class="code"><code class="html">&lt;input class="star {split:2}"</code></pre></small></div>\r
-  <input class="star {split:2}" type="radio" name="test-4-rating-3" value="0.5"/>\r
-  <input class="star {split:2}" type="radio" name="test-4-rating-3" value="1.0"/>\r
-  <input class="star {split:2}" type="radio" name="test-4-rating-3" value="1.5"/>\r
-  <input class="star {split:2}" type="radio" name="test-4-rating-3" value="2.0"/>\r
-  <input class="star {split:2}" type="radio" name="test-4-rating-3" value="2.5"/>\r
-  <input class="star {split:2}" type="radio" name="test-4-rating-3" value="3.0"/>\r
-  <input class="star {split:2}" type="radio" name="test-4-rating-3" value="3.5" checked="checked"/>\r
-  <input class="star {split:2}" type="radio" name="test-4-rating-3" value="4.0"/>\r
-  <input class="star {split:2}" type="radio" name="test-4-rating-3" value="4.5"/>\r
-  <input class="star {split:2}" type="radio" name="test-4-rating-3" value="5.0"/>\r
- </div>\r
-</td>\r
-<td valign="top" width="50%">\r
- <div class="Clear">\r
-  Rating 4:\r
-  (1-6, default 5)\r
-  <div><small><pre class="code"><code class="html">&lt;input class="star {split:2}"</code></pre></small></div>\r
-  <input class="star {split:2}" type="radio" name="test-4-rating-4" value="1" title="Worst"/>\r
-  <input class="star {split:2}" type="radio" name="test-4-rating-4" value="2" title="Bad"/>\r
-  <input class="star {split:2}" type="radio" name="test-4-rating-4" value="3" title="OK"/>\r
-  <input class="star {split:2}" type="radio" name="test-4-rating-4" value="4" title="Good"/>\r
-  <input class="star {split:2}" type="radio" name="test-4-rating-4" value="5" title="Best" checked="checked"/>\r
-  <input class="star {split:2}" type="radio" name="test-4-rating-4" value="6" title="Bestest!!!"/>\r
- </div>\r
- <br/>\r
- <div class="Clear">\r
-  Rating 5:\r
-  (1-20, default 11)\r
-  <div><small><pre class="code"><code class="html">&lt;input class="star {split:4}"</code></pre></small></div>\r
-  <input class="star {split:4}" type="radio" name="test-4-rating-5" value="1"/>\r
-  <input class="star {split:4}" type="radio" name="test-4-rating-5" value="2"/>\r
-  <input class="star {split:4}" type="radio" name="test-4-rating-5" value="3"/>\r
-  <input class="star {split:4}" type="radio" name="test-4-rating-5" value="4"/>\r
-  <input class="star {split:4}" type="radio" name="test-4-rating-5" value="5"/>\r
-  <input class="star {split:4}" type="radio" name="test-4-rating-5" value="6"/>\r
-  <input class="star {split:4}" type="radio" name="test-4-rating-5" value="7"/>\r
-  <input class="star {split:4}" type="radio" name="test-4-rating-5" value="8"/>\r
-  <input class="star {split:4}" type="radio" name="test-4-rating-5" value="9"/>\r
-  <input class="star {split:4}" type="radio" name="test-4-rating-5" value="10"/>\r
-  <input class="star {split:4}" type="radio" name="test-4-rating-5" value="11" checked="checked"/>\r
-  <input class="star {split:4}" type="radio" name="test-4-rating-5" value="12"/>\r
-  <input class="star {split:4}" type="radio" name="test-4-rating-5" value="13"/>\r
-  <input class="star {split:4}" type="radio" name="test-4-rating-5" value="14"/>\r
-  <input class="star {split:4}" type="radio" name="test-4-rating-5" value="15"/>\r
-  <input class="star {split:4}" type="radio" name="test-4-rating-5" value="16"/>\r
-  <input class="star {split:4}" type="radio" name="test-4-rating-5" value="17"/>\r
-  <input class="star {split:4}" type="radio" name="test-4-rating-5" value="18"/>\r
-  <input class="star {split:4}" type="radio" name="test-4-rating-5" value="19"/>\r
-  <input class="star {split:4}" type="radio" name="test-4-rating-5" value="20"/>\r
- </div>\r
- <br/>\r
- <div class="Clear">\r
-  Rating 6 (readonly):\r
-  (1-20, default 13)\r
-  <div><small><pre class="code"><code class="html">&lt;input class="star {split:4}"</code></pre></small></div>\r
-  <input class="star {split:4}" type="radio" name="test-4-rating-6" value="1" disabled="disabled"/>\r
-  <input class="star {split:4}" type="radio" name="test-4-rating-6" value="2" disabled="disabled"/>\r
-  <input class="star {split:4}" type="radio" name="test-4-rating-6" value="3" disabled="disabled"/>\r
-  <input class="star {split:4}" type="radio" name="test-4-rating-6" value="4" disabled="disabled"/>\r
-  <input class="star {split:4}" type="radio" name="test-4-rating-6" value="5" disabled="disabled"/>\r
-  <input class="star {split:4}" type="radio" name="test-4-rating-6" value="6" disabled="disabled"/>\r
-  <input class="star {split:4}" type="radio" name="test-4-rating-6" value="7" disabled="disabled"/>\r
-  <input class="star {split:4}" type="radio" name="test-4-rating-6" value="8" disabled="disabled"/>\r
-  <input class="star {split:4}" type="radio" name="test-4-rating-6" value="9" disabled="disabled"/>\r
-  <input class="star {split:4}" type="radio" name="test-4-rating-6" value="10" disabled="disabled"/>\r
-  <input class="star {split:4}" type="radio" name="test-4-rating-6" value="11" disabled="disabled"/>\r
-  <input class="star {split:4}" type="radio" name="test-4-rating-6" value="12" disabled="disabled"/>\r
-  <input class="star {split:4}" type="radio" name="test-4-rating-6" value="13" disabled="disabled" checked="checked"/>\r
-  <input class="star {split:4}" type="radio" name="test-4-rating-6" value="14" disabled="disabled"/>\r
-  <input class="star {split:4}" type="radio" name="test-4-rating-6" value="15" disabled="disabled"/>\r
-  <input class="star {split:4}" type="radio" name="test-4-rating-6" value="16" disabled="disabled"/>\r
-  <input class="star {split:4}" type="radio" name="test-4-rating-6" value="17" disabled="disabled"/>\r
-  <input class="star {split:4}" type="radio" name="test-4-rating-6" value="18" disabled="disabled"/>\r
-  <input class="star {split:4}" type="radio" name="test-4-rating-6" value="19" disabled="disabled"/>\r
-  <input class="star {split:4}" type="radio" name="test-4-rating-6" value="20" disabled="disabled"/>\r
- </div>\r
-   </td>\r
-  </tr>\r
- </table>\r
-</td>\r
-<td valign="top" width="5">&nbsp;</td>  <td valign="top" width="50">\r
- <input type="submit" value="Submit scores!" />  </td>\r
-<td valign="top" width="5">&nbsp;</td>  <td valign="top" width="160">\r
- <u>Test results</u>:<br/><br/>\r
- <div class="test Smaller">\r
-  <span style="color:#FF0000">Results will be displayed here</span>\r
- </div>\r
-</td>\r
-   </tr>\r
-  </table>\r
-  </form>\r
- </div><!--// tab-Testing //-->\r
-   \r
- <div id="tab-API">\r
-  <h2>API</h2>\r
-  <p class="B Yes">NEW to v3</p>\r
-    \r
-  <p>API methods can be invoked this this:</p>\r
-  <div><pre class="code"><code class="js">$(selector).rating(\r
-   'method', // method name\r
-   [] // method arguments (not required)\r
-  );</code></pre></div>\r
-    \r
-  <br/><br/><br/>\r
-    \r
-  <h3>$().rating('select', index / value)</h3>\r
-  <p>\r
-   Use this method to set the value (and display) of the star rating control\r
-   via javascript. It accepts the index of the star you want to select (0 based)\r
-   or its value (which must be passed as a string.\r
-  </p>\r
-  <p>\r
-   Example: (values A/B/C/D/E)\r
-  </p>\r
-  <form name="api-select">\r
-   <input type="radio" class="star" name="api-select-test" value="A"/>\r
-   <input type="radio" class="star" name="api-select-test" value="B"/>\r
-   <input type="radio" class="star" name="api-select-test" value="C"/>\r
-   <input type="radio" class="star" name="api-select-test" value="D"/>\r
-   <input type="radio" class="star" name="api-select-test" value="E"/>\r
-   <input type="button" value="Submit &raquo;" onClick="\r
-    $(this).next().html( $(this.form).serialize() || '(nothing submitted)' );\r
-   "/>\r
-   <span></span>\r
-   <br/>\r
-   By index:\r
-   <input type="button" onClick="javascript:$('input',this.form).rating('select',0)" value="0"/>\r
-   <input type="button" onClick="javascript:$('input',this.form).rating('select',1)" value="1"/>\r
-   <input type="button" onClick="javascript:$('input',this.form).rating('select',2)" value="2"/>\r
-   <input type="button" onClick="javascript:$('input',this.form).rating('select',3)" value="3"/>\r
-   <input type="button" onClick="javascript:$('input',this.form).rating('select',4)" value="4"/>\r
-   eg.: $('input').rating('select',3)\r
-   <br/>\r
-   By value:\r
-   <input type="button" onClick="javascript:$('input',this.form).rating('select',this.value)" value="A"/>\r
-   <input type="button" onClick="javascript:$('input',this.form).rating('select',this.value)" value="B"/>\r
-   <input type="button" onClick="javascript:$('input',this.form).rating('select',this.value)" value="C"/>\r
-   <input type="button" onClick="javascript:$('input',this.form).rating('select',this.value)" value="D"/>\r
-   <input type="button" onClick="javascript:$('input',this.form).rating('select',this.value)" value="E"/>\r
-   eg.: $('input').rating('select','C')\r
-  </form>\r
-    \r
-  <br/><br/><br/>\r
-    \r
-  <h3>$().rating('readOnly', true / false)</h3>\r
-  <p>\r
-   Use this method to set the value (and display) of the star rating control\r
-   via javascript. It accepts the index of the star you want to select (0 based)\r
-   or its value (which must be passed as a string.\r
-  </p>\r
-  <p>\r
-   Example: (values 1,2,3...10)\r
-  </p>\r
-  <form name="api-readonly">\r
-   <input type="radio" class="star {split:2}" name="api-readonly-test" value="1"/>\r
-   <input type="radio" class="star {split:2}" name="api-readonly-test" value="2"/>\r
-   <input type="radio" class="star {split:2}" name="api-readonly-test" value="3"/>\r
-   <input type="radio" class="star {split:2}" name="api-readonly-test" value="4"/>\r
-   <input type="radio" class="star {split:2}" name="api-readonly-test" value="5"/>\r
-   <input type="radio" class="star {split:2}" name="api-readonly-test" value="6"/>\r
-   <input type="radio" class="star {split:2}" name="api-readonly-test" value="7"/>\r
-   <input type="radio" class="star {split:2}" name="api-readonly-test" value="8"/>\r
-   <input type="radio" class="star {split:2}" name="api-readonly-test" value="9"/>\r
-   <input type="radio" class="star {split:2}" name="api-readonly-test" value="10"/>\r
-   <input type="button" value="Submit &raquo;" onClick="\r
-    $(this).next().html( $(this.form).serialize() || '(nothing submitted)' );\r
-   "/>\r
-   <span></span>\r
-   <br/>\r
-   <input type="button" onClick="javascript:$('input',this.form).rating('readOnly',true)" value="Set readOnly = true"/>\r
-   eg.: $('input').rating('readOnly',true)\r
-   <br/>\r
-   <input type="button" onClick="javascript:$('input',this.form).rating('readOnly',false)" value="Set readOnly = false"/>\r
-   eg.: $('input').rating('readOnly',false) or simply $('input').rating('readOnly');\r
-  </form>\r
-    \r
-  <br/><br/><br/>\r
-    \r
-  <h3>$().rating('disable') / $().rating('enable')</h3>\r
-  <p>\r
-   These methods bahve almost exactly as the readOnly method, however\r
-   they also control whether or not the select value is submitted with\r
-   the form.\r
-  </p>\r
-  <p>\r
-   Example: (values 1,2,3...10)\r
-  </p>\r
-  <form name="api-readonly">\r
-   <input type="radio" class="star {split:2}" name="api-readonly-test" value="1"/>\r
-   <input type="radio" class="star {split:2}" name="api-readonly-test" value="2"/>\r
-   <input type="radio" class="star {split:2}" name="api-readonly-test" value="3"/>\r
-   <input type="radio" class="star {split:2}" name="api-readonly-test" value="4"/>\r
-   <input type="radio" class="star {split:2}" name="api-readonly-test" value="5"/>\r
-   <input type="radio" class="star {split:2}" name="api-readonly-test" value="6"/>\r
-   <input type="radio" class="star {split:2}" name="api-readonly-test" value="7"/>\r
-   <input type="radio" class="star {split:2}" name="api-readonly-test" value="8"/>\r
-   <input type="radio" class="star {split:2}" name="api-readonly-test" value="9"/>\r
-   <input type="radio" class="star {split:2}" name="api-readonly-test" value="10"/>\r
-   <input type="button" value="Submit &raquo;" onClick="\r
-    $(this).next().html( $(this.form).serialize() || '(nothing submitted)' );\r
-   "/>\r
-   <span></span>\r
-   <br/>\r
-   <input type="button" onClick="javascript:$('input',this.form).rating('disable')" value="disable"/>\r
-   eg.: $('input').rating('disable')\r
-   <br/>\r
-   <input type="button" onClick="javascript:$('input',this.form).rating('enable')" value="enable"/>\r
-   eg.: $('input').rating('enable');\r
-  </form>\r
- </div><!--// tab-API //-->\r
+ \r
    \r
 </body>\r
 </html>\r