--- /dev/null
+<!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>
projects / eow / blobdiff