heater.html revision 38ede344a04d04daedd560a485bd38f50e4c0a71
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html debug="true">
<head>
<title>use('gallery-')</title>
<script src="/build/yui/yui-debug.js" type="text/javascript" charset="utf-8"></script>
<script src="/build/dump/dump-debug.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
YUI({
//Last Gallery Build of this module
gallery: 'gallery-2010.07.28-20-07'
}).use('gallery-heat-bar-rater', function(Y) {
/*
* Create a new instance of heat bar rater from #myRatingParam1
* Widget would be initialized to 'selected' value i.e 5
* Widget will have its 'default' colors and rating legends
*/
var myHeatBarRater1 = new Y.HeatBarRater({
srcNode: '#myRatingParam1'
});
/*
* render the widget
*/
myHeatBarRater1.render();
/*
* get current rating value
*/
Y.log('Current rating myHeatBarRater1: ' + myHeatBarRater1.get('rating')); // 5
/*
* Create a new instance of heat bar rater from #myRatingParam2
* Widget would be initialized to 'selected' value i.e 0
* Give widget its 'custom' colors and rating legends
*/
var myHeatBarRater2 = new Y.HeatBarRater({
srcNode: '#myRatingParam2'
, valueMap: {
1: {color: '0e0', legend: 'Awful'}
, 5: {color: '0c0', legend: 'Poor'}
, 15: {color: '0a0', legend: 'Average'}
, 50: {color: '080', legend: 'Good'}
, 500: {color: '060', legend: 'Excellent'}
}
});
myHeatBarRater2.render();
/*
* listen to ratingChange events
*/
myHeatBarRater1.after('ratingChange', function(e) {
Y.log('myHeatBarRater1 rating value: ' + e.newVal);
});
/*
* listen to ratingChange events through YUI instance
*/
Y.after('heatbarrater:ratingChange', function(e) {
Y.log('ratingChange subscribed to YUI instance: ' + e.newVal);
});
});
</script>
<body>
<div>
<!-- construct heat bar rater widget initialized to 5 from the following markup -->
<select name="myRatingParam1" id="myRatingParam1" class="yui3-heatbarrater-loading">
<option value="0">0 - Not rated</option>
<option value="1">1 - Awful</option>
<option value="2">2 - Awful</option>
<option value="3">3 - Not that good</option>
<option value="4">4 - Not that good</option>
<option selected="selected" value="5">5 - Okay</option>
<option value="6">6 - Okay</option>
<option value="7">7 - Pretty good</option>
<option value="8">8 - Pretty good</option>
<option value="9">9 - Fantastic</option>
<option value="10">10 - Fantastic</option>
</select>
<!--
Above markup will be replaced by heat bar widget markup on render() like this -
<div id="yui_3_1_1_1_128014346450525" class="yui3-widget yui3-heatbarrater">
<div id="yui_3_1_1_1_128014346450534" class="yui3-heatbarrater-content">
.....widget's markup......
<input type="hidden" name="myRatingParam1" value="5">
</div>
</div>
Note that an additional 'hidden' input element with id="myRatingParam1" will be added to widget's content box.
This input param's value is synchronously updated with the rating selected by the user and facilitates submitting of rating value to the back-end server through Form-Submit
-->
</div>
<div>
<!-- construct heat bar widget (with custom values, colors and legends) initialized to 0 from the following markup -->
<select name="myRatingParam2" id="myRatingParam2" class="yui3-heatbarrater-loading">
<option selected="selected" value="0">0 - Not rated</option>
<option value="1">1 - Awful</option>
<option value="5">5 - Poor</option>
<option value="15">15 - Average</option>
<option value="50">50 - Good</option>
<option value="500">500 - Excellent</option>
</select>
</div>
</body>
</html>