+++ /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