heater.html revision 38ede344a04d04daedd560a485bd38f50e4c0a71
43b4c41fbb07705c9df321221ab9cb9832460407Christian Maeder<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
5191fa24c532d1f67e7a642e9aece65efb8a0975Christian Maeder <script src="/build/yui/yui-debug.js" type="text/javascript" charset="utf-8"></script>
43b4c41fbb07705c9df321221ab9cb9832460407Christian Maeder <script src="/build/dump/dump-debug.js" type="text/javascript" charset="utf-8"></script>
5191fa24c532d1f67e7a642e9aece65efb8a0975Christian Maeder <script type="text/javascript" charset="utf-8">
43b4c41fbb07705c9df321221ab9cb9832460407Christian Maeder //Last Gallery Build of this module
5191fa24c532d1f67e7a642e9aece65efb8a0975Christian Maeder gallery: 'gallery-2010.07.28-20-07'
f4a2a20e49f41b2afa657e5e64d9e349c7faa091Christian Maeder}).use('gallery-heat-bar-rater', function(Y) {
5191fa24c532d1f67e7a642e9aece65efb8a0975Christian Maeder * Create a new instance of heat bar rater from #myRatingParam1
5191fa24c532d1f67e7a642e9aece65efb8a0975Christian Maeder * Widget would be initialized to 'selected' value i.e 5
5191fa24c532d1f67e7a642e9aece65efb8a0975Christian Maeder * Widget will have its 'default' colors and rating legends
a53841f6d6e86ac751c12a33dc8aadf53f59d977Klaus Luettich var myHeatBarRater1 = new Y.HeatBarRater({
a53841f6d6e86ac751c12a33dc8aadf53f59d977Klaus Luettich srcNode: '#myRatingParam1'
68d10d143f29fcff3c637ba24f90e983995ceae6Christian Maeder * render the widget
a6082d6cfdfbdc6a4e70430bb25638dfa4f0db9bHeng Jiang * get current rating value
e7757995211bd395dc79d26fe017d99375f7d2a6Christian Maeder Y.log('Current rating myHeatBarRater1: ' + myHeatBarRater1.get('rating')); // 5
a1ed34933c266ce85066acb0d7b20c90cb8eb213Christian Maeder * Create a new instance of heat bar rater from #myRatingParam2
c0c2380bced8159ff0297ece14eba948bd236471Christian Maeder * Widget would be initialized to 'selected' value i.e 0
8410667510a76409aca9bb24ff0eda0420088274Christian Maeder * Give widget its 'custom' colors and rating legends
63f0e65a37b95621334db9ee4ba0cd9d826f5c0fChristian Maeder var myHeatBarRater2 = new Y.HeatBarRater({
8410667510a76409aca9bb24ff0eda0420088274Christian Maeder srcNode: '#myRatingParam2'
404166b9366552e9ec5abb87a37c76ec8a815fb7Klaus Luettich , valueMap: {
b1f59a4ea7c96f4c03a4d7cfcb9c5e66871cfbbbChristian Maeder 1: {color: '0e0', legend: 'Awful'}
ad270004874ce1d0697fb30d7309f180553bb315Christian Maeder , 5: {color: '0c0', legend: 'Poor'}
4d56f2fa72e4aec20eb827c11ed49c8cbb7014bdChristian Maeder , 15: {color: '0a0', legend: 'Average'}
4cb215739e9ab13447fa21162482ebe485b47455Christian Maeder , 50: {color: '080', legend: 'Good'}
8ef75f1cc0437656bf622cec5ac9e8ea221da8f2Christian Maeder , 500: {color: '060', legend: 'Excellent'}
d23b0cc79c0d204e6ec758dff8d0ba71c9f693f7Christian Maeder * listen to ratingChange events
f4a2a20e49f41b2afa657e5e64d9e349c7faa091Christian Maeder myHeatBarRater1.after('ratingChange', function(e) {
63f0e65a37b95621334db9ee4ba0cd9d826f5c0fChristian Maeder Y.log('myHeatBarRater1 rating value: ' + e.newVal);
7cc09dd93962a2155c34d209d1d4cd7d7b838264Christian Maeder * listen to ratingChange events through YUI instance
1aee4aaddde105264c1faf394d88e302c05094ffChristian Maeder Y.after('heatbarrater:ratingChange', function(e) {
f041c9a6bda23de33a38490e35b831ae18d96b45Christian Maeder Y.log('ratingChange subscribed to YUI instance: ' + e.newVal);
dcbd32289a7bdf1e6edd06c6ab0698c6a9dbf37aChristian Maeder <!-- construct heat bar rater widget initialized to 5 from the following markup -->
2c9df69accd8924e7cef3bf8f686626958499c7aChristian Maeder <select name="myRatingParam1" id="myRatingParam1" class="yui3-heatbarrater-loading">
356fa49fe3e6a8398f92d13e9f920d0f093697ecChristian Maeder <option value="3">3 - Not that good</option>
4ed0007ac9caea5b468f202521352d153481423cChristian Maeder <option value="4">4 - Not that good</option>
356fa49fe3e6a8398f92d13e9f920d0f093697ecChristian Maeder <option selected="selected" value="5">5 - Okay</option>
79e80c4b3f0ebb337d84415a50f29ccfc793e68bChristian Maeder Above markup will be replaced by heat bar widget markup on render() like this -
757e6c79ec40491d45dc72c82b5eb59a386634b0Jian Chun Wang <div id="yui_3_1_1_1_128014346450525" class="yui3-widget yui3-heatbarrater">
ecf76bc89d9a2ecd7ac7310d30654b9a79d97d62Klaus Luettich <div id="yui_3_1_1_1_128014346450534" class="yui3-heatbarrater-content">
ecf76bc89d9a2ecd7ac7310d30654b9a79d97d62Klaus Luettich <input type="hidden" name="myRatingParam1" value="5">
f04e8f3ff56405901be968fd4c6e9769239f1a9bKlaus Luettich Note that an additional 'hidden' input element with id="myRatingParam1" will be added to widget's content box.
8c812cd83569e973f10cf69a342424ceabc07af9Christian Maeder 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
8a28707e9155465c6f2236a06eac6580a65c7025Christian Maeder <!-- construct heat bar widget (with custom values, colors and legends) initialized to 0 from the following markup -->
f04e8f3ff56405901be968fd4c6e9769239f1a9bKlaus Luettich <select name="myRatingParam2" id="myRatingParam2" class="yui3-heatbarrater-loading">
797ccd67cb8ae127be097cd43448801b673e3b69Christian Maeder <option selected="selected" value="0">0 - Not rated</option>
9e748851c150e1022fb952bab3315e869aaf0214Christian Maeder <option value="500">500 - Excellent</option>