| 1 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
|---|
| 2 | <html> |
|---|
| 3 | <head> |
|---|
| 4 | <title>Dojox Rating Test</title> |
|---|
| 5 | <style type="text/css"> |
|---|
| 6 | @import "../../../dojo/resources/dojo.css"; |
|---|
| 7 | @import "../../../dijit/themes/tundra/tundra.css"; |
|---|
| 8 | @import "../../../dijit/themes/dijit.css"; |
|---|
| 9 | @import "../../../dijit/tests/css/dijitTests.css"; |
|---|
| 10 | @import "../resources/Rating.css"; |
|---|
| 11 | </style> |
|---|
| 12 | |
|---|
| 13 | <script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="isDebug:true, parseOnLoad: true"></script> |
|---|
| 14 | <script type="text/javascript"> |
|---|
| 15 | dojo.require("dojox.form.Rating"); |
|---|
| 16 | dojo.require("dojo.parser"); // scan page for widgets and instantiate them |
|---|
| 17 | </script> |
|---|
| 18 | <style> |
|---|
| 19 | /* Use bigger stars and make the node wider than the star actually is, |
|---|
| 20 | this creates some space around the stars (use background-position to center the stars)*/ |
|---|
| 21 | #rating1Box .dojoxRatingStar { |
|---|
| 22 | background-image:url(images/rating_empty.gif); |
|---|
| 23 | background-position:top center; |
|---|
| 24 | background-repeat:no-repeat; |
|---|
| 25 | height:30px; |
|---|
| 26 | width:40px; |
|---|
| 27 | } |
|---|
| 28 | |
|---|
| 29 | #rating1Box .dojoxRatingStarChecked { |
|---|
| 30 | background-image:url(images/rating_full.gif); |
|---|
| 31 | } |
|---|
| 32 | |
|---|
| 33 | #rating1Box .dojoxRatingStarHover { |
|---|
| 34 | background-image:url(images/rating_full.gif); |
|---|
| 35 | background-color:lightgrey; |
|---|
| 36 | } |
|---|
| 37 | |
|---|
| 38 | </style> |
|---|
| 39 | </head> |
|---|
| 40 | <body class="tundra"> |
|---|
| 41 | |
|---|
| 42 | <h1 class="testTitle">Dojox Rating test</h1> |
|---|
| 43 | |
|---|
| 44 | <h3>default usage:</h3> |
|---|
| 45 | The attribute "numStars" is not given, so the default 3 stars are shown.<br /> |
|---|
| 46 | <span id="rating0" dojoType="dojox.form.Rating" onChange="dojo.query('#rating0Value')[0].innerHTML = this.value"></span> |
|---|
| 47 | The value is: <b><span id="rating0Value">0</span></b> |
|---|
| 48 | <br /><br /> |
|---|
| 49 | |
|---|
| 50 | <h3>5 stars:</h3> |
|---|
| 51 | The attribute "numStars" is given and set to 5, the initial value is 3.<br /> |
|---|
| 52 | <span dojoType="dojox.form.Rating" numStars="5" value="3"></span> |
|---|
| 53 | <br /><br /> |
|---|
| 54 | |
|---|
| 55 | <h3>Customized, "my big stars":</h3> |
|---|
| 56 | The stars are bigger, and styled this way that there is space around each. |
|---|
| 57 | When hovering the background color is changed too. All this is achieved via CSS, see top of this file. |
|---|
| 58 | <br /> |
|---|
| 59 | The attribute "numStars" is set to 10, so we see ten stars. |
|---|
| 60 | <div id="rating1Box"> |
|---|
| 61 | <span id="rating1" dojoType="dojox.form.Rating" numStars="10"> |
|---|
| 62 | <script type="dojo/event" data-dojo-event="onChange"> |
|---|
| 63 | dojo.query('#rating1Value')[0].innerHTML = this.value; |
|---|
| 64 | </script> |
|---|
| 65 | <script type="dojo/event" data-dojo-event="onMouseOver" data-dojo-args="evt,value"> |
|---|
| 66 | dojo.query('#rating1HoverValue')[0].innerHTML = value; |
|---|
| 67 | </script> |
|---|
| 68 | </span> |
|---|
| 69 | <br /><br /> |
|---|
| 70 | The value is: <b><span id="rating1Value">0</span></b> |
|---|
| 71 | <br /> |
|---|
| 72 | The mouse is over: <b><span id="rating1HoverValue">0</span></b> |
|---|
| 73 | </div> |
|---|
| 74 | |
|---|
| 75 | <h3>Spacing</h3> |
|---|
| 76 | Surrounded by text to see that it really takes all it's space |
|---|
| 77 | Surrounded by text to see that it really takes all it's space |
|---|
| 78 | Surrounded by text to see that it really takes all it's space |
|---|
| 79 | Surrounded by text to see that it really takes all it's space |
|---|
| 80 | Surrounded by text to see that it really takes all it's space<div dojoType="dojox.form.Rating" numStars="5" value="1"></div> |
|---|
| 81 | Surrounded by text to see that it really takes all it's space |
|---|
| 82 | Surrounded by text to see that it really takes all it's space |
|---|
| 83 | Surrounded by text to see that it really takes all it's space |
|---|
| 84 | Surrounded by text to see that it really takes all it's space |
|---|
| 85 | <br /><br /> |
|---|
| 86 | |
|---|
| 87 | <h3>Inside a dojo form</h3> |
|---|
| 88 | <script type="text/javascript"> |
|---|
| 89 | dojo.require("dijit.form.Form"); |
|---|
| 90 | dojo.require("dijit.form.FilteringSelect"); |
|---|
| 91 | dojo.require("dijit.form.Button"); |
|---|
| 92 | </script> |
|---|
| 93 | <form dojoType="dijit.form.Form"> |
|---|
| 94 | <select dojoType="dijit.form.FilteringSelect"> |
|---|
| 95 | <option>Does</option> |
|---|
| 96 | <option>this</option> |
|---|
| 97 | <option>work?</option> |
|---|
| 98 | </select> |
|---|
| 99 | <br /><br /> |
|---|
| 100 | <div dojoType="dojox.form.Rating" numStars="5" value="1"></div> |
|---|
| 101 | <br /><br /> |
|---|
| 102 | <button dojoType="dijit.form.Button">Click me</button> |
|---|
| 103 | </form> |
|---|
| 104 | </body> |
|---|
| 105 | </html> |
|---|
