package com.google.gwt.query.client.plugins;
+import com.google.gwt.core.client.JsArray;
+import com.google.gwt.dom.client.Element;
+import com.google.gwt.dom.client.NodeList;
+import com.google.gwt.query.client.Function;
import com.google.gwt.query.client.GQuery;
-import com.google.gwt.query.client.Plugin;
import com.google.gwt.query.client.JSArray;
+import com.google.gwt.query.client.Plugin;
import com.google.gwt.query.client.SelectorEngine;
-import com.google.gwt.dom.client.Element;
-import com.google.gwt.dom.client.NodeList;
-import com.google.gwt.dom.client.InputElement;
+import com.google.gwt.user.client.Event;
/**
* Star Rating plugin.
*/
public class Ratings extends GQuery {
+ private static int calls;
+
/**
* Used to register the plugin.
*/
if (size() == 0) {
return this;
}
+ calls++;
not(".star-rating-applied").addClass("star-rating-applied");
- Control control;
+ Control control = null;
for (Element e : elements()) {
GQuery input = $(e);
String eid = SelectorEngine
.replaceAll("\\[|\\]", "_").replaceAll("^\\_+|\\_$", "");
GQuery context = $(getContext(e));
Raters raters = (Raters) context.data("rating");
+ if (raters == null || raters.getCalls() != calls) {
+ raters = new Raters(0, calls);
+ }
+ GQuery rater = raters.get(eid);
+ if (rater != null) {
+ control = (Control) rater.data("rating");
+ }
+ if (rater != null && control != null) {
+ control.bumpCount();
+ } else {
+ control = new Control();
+ control.setSerial(raters.bumpCount());
+ // create rating element
+ rater = $("<span class=\"star-rating-control\"/>");
+ input.before(rater);
+
+ // Mark element for initialization (once all stars are ready)
+ rater.addClass("rating-to-be-drawn");
+
+ // Accept readOnly setting from 'disabled' property
+ if (input.attr("disabled") != null) {
+ control.setReadOnly(true);
+ }
+
+ // Create 'cancel' button
+ GQuery query = $(
+ "<div class=\"rating-cancel\"><a title=\"" + control.cancel + "\">"
+ + control.cancelValue + "</a></div>").
+ mouseover(new Function() {
+ @Override
+ public boolean f(Event e) {
+ $(e).as(Ratings).drain();
+ $(e).addClass("star-rating-hover");
+ return true;
+ }
+ }).
+ mouseout(new Function() {
+ @Override
+ public boolean f(Event e) {
+ $(e).as(Ratings).draw();
+ $(e).removeClass("star-rating-hover");
+ return true;
+ }
+ }).
+ click(new Function() {
+ @Override
+ public boolean f(Event e) {
+ $(e).as(Ratings).selectStar();
+ return true;
+ }
+ });
+ control.cancelButton = query;
+ query.data("rating", control);
+ rater.append(query);
+ }
+ // insert rating star
+ GQuery star = $("<div class=\"star-rating rater-" + control.getSerial()
+ + "\"><a title=\""
+ + (SelectorEngine.or(e.getTitle(), e.getPropertyString("value")))
+ + "\">" + e.getPropertyString("value") + "</a></div>");
+ rater.append(star);
+
+ // inherit attributes from input element
+ if (e.getId() != null) {
+ star.attr("id", e.getId());
+ }
+ if (e.getClassName() != null) {
+ star.addClass(e.getClassName());
+ }
+
+ // Half-stars?
+ if (control.isHalf()) {
+ control.setSplit(2);
+ }
+
+ // Prepare division control
+ if (control.getSplit() > 0) {
+ int stw = star.width();
+ if (stw == 0) {
+ stw = control.getStarWidth();
+ }
+
+ int spi = (control.getCount() % control.getSplit());
+ int spw = (int) Math.floor(stw / control.getSplit());
+
+ star.width(spw).find("a").css("margin-left", "-" + (spi * spw) + "px");
+ }
+ ;
+
+ // readOnly?
+ if (control.isReadOnly())//{ //save a byte!
+ // Mark star as readOnly so user can customize display
+ {
+ star.addClass("star-rating-readonly");
+ }
+ //} //save a byte!
+ else//{ //save a byte!
+ // Enable hover css effects
+ {
+ star.addClass("star-rating-live")
+ // Attach mouse events
+ .mouseover(new Function() {
+ @Override
+ public boolean f(Event e) {
+ $(e).as(Ratings).fill();
+ $(e).as(Ratings).focusStar();
+ return true;
+ }
+ }).mouseout(new Function() {
+ @Override
+ public boolean f(Event e) {
+ $(e).as(Ratings).draw();
+ $(e).as(Ratings).blurStar();
+
+ return true;
+ }
+ }).click(new Function() {
+ @Override
+ public boolean f(Event e) {
+ $(e).as(Ratings).selectStar();
+ return true;
+ }
+ });
+ }
+ // set current selection
+ if (e.getPropertyBoolean("checked")) {
+ control.setCurrent(star);
+ }
+
+ // hide input element
+ input.hide();
+
+ // backward compatibility, form element to plugin
+ input.change(new Function() {
+ @Override
+ public boolean f(Event e) {
+ $(e).as(Ratings).selectStar();
+ return true;
+ }
+ });
+
+ // attach reference to star to input element and vice-versa
+ star.data("rating.input", input.data("rating.star", star));
+
+ // store control information in form (or body when form not available)
+ control.addStar(star.get(0));
+ control.addInput(input.get(0));
+ control.setRater(rater);
+ raters.put(eid, rater);
+ control.setContext(context);
+
+ input.data("rating", control);
+ 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");
+ }
+
+ return this;
+ }
+
+ public Ratings blurStar() {
+ return this;
+ }
+
+ public Ratings focusStar() {
+ Control control = (Control) this.data("rating");
+ if (control == null) {
+ return this;
+ }
+// GQuery input = data("rating.input");
+ return this;
+ }
+
+ 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;
+ }
+ // 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");
+ }
+
+ // 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());
+ 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;
+ }
+ control.setCurrent(null);
+ return $(control.getStar(value)).as(Ratings).selectStar();
+ }
+
+ 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;
+
+ // 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
+// 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");
+ if (control == null) {
+ return this;
+ }
+ // do not execute when control is in read-only mode
+ if (control.isReadOnly()) {
+ return this;
+ }
+ 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;
+ }
+ control.rater.children().filter(".rater-" + control.getSerial())
+ .removeClass("star-rating-on").removeClass("star-rating-hover");
return this;
}
public static class Control {
+ private int count;
+
+ private String cancel = "Cancel Rating";
+
+ private String cancelValue = "";
+
+ private int split = 0;
+
+ private int starWidth = 16;
+
+ private int serial;
+
+ private boolean readOnly;
+
+ private boolean half;
+
+ private GQuery current;
+
+ private GQuery context;
+
+ private JsArray<Element> stars = JsArray.createArray().cast();
+
+ private JsArray<Element> inputs = JsArray.createArray().cast();
+
+ private GQuery rater;
+
+ public GQuery cancelButton;
+
+ public int bumpCount() {
+ return count++;
+ }
+
+ public void setSerial(int serial) {
+ this.serial = serial;
+ }
+
+ public void setReadOnly(boolean readOnly) {
+ this.readOnly = readOnly;
+ }
+
+ public int getSerial() {
+ return serial;
+ }
+
+ public boolean isHalf() {
+ return half;
+ }
+
+ public void setSplit(int split) {
+ this.split = split;
+ }
+
+ public int getSplit() {
+ return split;
+ }
+
+ public int getStarWidth() {
+ return starWidth;
+ }
+
+ public int getCount() {
+ return count;
+ }
+
+ public boolean isReadOnly() {
+ return readOnly;
+ }
+
+ public void setCurrent(GQuery current) {
+ this.current = current;
+ }
+
+ public void setContext(GQuery context) {
+ this.context = context;
+ }
+
+ public void addStar(Element element) {
+ stars.set(stars.length(), element);
+ }
+
+ public void addInput(Element element) {
+ inputs.set(inputs.length(), element);
+ }
+
+ public void setRater(GQuery rater) {
+ this.rater = rater;
+ }
+
+ public Object getCurrent() {
+ return current;
+ }
+
+ public NodeList<Element> getInputs() {
+ return inputs.cast();
+ }
+
+ public Element getStar(int value) {
+ return stars.get(value);
+ }
+
+ public NodeList<Element> getStars() {
+ return stars.cast();
+ }
}
public static class Raters {
+ private int calls;
+
+ private int count;
+
+ private GQuery.DataCache cache = GQuery.DataCache.createObject().cast();
+
+ public Raters(int count, int calls) {
+ this.count = count;
+ this.calls = calls;
+ }
+
+ public int getCalls() {
+ return calls;
+ }
+
+ public GQuery get(String eid) {
+ return (GQuery) cache.getObject(eid);
+ }
+
+ public void put(String eid, GQuery q) {
+ cache.put(eid, q);
+ }
+
+ public int bumpCount() {
+ return count++;
+ }
}
private static native Element getContext(Element e) /*-{
<head>\r
<title>GQuery Demo</title>\r
<script language="javascript" src="gwtquery.samples.GwtQuerySample.nocache.js"></script>\r
+ <link href='gquery-star-ratings.css' type="text/css" rel="stylesheet"/>\r
+ \r
</head>\r
<body>\r
<div class="outer">\r
<div>Foo <span class="note">bar</span> baz</div>\r
\r
</div>\r
+<div id="tab-Overview">\r
+ <h2>What is this?</h2>\r
+ <p>\r
+ The <strong>Star Rating Plugin</strong> is a plugin\r
+ for the jQuery Javascript library that creates a non-obstrusive\r
+ star rating control based on a set of radio input boxes.\r
+ </p>\r
+ \r
+ <h2>What does it do?</h2>\r
+ <ul>\r
+ <li>\r
+ It turns a collection of radio boxes into a neat star-rating control.\r
+ </li>\r
+ <li>\r
+ It creates the interface based on standard form elements, which means the\r
+ basic functionality will still be available even if Javascript is disabled.\r
+ </li>\r
+ <li>\r
+ <strong style="color: rgb(0, 153, 0);">NEW</strong> (12-Mar-08):\r
+ In read only mode (using the 'readOnly' option or <code>disabled</code> property), the plugin is a neat way of\r
+ displaying star-like values without any additional code\r
+ </li>\r
+ </ul>\r
+ \r
+ <h2>How do I use it?</h2>\r
+ <p>\r
+ Just add the <code><strong>star</strong></code> class to your radio boxes\r
+ </p>\r
+ <table cellspacing="5" width="100%">\r
+ <tr>\r
+ <td valign="top">\r
+ <pre class="code"><code class="html"><input name="star1" type="radio" class="star"/>\r
+ <input name="star1" type="radio" class="star"/>\r
+ <input name="star1" type="radio" class="star"/>\r
+ <input name="star1" type="radio" class="star"/>\r
+ <input name="star1" type="radio" class="star"/></code></pre>\r
+ </td>\r
+ <td valign="top" width="10">»</td>\r
+ <td valign="top" width="180">\r
+ <input name="star1" type="radio" class="star"/>\r
+ <input name="star1" type="radio" class="star"/>\r
+ <input name="star1" type="radio" class="star"/>\r
+ <input name="star1" type="radio" class="star"/>\r
+ <input name="star1" type="radio" class="star"/>\r
+ </td>\r
+ </tr>\r
+ </table>\r
+ \r
+ <p>\r
+ Use the <code><strong>checked</strong></code> property to specify the initial/default value of the control\r
+ </p>\r
+ <table cellspacing="5" width="100%">\r
+ <tr>\r
+ <td valign="top">\r
+ <pre class="code"><code class="html"><input name="star2" type="radio" class="star"/>\r
+ <input name="star2" type="radio" class="star"/>\r
+ <input name="star2" type="radio" class="star" checked="checked"/>\r
+ <input name="star2" type="radio" class="star"/>\r
+ <input name="star2" type="radio" class="star"/></code></pre>\r
+ </td>\r
+ <td valign="top" width="10">»</td>\r
+ <td valign="top" width="180">\r
+ <input name="star2" type="radio" class="star"/>\r
+ <input name="star2" type="radio" class="star"/>\r
+ <input name="star2" type="radio" class="star" checked="checked"/>\r
+ <input name="star2" type="radio" class="star"/>\r
+ <input name="star2" type="radio" class="star"/>\r
+ </td>\r
+ </tr>\r
+ </table>\r
+ \r
+ <p>\r
+ Use the <code><strong>disabled</strong></code> property to use a control for display purposes only\r
+ </p>\r
+ <table cellspacing="5" width="100%">\r
+ <tr>\r
+ <td valign="top">\r
+ <pre class="code"><code class="html"><input name="star3" type="radio" class="star" disabled="disabled"/>\r
+ <input name="star3" type="radio" class="star" disabled="disabled"/>\r
+ <input name="star3" type="radio" class="star" disabled="disabled" checked="checked"/>\r
+ <input name="star3" type="radio" class="star" disabled="disabled"/>\r
+ <input name="star3" type="radio" class="star" disabled="disabled"/></code></pre>\r
+ </td>\r
+ <td valign="top" width="10">»</td>\r
+ <td valign="top" width="180">\r
+ <input name="star3" type="radio" class="star" disabled="disabled"/>\r
+ <input name="star3" type="radio" class="star" disabled="disabled"/>\r
+ <input name="star3" type="radio" class="star" disabled="disabled" checked="checked"/>\r
+ <input name="star3" type="radio" class="star" disabled="disabled"/>\r
+ <input name="star3" type="radio" class="star" disabled="disabled"/>\r
+ </td>\r
+ </tr>\r
+ </table>\r
+ \r
+ <h2>What about split stars and 'half ratings'???</h2>\r
+ <p>\r
+ Use metadata plugin to pass advanced settings to the plugin via the class property.\r
+ </p>\r
+ <table cellspacing="5" width="100%">\r
+ <tr>\r
+ <td valign="top">\r
+ <pre class="code"><code class="html"><input name="adv1" type="radio" class="star {split:4}"/>\r
+ <input name="adv1" type="radio" class="star {split:4}"/>\r
+ <input name="adv1" type="radio" class="star {split:4}"/>\r
+ <input name="adv1" type="radio" class="star {split:4}"/>\r
+ <input name="adv1" type="radio" class="star {split:4}" checked="checked"/>\r
+ <input name="adv1" type="radio" class="star {split:4}"/>\r
+ <input name="adv1" type="radio" class="star {split:4}"/>\r
+ <input name="adv1" type="radio" class="star {split:4}"/></code></pre>\r
+ </td>\r
+ <td valign="top" width="10">»</td>\r
+ <td valign="top" width="180">\r
+ <input name="adv1" type="radio" class="star {split:4}"/>\r
+ <input name="adv1" type="radio" class="star {split:4}"/>\r
+ <input name="adv1" type="radio" class="star {split:4}"/>\r
+ <input name="adv1" type="radio" class="star {split:4}"/>\r
+ <input name="adv1" type="radio" class="star {split:4}" checked="checked"/>\r
+ <input name="adv1" type="radio" class="star {split:4}"/>\r
+ <input name="adv1" type="radio" class="star {split:4}"/>\r
+ <input name="adv1" type="radio" class="star {split:4}"/>\r
+ </td>\r
+ </tr>\r
+ </table>\r
+ \r
+ <p>\r
+ Use custom selector\r
+ </p>\r
+ <table cellspacing="5" width="100%">\r
+ <tr>\r
+ <td valign="top">\r
+ <script>$(function(){ // wait for document to load\r
+ $('input.wow').rating();\r
+ });</script>\r
+ <pre class="code"><code class="js">$(function(){ // wait for document to load\r
+ $('input.wow').rating();\r
+ });</code></pre>\r
+ <pre class="code"><code class="html"><input name="adv2" type="radio" class="wow {split:4}"/>\r
+ <input name="adv2" type="radio" class="wow {split:4}"/>\r
+ <input name="adv2" type="radio" class="wow {split:4}"/>\r
+ <input name="adv2" type="radio" class="wow {split:4}"/>\r
+ <input name="adv2" type="radio" class="wow {split:4}" checked="checked"/>\r
+ <input name="adv2" type="radio" class="wow {split:4}"/>\r
+ <input name="adv2" type="radio" class="wow {split:4}"/>\r
+ <input name="adv2" type="radio" class="wow {split:4}"/></code></pre>\r
+ </td>\r
+ <td valign="top" width="10">»</td>\r
+ <td valign="top" width="180">\r
+ <input name="adv2" type="radio" class="wow {split:4}"/>\r
+ <input name="adv2" type="radio" class="wow {split:4}"/>\r
+ <input name="adv2" type="radio" class="wow {split:4}"/>\r
+ <input name="adv2" type="radio" class="wow {split:4}"/>\r
+ <input name="adv2" type="radio" class="wow {split:4}" checked="checked"/>\r
+ <input name="adv2" type="radio" class="wow {split:4}"/>\r
+ <input name="adv2" type="radio" class="wow {split:4}"/>\r
+ <input name="adv2" type="radio" class="wow {split:4}"/>\r
+ </td>\r
+ </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"> </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"> </td> <td valign="top" width="50">\r
+ <input type="submit" value="Submit scores!" /> </td>\r
+<td valign="top" width="5"> </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"> </div><div class="Clear"> </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"> </td> <td valign="top" width="50">\r
+ <input type="submit" value="Submit scores!" /> </td>\r
+<td valign="top" width="5"> </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"> </div><div class="Clear"> </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"> </td> <td valign="top" width="50">\r
+ <input type="submit" value="Submit scores!" /> </td>\r
+<td valign="top" width="5"> </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"> </div><div class="Clear"> </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"> </td> <td valign="top" width="50">\r
+ <input type="submit" value="Submit scores!" /> </td>\r
+<td valign="top" width="5"> </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"> </div><div class="Clear"> </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"><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"><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"><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"><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"><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"><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"> </td> <td valign="top" width="50">\r
+ <input type="submit" value="Submit scores!" /> </td>\r
+<td valign="top" width="5"> </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 »" 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 »" 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 »" 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
</body>\r
</html>\r
\ No newline at end of file
projects / gwtquery.git / commitdiff