The Rating Widget can be used to rate some content by a single mouse click or using a keyboard.
The widget structure is as follows:
<widget container>
<star container> ... <star container> <messaage container>
</widget container>
The Rating Widget supports two or more star containers per widget. The number of star containers determines the maximum value of the rated value.
The markup used in this structure can be most any HTML, as long as it follows the rules for nesting.
Using the provided files, the default mark up is:
<span id="rating1" class="ratingContainer">
<span class="ratingButton"></span> <span class="ratingButton"></span> <span class="ratingRatedMsg">Thanks for your rating!</span> </span>
Widget Constructors are small pieces of javascript that activate the markup into the working widget. These scripts must come AFTER the markup on the page, since the markup needs to exist before the constructor fires.
<script type="text/javascript">
var rating1 = new Spry.Widget.Rating("spryrating1");
</script>
A basic constructor specifies the name of the widget and identifies the ID of the main markup container. The name of the widget is used to identify the widget for functions and methods.
<script type="text/javascript"> var widgetname = new Spry.Widget.Rating("id of widget container"); </script>
Constructor options allow users to specify certain attributes of the widget.
Constructor options follow the ID parameter, wrapped in curly braces {}. Options are name:value pairs, separated by a colon (:).
<script type="text/javascript">
var widgetname = new Spry.Widget.Rating("id of widget container",{option1:value, option2:value, option3:"value"});
</script>
Below are listed all options available for the Rating widget.
Option | Definition | Default | Values |
---|---|---|---|
ratingValue | Sets the number of stars that will appear as "already rated" when page loads. | 0 | number |
ratingValueElement | This option provides an id for an HTML element (this can be: text field, hidden field) whose "value" attribute will be used as initial value when page loads. This HTML element can be udated with the a value comming from the server after rating. | - | string |
afterRating | This option provides the Rating widget value after the user makes a rating. | currentValue |
|
allowMultipleRating | Using this option you can leave the widget enabled or read-only after the first rating. | true |
|
readOnly | Sets the widget in read-only mode, where the user can't rate. Only display already collected information. | false |
|
saveURL | The URL used for saving data on the server. It may contain the placeholder for the rated value, in the form @@ratingValue@@. If no postData option, the data will be sent on GET. |
- | string |
postData | This option allows the user to specify a string containing url encoded form arguments or any value, that will get submitted by POST. It may contain the placeholder for the rated value, in the form @@ratingValue@@. It is always send in conjunction with saveURL. If this option is present, the data will be automatically send by POST. |
- | string |
counter | By adding this option you can display the rate value when mouse hover the stars -e.g: a counter like [3.5 / 10]. | false |
|
rateHandler | In this option the user can specify a function to be called when the user makes a rating. If a saveUrl is present, this function will be called after the data has been sent on the server specified in saveURL. | - | function |
enableKeyboardNavigation | This option allows to the user to vote using keyboard keys. | true |
|
moveNextKeyCode | This option allows the user to assign a specific key to go to the next star. The value of the option is the keyboard code number. | number | 39 (left arrow key) |
movePrevtKeyCode | This option allows the user to assign a specific key to go to the previous star. The value of the option is the keyboard code number. | number | 37 (right arrow key) |
doRatingKeyCode | This option allows the users to make a rating by pressing a key. | number | 13 (Enter key) |
starFullClass | By adding this option and providing a new class as parameter value, you can override the default CSS class: "ratingFull". | ratingFull | string |
starHalfClass | By adding this option and providing a new class as parameter value, you can override the default CSS class: "ratingHalf". | ratingHalf | string |
starEmptyClass | By adding this option and providing a new class as parameter value, you can override the default CSS class: "ratingEmpty". | ratingEmpty | string |
starHoverClass | By adding this option and providing a new class as parameter value, you can override the default CSS class: "ratingHover." | ratingHover | string |
containerReadOnlyClass | By adding this option and providing a new class as parameter value, you can override the default CSS class: "ratingReadOnlyState.". Note that this applied on the widget container and if you change it or the above star classes, you must also change the other rules that uses them, e.g. .ratingReadOnlyState .ratingFull, in the CSS file. | ratingReadOnlyState | string |
<script type="text/javascript"> var rating1 = new Spry.Widget.Rating("rating1",{allowMultipleRating: false, ratingValueElement: 'rating1_val', saveUrl: 'SpryRating.php', postData: 'id=spryrating2&val=@@ratingValue@@', afterRating: 'serverValue'}); </script>
Recall that javascript is case sensitive.
Notification | Description |
---|---|
onPreRate |
The rating wigdet has just been used (via mouse or keyboard). No other data will be passed to the observers. |
onPostRate |
The rating widget has finished all processing required (including sendind data to a server, aclling a user function, updating its value). No other data will be passed to the observers. |
onServerUpdate | The server request to compute the new value for the Rating widget completed succesfuly and holds the new value. An object that describes the load request will be passed to all observers. This object contains the following properties:
|
onServerError | The server request to compute the new value for the Rating widget failed. An object that describes the load request will be passed to all observers. This object contains the following properties:
|
Adds an observer to the region. As with other components within Spry, the observer can be either an object or a function callback.
widgetName.addObserver(observer);
<script language="JavaScript" type="text/javascript"> // Create an rating widget and bind it to the element with // the id of "firstRating". var rating1 = new Spry.Widget.Rating("firstRating"); // Add a function as an observer of the widget. function myObserverFunc(notificationType, notifier, data) { if (notificationType == "onServerUpdate") alert("onServertUpdate fired!"); } rating1.addObserver(myObserverFunc); // Add an object as an observer of the widget. var obs = new Object; obs.onServerUpdate = function(notifier, data) { alert("onServerUpdate was fired!"); }; rating1.addObserver(obs); </script>
Removes the specified observer from the widget's list of observers. The same observer function or object that was used for the addObserver() call must be used in a call to removeObserver().
widgetName.removeObserver(observer);
<script language="JavaScript" type="text/javascript"> // Create a Rating widget and bind it to the element with // the id of "firstRating". var rating1 = new Spry.Widget.Rating("firstRating"); // Add a function as an observer of the widget. function myObserverFunc(notificationType, notifier, data) { if (notificationType == "onServerUpdate") alert("onServerUpdate fired!"); } rating1.addObserver(myObserverFunc); // Add an object as an observer of the widget. var obs = new Object; obs.onServerUpdate = function(notifier, data) { alert("onServerUpdate was fired!"); }; rating1.addObserver(obs); ... // Remove the observers that were added. rating1.removeObserver(myObserverFunc); rating1.removeObserver(obs); </script>
Disables the notification of observers.
widgetName.disableNotifications();
<a href="#" onclick="rating1.disableNotifications(); return false;">Disable Notifications</a>
Enables observer notifications.
Notifications are enabled by default within an HTML Panel.
widgetName.enableNotifications();
<a href="#" onclick="rating1.enableNotifications(); return false;">Enable Notifications</a>
Get the widget current state; possible values:
widgetName.getState();
<a href="#" onclick="alert(spryrating1.getState()); return false;">Get current state</a>
Set the state of the widget. See getState() for possible options.
widgetName.setState(newState);
<a href="#" onclick="rating1.setState('readonly'); return false;">Set state</a>
Get the widget current value. This can be:
widgetName.getValue();
<a href="#" onclick="alert(rating1.getValue()); return false;">Get current value</a>
Set the widget value. newValue must be a float number between 0 and the number of stars in the wigdet. This method is also used when the user actually makes a rating.
widgetName.setValue(newValue);
<a href="#" onclick="rating1.setValue(2); return false;">Set a value of 2</a>
Removes a message from the widget. By default, error messages such as when the widhet is read-only and user tries to rate, or the thank you message after rating, remain on screen, next to the widget. If you want to delete them you can use this method.
widgetName.removeMessage(className, timeout);
<a href="#" onclick="rating1.removeMessage('ratingReadOnlyErrState',1000); return false;">Remove error message</a>
Copyright © 2007. Adobe Systems Incorporated.
All rights reserved.