dojox
Version:
Dojo eXtensions, a rollup of many useful sub-projects and varying states of maturity – from very stable and robust, to alpha and experimental. See individual projects contain README files for details.
114 lines (103 loc) • 4.29 kB
HTML
<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 "../resources/Rating.css";
</style>
<script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="isDebug:true, parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dojox.form.Rating");
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.form.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.form.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.form.Rating" numStars="10">
<script type="dojo/event" data-dojo-event="onChange">
dojo.query('#rating1Value')[0].innerHTML = this.value;
</script>
<script type="dojo/event" data-dojo-event="onMouseOver" data-dojo-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.form.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 />
<h3>Inside a dojo form</h3>
<script type="text/javascript">
dojo.require("dijit.form.Form");
dojo.require("dijit.form.FilteringSelect");
dojo.require("dijit.form.Button");
</script>
<form jsId="rating2form" dojoType="dijit.form.Form">
<select dojoType="dijit.form.FilteringSelect">
<option>Does</option>
<option>this</option>
<option>work?</option>
</select>
<br /><br />
<div jsId="rating2" dojoType="dojox.form.Rating" numStars="5" value="1" name="rating_widget_2"></div>
<br /><br />
<button dojoType="dijit.form.Button">
<script type="dojo/event" data-dojo-event="onClick">
dojo.query('#rating2Value')[0].innerHTML = rating2.value;
dojo.query('#rating2FormValue')[0].innerHTML = JSON.stringify(rating2form.get('value'));
</script>
Click me</button>
<br /><br />
The value is: <b><span id="rating2Value">0</span></b>
The form value is: <b><span id="rating2FormValue">-empty-</span></b>
</form>
</body>
</html>