root/lang/javascript/ratingstars/trunk/doc/index.html @ 3309

Revision 3309, 6.2 kB (checked in by lyokato, 5 years ago)

lang/javascript/ratingstars: initial release onto CodeRepos?

Line 
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
3<head>
4        <title>RatingStars</title>
5<link rel="stylesheet" type="text/css" href="podstyle.css" /><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
6  <script type="text/javascript">
7
8  function toggleCode( id ) {
9    if ( document.getElementById )
10      elem = document.getElementById( id );
11    else if ( document.all )
12      elem = eval( "document.all." + id );
13    else
14      return false;
15
16    elemStyle = elem.style;
17
18    if ( elemStyle.display != "block" ) {
19      elemStyle.display = "block"
20    } else {
21      elemStyle.display = "none"
22    }
23
24    return true;
25  }
26  document.writeln( "<style type=\"text/css\">div.method-source-code { display: none }</style>" )
27  </script></head>
28<body>
29<div class="path">
30RatingStars
31</div>
32<div>
33<a href="src/ratingstars.pod">Source</a>
34</div>
35
36
37<div class="pod">
38<!-- INDEX START -->
39<h3 id="TOP">Index</h3>
40<ul>
41        <li><a href="#NAME">NAME</a></li>
42        <li><a href="#SYNOPSIS">SYNOPSIS</a></li>
43        <li><a href="#DESCRIPTION">DESCRIPTION</a></li>
44        <li><a href="#CONSTRUCTOR">CONSTRUCTOR</a><br />
45<ul>
46        <li><a href="#ESSENTIAL_PARAMETERS">ESSENTIAL PARAMETERS</a></li>
47        <li><a href="#OPTIONAL_PARAMETERS">OPTIONAL PARAMETERS</a></li>
48</ul>
49</li>
50        <li><a href="#EVENT_HANDLING">EVENT HANDLING</a></li>
51        <li><a href="#PLUGINS">PLUGINS</a><br />
52<ul>
53        <li><a href="#MessageLabel">MessageLabel</a></li>
54</ul>
55</li>
56        <li><a href="#AUTHOR">AUTHOR</a></li>
57        <li><a href="#LICENSE">LICENSE</a></li>
58</ul>
59<hr />
60<!-- INDEX END -->
61
62<h1 id="NAME">NAME <a href="#TOP" class="toplink"><img alt="^" src="up.gif" /></a></h1>
63
64<p>RatingStars - Rating stars controller</p>
65
66<h1 id="SYNOPSIS">SYNOPSIS <a href="#TOP" class="toplink"><img alt="^" src="up.gif" /></a></h1>
67
68<pre>  &lt;html&gt;
69  &lt;head&gt;
70  &lt;script type=&quot;text/javascript&quot; src=&quot;ratingstars.js&quot;&gt;&lt;/script&gt;
71  &lt;script type=&quot;text/javascript&quot;&gt;
72  &lt;!--
73  var stars = RatingStars.create({
74    ratedStarImage:   'img/star_image.gif', 
75    unratedStarImage: 'img/empty_star_image.gif', 
76    maxRate:          5,
77    currentRate:      3
78  });
79  stars.registerCallback('onClick', function(rate){
80    // do some stuff
81    // for example, AJAX action to save the selected rate.
82  });
83  //--&gt;
84  &lt;/script&gt;
85  &lt;/head&gt;
86  &lt;body onload=&quot;stars.setup('myrating');&quot;&gt;
87  &lt;h1&gt;RatingStars&lt;/h1&gt;
88  &lt;div id=&quot;myrating&quot;&gt;&lt;/div&gt;
89  &lt;/body&gt;
90  &lt;/html&gt;
91
92</pre><h1 id="DESCRIPTION">DESCRIPTION <a href="#TOP" class="toplink"><img alt="^" src="up.gif" /></a></h1>
93
94<p>This script helps you to generate a contents that shows a rate which a specific content has.
95Usually, in case such like this, people utilize star-image to represent how worth the content is.</p>
96
97<p>This class creates and displays a series of stars on a HTML element.
98If you set max rate 5, 5 stars are shown.
99And you can also set current rate. When you set current rate 3,
1003 stars become highlightened and the rest of the stars are empty.</p>
101
102<p>This enables not only showing but also editting.
103When users point over the stars, the rate changes according to
104the cursor position. If they do click action after they change the rate,
105The callback function will be invoked. Callback should be set before.</p>
106
107<p>With this callback, you can get the number that means *current rate*.
108You can send the number to server-side and save it.
109Threre are many ways. I guess Ajax is popular now.</p>
110
111<h1 id="CONSTRUCTOR">CONSTRUCTOR <a href="#TOP" class="toplink"><img alt="^" src="up.gif" /></a></h1>
112
113<pre>  var stars = RatingStars.create({
114    param1: value1,
115    param2: value2
116  });
117
118</pre><h2 id="ESSENTIAL_PARAMETERS">ESSENTIAL PARAMETERS</h2>
119
120<p>At first, you have to indicate two images' path. These are ratedStarImage and unratedStarImage.
121In almost of situations, star figure filled yellow is used as ratedStarImage, and the empty figure
122is used as unrated.</p>
123
124<dl>
125        <dt>ratedStarImage</dt>
126        <dt>unratedStarImage</dt>
127</dl>
128<h2 id="OPTIONAL_PARAMETERS">OPTIONAL PARAMETERS</h2>
129
130<p>Following parameters can be set if you want.</p>
131
132<dl>
133        <dt>halfRatedStarImage</dt>
134                <dd><p>If you set halfRatedStarImage like above parameters, It behaves like
1350.5 is the base unit. For example, when you set current rate 3.75,
136It shows 3 filled stars and 1 half filled star, and makes the rest empty.</p></dd>
137        <dt>userRatedStarImage</dt>
138                <dd><p>Furthermore, you can use another image to disinguish the rated
139image for default and the image user set.</p></dd>
140        <dt>freezeOnClick</dt>
141                <dd><p>By default, true is set. It'll be flozen when user click on the stars.
142If this is set as false, user can re-choose rate time and again.</p></dd>
143        <dt>maxRate</dt>
144                <dd><p>5 is set by default.</p></dd>
145        <dt>currentRate</dt>
146                <dd><p>0 is set by defaul.</p></dd>
147</dl>
148<h1 id="EVENT_HANDLING">EVENT HANDLING <a href="#TOP" class="toplink"><img alt="^" src="up.gif" /></a></h1>
149
150<pre>  stars.registerCallback(eventName, callback);
151
152</pre><p>For example</p>
153
154<pre>  stars.registerCallback('onClick', function(rate) {
155    alert(rate);
156  } );
157
158</pre><dl>
159        <dt>onClick</dt>
160        <dt>onChange</dt>
161        <dt>onDefault</dt>
162</dl>
163<h1 id="PLUGINS">PLUGINS <a href="#TOP" class="toplink"><img alt="^" src="up.gif" /></a></h1>
164
165<pre>  stars.loadPlugin('PluginName');
166
167</pre><h2 id="MessageLabel">MessageLabel</h2>
168
169<pre>  &lt;div id=&quot;messageElement&quot;&gt;&lt;/div&gt;
170
171  stars.loadPlugin('MessageLabel');
172  stars.setMessageElement('messageElement');
173  stars.setDefaultMessage('Choose rate, please.');
174  stars.setSuccessfulMessage('Thanks!');
175  stars.setRateMessage(1, 'awful');
176  stars.setRateMessage(2, 'poor');
177  stars.setRateMessage(3, 'good');
178  stars.setRateMessage(4, 'great!');
179  stars.setRateMessage(5, 'awesome!');
180
181</pre><h1 id="AUTHOR">AUTHOR <a href="#TOP" class="toplink"><img alt="^" src="up.gif" /></a></h1>
182
183<p>Lyo Kato, <code>lyo.kato@gmail.com</code></p>
184
185<h1 id="LICENSE">LICENSE <a href="#TOP" class="toplink"><img alt="^" src="up.gif" /></a></h1>
186
187<p>MIT License</p>
188
189
190</div><div class="footer">generated by <a href="http://search.cpan.org/perldoc?Pod%3A%3AProjectDocs">Pod::ProjectDocs</a></div></body>
191</html>
Note: See TracBrowser for help on using the browser.