From 7557842d252c50ca4751ba545abb1e52e2a7a285 Mon Sep 17 00:00:00 2001 From: Ray Cromwell Date: Thu, 14 May 2009 01:06:43 +0000 Subject: Plugins --- .../samples/client/GwtQuerySampleModule.java | 3 +- .../gwtquery/samples/public/GwtQuerySample.html | 720 +++++++++++++++++++++ 2 files changed, 722 insertions(+), 1 deletion(-) (limited to 'samples/src/main') diff --git a/samples/src/main/java/gwtquery/samples/client/GwtQuerySampleModule.java b/samples/src/main/java/gwtquery/samples/client/GwtQuerySampleModule.java index 0562206d..9ab09fcf 100644 --- a/samples/src/main/java/gwtquery/samples/client/GwtQuerySampleModule.java +++ b/samples/src/main/java/gwtquery/samples/client/GwtQuerySampleModule.java @@ -4,6 +4,7 @@ import com.google.gwt.core.client.EntryPoint; import com.google.gwt.query.client.Effects; import com.google.gwt.query.client.Function; import com.google.gwt.query.client.GQuery; +import com.google.gwt.query.client.plugins.Ratings; import static com.google.gwt.query.client.GQuery.$; import static com.google.gwt.query.client.GQuery.$$; import static com.google.gwt.query.client.GQuery.lazy; @@ -43,6 +44,6 @@ public class GwtQuerySampleModule implements EntryPoint { $(".note").click(lazy().fadeOut().done()); $(".note").append(" Hello"); - + $("input").as(Ratings.Ratings).rating(); } } diff --git a/samples/src/main/java/gwtquery/samples/public/GwtQuerySample.html b/samples/src/main/java/gwtquery/samples/public/GwtQuerySample.html index b15701a7..db6fbc95 100644 --- a/samples/src/main/java/gwtquery/samples/public/GwtQuerySample.html +++ b/samples/src/main/java/gwtquery/samples/public/GwtQuerySample.html @@ -2,6 +2,8 @@ GQuery Demo + +
@@ -15,6 +17,724 @@
Foo bar baz
+
+

What is this?

+

+ The Star Rating Plugin is a plugin + for the jQuery Javascript library that creates a non-obstrusive + star rating control based on a set of radio input boxes. +

+ +

What does it do?

+ + +

How do I use it?

+

+ Just add the star class to your radio boxes +

+ + + + + + +
+ 
<input name="star1" type="radio" class="star"/>
+  <input name="star1" type="radio" class="star"/>
+  <input name="star1" type="radio" class="star"/>
+  <input name="star1" type="radio" class="star"/>
+  <input name="star1" type="radio" class="star"/>
+ 		» + + + + + +
+ +

+ Use the checked property to specify the initial/default value of the control +

+ + + + + + +
+ 
<input name="star2" type="radio" class="star"/>
+  <input name="star2" type="radio" class="star"/>
+  <input name="star2" type="radio" class="star" checked="checked"/>
+  <input name="star2" type="radio" class="star"/>
+  <input name="star2" type="radio" class="star"/>
+ 		» + + + + + +
+ +

+ Use the disabled property to use a control for display purposes only +

+ + + + + + +
+ 
<input name="star3" type="radio" class="star" disabled="disabled"/>
+  <input name="star3" type="radio" class="star" disabled="disabled"/>
+  <input name="star3" type="radio" class="star" disabled="disabled" checked="checked"/>
+  <input name="star3" type="radio" class="star" disabled="disabled"/>
+  <input name="star3" type="radio" class="star" disabled="disabled"/>
+ 		» + + + + + +
+ +

What about split stars and 'half ratings'???

+

+ Use metadata plugin to pass advanced settings to the plugin via the class property. +

+ + + + + + +
+ 
<input name="adv1" type="radio" class="star {split:4}"/>
+  <input name="adv1" type="radio" class="star {split:4}"/>
+  <input name="adv1" type="radio" class="star {split:4}"/>
+  <input name="adv1" type="radio" class="star {split:4}"/>
+  <input name="adv1" type="radio" class="star {split:4}" checked="checked"/>
+  <input name="adv1" type="radio" class="star {split:4}"/>
+  <input name="adv1" type="radio" class="star {split:4}"/>
+  <input name="adv1" type="radio" class="star {split:4}"/>
+ 		» + + + + + + + + +
+ +

+ Use custom selector +

