blob: e87168f5087c9ee8a2d2fe3ce03f77276fc3d9e5 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
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>
|
