diff options
Diffstat (limited to 'includes/js/dojox/widget/tests/test_Rating.html')
| -rw-r--r-- | includes/js/dojox/widget/tests/test_Rating.html | 91 |
1 files changed, 91 insertions, 0 deletions
diff --git a/includes/js/dojox/widget/tests/test_Rating.html b/includes/js/dojox/widget/tests/test_Rating.html new file mode 100644 index 0000000..e87168f --- /dev/null +++ b/includes/js/dojox/widget/tests/test_Rating.html @@ -0,0 +1,91 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>Dojox Rating Test</title> + <style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../../../dijit/themes/tundra/tundra.css"; + @import "../../../dijit/themes/dijit.css"; + @import "../../../dijit/tests/css/dijitTests.css"; + @import "../Rating/Rating.css"; + </style> + + <script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug:true, parseOnLoad: true"></script> + <script type="text/javascript" src="/dijit/_Templated.js"></script> + <script type="text/javascript" src="/dijit/_Container.js"></script> + <script type="text/javascript" src="/dijit/form/_FormWidget.js"></script> + <script type="text/javascript" src="../Rating.js"></script> + <script type="text/javascript"> + dojo.require("dojo.parser"); // scan page for widgets and instantiate them + + </script> + <style> + /* Use bigger stars and make the node wider than the star actually is, + this creates some space around the stars (use background-position to center the stars)*/ + #rating1Box .dojoxRatingStar { + background-image:url(images/rating_empty.gif); + background-position:top center; + background-repeat:no-repeat; + height:30px; + width:40px; + } + + #rating1Box .dojoxRatingStarChecked { + background-image:url(images/rating_full.gif); + } + + #rating1Box .dojoxRatingStarHover { + background-image:url(images/rating_full.gif); + background-color:lightgrey; + } + + </style> +</head> +<body class="tundra"> + + <h1 class="testTitle">Dojox Rating test</h1> + + <h3>default usage:</h3> + The attribute "numStars" is not given, so the default 3 stars are shown.<br /> + <span id="rating0" dojoType="dojox.widget.Rating" onChange="dojo.query('#rating0Value')[0].innerHTML = this.value"></span> + The value is: <b><span id="rating0Value">0</span></b> + <br /><br /> + + <h3>5 stars:</h3> + The attribute "numStars" is given and set to 5, the initial value is 3.<br /> + <span dojoType="dojox.widget.Rating" numStars="5" value="3"></span> + <br /><br /> + + <h3>Customized, "my big stars":</h3> + The stars are bigger, and styled this way that there is space around each. + When hovering the background color is changed too. All this is achieved via CSS, see top of this file. + <br /> + The attribute "numStars" is set to 10, so we see ten stars. + <div id="rating1Box"> + <span id="rating1" dojoType="dojox.widget.Rating" numStars="10"> + <script type="dojo/event" event="onChange"> + dojo.query('#rating1Value')[0].innerHTML = this.value; + </script> + <script type="dojo/event" event="onMouseOver" args="evt,value"> + dojo.query('#rating1HoverValue')[0].innerHTML = value; + </script> + </span> + <br /><br /> + The value is: <b><span id="rating1Value">0</span></b> + <br /> + The mouse is over: <b><span id="rating1HoverValue">0</span></b> + </div> + + <h3>Spacing</h3> + Surrounded by text to see that it really takes all it's space + Surrounded by text to see that it really takes all it's space + Surrounded by text to see that it really takes all it's space + Surrounded by text to see that it really takes all it's space + Surrounded by text to see that it really takes all it's space<div dojoType="dojox.widget.Rating" numStars="5" value="1"></div> + Surrounded by text to see that it really takes all it's space + Surrounded by text to see that it really takes all it's space + Surrounded by text to see that it really takes all it's space + Surrounded by text to see that it really takes all it's space + <br /><br /> +</body> +</html> |