+ + + + + + +
+ + 
$(function(){ // wait for document to load
+   $('input.wow').rating();
+  });
+ 
<input name="adv2" type="radio" class="wow {split:4}"/>
+  <input name="adv2" type="radio" class="wow {split:4}"/>
+  <input name="adv2" type="radio" class="wow {split:4}"/>
+  <input name="adv2" type="radio" class="wow {split:4}"/>
+  <input name="adv2" type="radio" class="wow {split:4}" checked="checked"/>
+  <input name="adv2" type="radio" class="wow {split:4}"/>
+  <input name="adv2" type="radio" class="wow {split:4}"/>
+  <input name="adv2" type="radio" class="wow {split:4}"/>
+ 		» + + + + + + + + +
+
+ +
+

Test Suite

+ + + +
 
+
+ Test 1 - A blank form + + + + + +
+ + + + + +
+
+ Rating 1: + (N/M/Y) + + + +
+
+
+ Rating 2: + (10 - 50) + + + + + +
+
+
+ Rating 3: + (1 - 7) + + + + + + + +
+		 +
+ Rating 4: + (1 - 5) + + + + + +
+
+
+ Rating 5: + (1 - 5) + + + + + +
+
+
+ Rating 6 (readonly): + (1 - 5) + + + + + +
+
+		  +   + Test results:

+
+ Results will be displayed here +
+
+
+ +
 
 
+ +
+ Test 2 - With defaults ('checked') + + + + + +
+ + + + + +
+
+ Rating 1: + (N/M/Y, default M) +
+
+ + + +
+
+ Rating 2: + (10 - 50, default 30) +
+
+ + + + + +
+
+ Rating 3: + (1 - 7, default 4) +
+
+ + + + + + + +
+		 +
+ Rating 4: + (1 - 5, default 1) +
+
+ + + + + +
+
+ Rating 5: + (1 - 5, default 5) +
+
+ + + + + +
+
+ Rating 6 (readonly): + (1 - 5, default 3) +
+
+ + + + + +
+
+		  +   + Test results:

+
+ Results will be displayed here +
+
+
+ +
 
 
+ +
+ + Test 3-A - With callback + + + + + +
+
+ Rating 1: + (1 - 3, default 2) + + + +
+
+ 
$('.auto-submit-star').rating({
+callback: function(value, link){
+  alert(value);
+}
+  });
+
+		  +   + Test results:

+
+ Results will be displayed here +
+
+
+ +
 
 
+ + +
+ Test 3-B - With hover effects + + + + + +
+
+ Rating 1: + (1 - 3, default 2) +
+ + + + + + Hover tips will appear in here +
+
+
+ 
$('.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 || '');
+}
+  });
+
+		  +   + Test results:

+
+ Results will be displayed here +
+
+
+ +
 
 
+ +
+ Test 4 - Half Stars and Split Stars + + + + + +
+ + + + + +
+
+ Rating 1: + (N/M/Y/?) + 
<input class="star {half:true}"
+ + + + +
+
+
+ Rating 2: + (10 - 60) + 
<input class="star {split:3}"
+ + + + + + +
+
+
+ Rating 3: + (0-5.0, default 3.5) + 
<input class="star {split:2}"
+ + + + + + + + + + +
+		 +
+ Rating 4: + (1-6, default 5) + 
<input class="star {split:2}"
+ + + + + + +
+
+
+ Rating 5: + (1-20, default 11) + 
<input class="star {split:4}"
+ + + + + + + + + + + + + + + + + + + + +
+
+
+ Rating 6 (readonly): + (1-20, default 13) + 
<input class="star {split:4}"
+ + + + + + + + + + + + + + + + + + + + +
+
+		  +   + Test results:

+
+ Results will be displayed here +
+
+
+
+ +
+

API

+

NEW to v3

+ +

API methods can be invoked this this:

+ 
$(selector).rating(
+   'method', // method name
+   [] // method arguments (not required)
+  );
+ +


+ +

$().rating('select', index / value)

+

+ 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. +

+

+ Example: (values A/B/C/D/E) +

+
+ + + + + + + +
+ By index: + + + + + + eg.: $('input').rating('select',3) +
+ By value: + + + + + + eg.: $('input').rating('select','C') +
+ +


+ +

$().rating('readOnly', true / false)

+

+ 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. +

+

+ Example: (values 1,2,3...10) +

+
+ + + + + + + + + + + + +
+ + eg.: $('input').rating('readOnly',true) +
+ + eg.: $('input').rating('readOnly',false) or simply $('input').rating('readOnly'); +
+ +


+ +

$().rating('disable') / $().rating('enable')

+

+ These methods bahve almost exactly as the readOnly method, however + they also control whether or not the select value is submitted with + the form. +

+

+ Example: (values 1,2,3...10) +

+
+ + + + + + + + + + + + +
+ + eg.: $('input').rating('disable') +
+ + eg.: $('input').rating('enable'); +
+
+ \ No newline at end of file -- cgit v1.2.3