| <!doctype html public "-//w3c//dtd html 4.0 transitional//en"> |
| <html> |
| <!-- |
| Copyright 2010 The Closure Library Authors. All Rights Reserved. |
| |
| Use of this source code is governed by the Apache License, Version 2.0. |
| See the COPYING file for details. |
| --> |
| <head> |
| <title>Ratings Widget</title> |
| <script type="text/javascript" src="../base.js"></script> |
| <script type="text/javascript"> |
| goog.require('goog.events'); |
| goog.require('goog.ui.Ratings'); |
| </script> |
| <style class="text/css"> |
| /* NOTE(pupius): Horrible class names needed to get around IE6 not supporting |
| the ".foo.bar" selector */ |
| |
| #test { |
| height: 20px; |
| } |
| |
| label { |
| padding-left: 5px; |
| font: normal 13px/20px arial; |
| color: #999; |
| } |
| |
| |
| .goog-ratings { |
| display: block; |
| float: left; |
| height: 20px; |
| height: 20px; |
| } |
| |
| .goog-ratings-star { |
| display: block; |
| float: left; |
| padding-left: 13px; |
| height: 19px; |
| cursor: pointer; |
| background-image: url('../images/ratingstars.gif'); |
| background-repeat: no-repeat; |
| } |
| |
| .goog-ratings-star.goog-ratings-disabled { |
| opacity: 0.7; |
| } |
| |
| .goog-ratings-firststar-off { |
| padding-left: 20px; |
| background-position: 0px 0px; |
| } |
| |
| .goog-ratings-firststar-on { |
| padding-left: 20px; |
| background-position: 0px -20px; |
| } |
| |
| .goog-ratings-midstar-off { |
| background-position: 0px -40px; |
| } |
| |
| .goog-ratings-midstar-on { |
| background-position: 0px -60px; |
| } |
| |
| .goog-ratings-laststar-off { |
| padding-left: 18px; |
| background-position: 0px -80px; |
| } |
| |
| .goog-ratings-laststar-on { |
| padding-left: 18px; |
| background-position: 0px -100px; |
| } |
| </style> |
| </head> |
| |
| <body> |
| <div id="test1"> |
| <select name="sel"> |
| <option>Awful</option> |
| <option>Bad</option> |
| <option selected>Ok</option> |
| <option>Good</option> |
| <option>Excellent</option> |
| </select> |
| <label id="lab" for="sel">Rate this...</label> |
| </div> |
| <div id="test2" style="height: 40px;"></div> |
| <div id="test3" style="height: 40px;"></div> |
| <div id="test4" style="height: 40px;"></div> |
| <script type="text/javascript"> |
| var rw1 = new goog.ui.Ratings(); |
| var defaultText = 'Rate this...'; |
| goog.events.listen(rw1, 'change', function(e) { |
| defaultText = e.target.getValue() || 'Rate this...'; |
| document.getElementById('lab').innerHTML = defaultText; |
| }); |
| goog.events.listen(rw1, 'highlightchange', function(e) { |
| document.getElementById('lab').innerHTML = |
| e.target.getHighlightedValue() || defaultText; |
| }); |
| rw1.decorate(document.getElementById('test1')); |
| |
| |
| var rw2 = new goog.ui.Ratings(); |
| rw2.setRatings([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]); |
| rw2.render(document.getElementById('test2')); |
| rw2.setSelectedIndex(3); |
| |
| setTimeout(function() { rw2.setSelectedIndex(8); }, 500); |
| setTimeout(function() { rw2.setSelectedIndex(5); }, 750); |
| setTimeout(function() { rw2.exitDocument(); }, 1000); |
| setTimeout(function() { rw2.setSelectedIndex(1); }, 1250); |
| setTimeout(function() { rw2.render(document.getElementById('test3')); }, 1500); |
| setTimeout(function() { rw2.setSelectedIndex(4); }, 1750); |
| setTimeout(function() { rw2.setSelectedIndex(8); }, 2000); |
| setTimeout(function() { rw2.setEnabled(false); }, 3000); |
| setTimeout(function() { rw2.exitDocument(); }, 4000); |
| setTimeout(function() { rw2.render(document.getElementById('test4')); }, 5000); |
| setTimeout(function() { rw2.setEnabled(true); } , 6000); |
| setTimeout(function() { rw2.exitDocument(); }, 7000); |
| |
| </script> |
| </body> |
| </html> |
