WebSVN - Integrator Subversion - Blame - Rev 1 - /DOCUMENTOS E ANALISE/telas/assets/global/plugins/rateit/example/example.htm

Rev	Author	Line No.	Line
1	espaco	1	<!DOCTYPE html>
		2	<html>
		3	<head>
		4	<title>RateIt</title>
		5	<link href="../src/rateit.css" rel="stylesheet" type="text/css">
		6
		7	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
		8
		9	<style>
		10	body
		11	{
		12	font-family: Tahoma;
		13	font-size: 12px;
		14	}
		15	h1
		16	{
		17	font-size: 1.7em;
		18	}
		19	h2
		20	{
		21	font-size: 1.5em;
		22	}
		23	h3
		24	{
		25	font-size: 1.2em;
		26	}
		27	ul.nostyle
		28	{
		29	list-style: none;
		30	}
		31	ul.nostyle h3
		32	{
		33	margin-left: -20px;
		34	}
		35	</style>
		36	<!-- alternative styles -->
		37	<link href="content/bigstars.css" rel="stylesheet" type="text/css">
		38	<link href="content/antenna.css" rel="stylesheet" type="text/css">
		39	<!-- syntax highlighter -->
		40	<link href="sh/shCore.css" rel="stylesheet" type="text/css">
		41	<link href="sh/shCoreDefault.css" rel="stylesheet" type="text/css">
		42	</head>
		43	<body>
		44	<h1>
		45	RateIt plugin</h1>
		46	<h2>
		47	Prerequisites</h2>
		48	<p>
		49	In order to use RateIt you'll need:
		50	<ul>
		51	<li><a target="_blank" href="http://www.jquery.com">jQuery 1.6.0</a> or newer.</li>
		52	<li>jquery.rateit.min.js, rateit.css, delete.gif, star.gif - <a href="http://rateit.codeplex.com/releases">
		53	Download RateIt</a></li>
		54	<li>Place a reference to the rateit.css stylesheet into the page head.</li>
		55	<li>Place a script reference to jquery.rateit.js before your </body> tag.
		56	</li>
		57	</ul>
		58	</p>
		59	<h2>
		60	Options</h2>
		61	Go to the <a href="http://rateit.codeplex.com">RateIt project homepage</a> to view
		62	the documentation.
		63	<h2>
		64	Examples</h2>
		65	<div style="font-weight: bold">
		66	<span id="toc"></span>
		67	</div>
		68	<ul class="nostyle" id="examples">
		69	<li id="ex_a1">
		70	<h3>
		71	1a) Basic usage</h3>
		72	<div class="rateit">
		73	</div>
		74	<pre class="brush: xml">
		75	<div class="rateit">
		76	</div>
		77	</pre>
		78	</li>
		79	<li id="ex_1b">
		80	<h3>
		81	1a) Basic usage (inline element)</h3>
		82	<span class="rateit">
		83	</span>
		84	<pre class="brush: xml">
		85	<span class="rateit">
		86	</span>
		87	</pre>
		88	</li>
		89	<li id="ex_2a">
		90	<h3>
		91	2a) Progressive enhancement (using HTML5 range input type)
		92	</h3>
		93	<input type="range" min="0" max="7" value="0" step="0.5" id="backing2">
		94	<div class="rateit" data-rateit-backingfld="#backing2">
		95	</div>
		96	<pre class="brush: xml">
		97	<input type="range" min="0" max="7" value="0" step="0.5" id="backing2">
		98	<div class="rateit" data-rateit-backingfld="#backing2"></div>
		99	</pre>
		100	<button onclick="$('#backing2').toggle()">
		101	Toggle Backing Field visibility</button>
		102	</li>
		103	<li id="ex_2b">
		104	<h3>
		105	2b) Progressive enhancement (using select)
		106	</h3>
		107	<select id="backing2b">
		108	<option value="0">Bad</option>
		109	<option value="1">OK</option>
		110	<option value="2">Great</option>
		111	<option value="3">Excellent</option>
		112	</select>
		113	<div class="rateit" data-rateit-backingfld="#backing2b">
		114	</div>
		115	<pre class="brush: xml">
		116	<select id="backing2b">
		117	<option value="0">Bad</option>
		118	<option value="1">OK</option>
		119	<option value="2">Great</option>
		120	<option value="3">Excellent</option>
		121	</select>
		122	<div class="rateit" data-rateit-backingfld="#backing2b"></div>
		123	</pre>
		124	</li>
		125	<li id="ex_3">
		126	<h3>
		127	3) Readonly and preset value</h3>
		128	<div class="rateit" data-rateit-value="2.5" data-rateit-ispreset="true" data-rateit-readonly="true">
		129	</div>
		130	<pre class="brush: xml">
		131	<div class="rateit" data-rateit-value="2.5" data-rateit-ispreset="true" data-rateit-readonly="true"></div>
		132	</pre>
		133	</li>
		134	<li id="ex_4">
		135	<h3>
		136	4) More settings</h3>
		137	<input type="range" value="4" step="0.25" id="backing4">
		138	<div class="rateit" data-rateit-backingfld="#backing4" data-rateit-resetable="false" data-rateit-ispreset="true"
		139	data-rateit-min="0" data-rateit-max="10">
		140	</div>
		141	<pre class="brush: xml">
		142	<input type="range" value="4" step="0.25" id="backing4">
		143	<div class="rateit" data-rateit-backingfld="#backing4" data-rateit-resetable="false" data-rateit-ispreset="true"
		144	data-rateit-min="0" data-rateit-max="10">
		145	</div>
		146
		147	</pre>
		148	</li>
		149	<li id="ex_5">
		150	<h3>
		151	5) Javascript interaction</h3>
		152	<div class="rateit" id="rateit5" data-rateit-min="2">
		153	</div>
		154	<div>
		155	<span id="value5"></span><span id="hover5"></span>
		156	</div>
		157
		158	<script type="text/javascript">
		159	$("#rateit5").bind('rated', function (event, value) { $('#value5').text('You\'ve rated it: ' + value); });
		160	$("#rateit5").bind('reset', function () { $('#value5').text('Rating reset'); });
		161	$("#rateit5").bind('over', function (event, value) { $('#hover5').text('Hovering over: ' + value); });
		162	</script>
		163
		164	<pre class="brush: xml">
		165	<div class="rateit" id="rateit5" data-rateit-min="2">
		166	</div>
		167	<div>
		168	<span id="value5"></span>
		169	<span id="hover5"></span>
		170	</div>
		171
		172	<script type="text/javascript">
		173	$("#rateit5").bind('rated', function (event, value) { $('#value5').text('You\'ve rated it: ' + value); });
		174	$("#rateit5").bind('reset', function () { $('#value5').text('Rating reset'); });
		175	$("#rateit5").bind('over', function (event, value) { $('#hover5').text('Hovering over: ' + value); });
		176	</script>
		177	</pre>
		178	</li>
		179	<li id="ex_6">
		180	<h3>
		181	6) Javascript invocation</h3>
		182	<input type="hidden" id="backing6">
		183	<div id="rateit6">
		184	</div>
		185
		186	<script type="text/javascript">
		187	$(function () { $('#rateit6').rateit({ max: 20, step: 2, backingfld: '#backing6' }); });
		188	</script>
		189
		190	<pre class="brush: xml">
		191	<input type="hidden" id="backing6">
		192	<div id="rateit6">
		193	</div>
		194
		195	<script type="text/javascript">
		196	$(function () { $('#rateit6').rateit({ max: 20, step: 2, backingfld: '#backing6' }); });
		197	</script>
		198	</pre>
		199	</li>
		200	<li id="ex_7a">
		201	<h3>
		202	7a) Styling</h3>
		203	<p>
		204	You can change the styles of the plugin in a two ways.
		205	<ul>
		206	<li>You can change change the star.gif and delete.gif pictures (and perhaps the default
		207	starwidth, and starheight values in the javascript file). This will change the style
		208	everywhere.</li>
		209	<li>You can change individual items, by adding a stylesheet with a few rules.</li>
		210	</ul>
		211	Here I've opted for the second option.
		212	</p>
		213	<div class="rateit bigstars" data-rateit-starwidth="32" data-rateit-starheight="32">
		214	</div>
		215	<h4>
		216	Inline code</h4>
		217	<pre class="brush: xml">
		218	<div class="rateit bigstars" data-rateit-starwidth="32" data-rateit-starheight="32"></div>
		219	</pre>
		220	<h4>
		221	Style sheet</h4>
		222	<pre class="brush: css">
		223	div.bigstars div.rateit-range
		224	{
		225	background: url(star-white32.png);
		226	height: 32px;
		227	}
		228
		229	div.bigstars div.rateit-hover
		230	{
		231	background: url(star-gold32.png);
		232	}
		233
		234	div.bigstars div.rateit-selected
		235	{
		236	background: url(star-red32.png);
		237	}
		238
		239	div.bigstars div.rateit-reset
		240	{
		241	background: url(star-black32.png);
		242	width: 32px;
		243	height: 32px;
		244	}
		245
		246	div.bigstars div.rateit-reset:hover
		247	{
		248	background: url(star-white32.png);
		249	}
		250	</pre>
		251	</li>
		252	<li id="ex_7b">
		253	<h3>
		254	7b) More styling</h3>
		255	<p>
		256	Here we use one big image (actually 3), with different dimensions. Not very pretty,
		257	but it conveys the message I hope.</p>
		258	<div class="rateit antenna" data-rateit-starwidth="11" data-rateit-starheight="25">
		259	</div>
		260	<h4>
		261	Inline code</h4>
		262	<pre class="brush: xml">
		263	<div class="rateit antenna" data-rateit-starwidth="11" data-rateit-starheight="25"></div>
		264	</pre>
		265	<h4>
		266	Style sheet</h4>
		267	<pre class="brush: css">
		268	div.antenna div.rateit-range
		269	{
		270	background: url(antenna-black.png) no-repeat;
		271	height: 25px;
		272	}
		273
		274	div.antenna div.rateit-hover
		275	{
		276	background: url(antenna-yellow.png) no-repeat;
		277	}
		278
		279	div.antenna div.rateit-selected
		280	{
		281	background: url(antenna-red.png) no-repeat;
		282	}
		283	</pre>
		284	</li>
		285	<li id="ex_8">
		286	<h3>
		287	8) RTL support</h3>
		288	<div style="direction: rtl">
		289	Now we are in RTL mode. No changes needed to make this work.
		290	<div class="rateit">
		291	</div>
		292	</div>
		293	</li>
		294	<li id="ex_9">
		295	<h3>
		296	9) Setting and Getting values</h3>
		297	<p>
		298	All properties can also be set on the fly. Here are a few examples:</p>
		299	<div class="rateit" id="rateit9">
		300	</div>
		301	<div>
		302	<button onclick="alert($('#rateit9').rateit('value'))">
		303	Get value</button>
		304	<button onclick="$('#rateit9').rateit('value', prompt('Input numerical value'))">
		305	Set value</button>
		306	</div>
		307	<div>
		308	<button onclick="alert($('#rateit9').rateit('max'))">
		309	Get max value</button>
		310	<button onclick="$('#rateit9').rateit('max', prompt('Input numerical value'))">
		311	Set max value</button>
		312	</div>
		313	<div>
		314	<button onclick="alert($('#rateit9').rateit('min'))">
		315	Get min value</button>
		316	<button onclick="$('#rateit9').rateit('min', prompt('Input numerical value'))">
		317	Set min value</button>
		318	</div>
		319	<div>
		320	<button onclick="alert($('#rateit9').rateit('step'))">
		321	Get step size</button>
		322	<button onclick="$('#rateit9').rateit('step', prompt('Input numerical value'))">
		323	Set step size</button>
		324	</div>
		325	<div>
		326	<button onclick="alert($('#rateit9').rateit('readonly'))">
		327	Get readonly value</button>
		328	<button onclick="$('#rateit9').rateit('readonly',!$('#rateit9').rateit('readonly'))">
		329	Toggle readonly</button>
		330	</div>
		331	<div>
		332	<button onclick="alert($('#rateit9').rateit('ispreset'))">
		333	Get ispreset value</button>
		334	<button onclick="$('#rateit9').rateit('ispreset',!$('#rateit9').rateit('ispreset'))">
		335	Toggle ispreset</button>
		336	</div>
		337	<div>
		338	<button onclick="$('#rateit9').rateit('reset')">
		339	Reset
		340	</button>
		341	</div>
		342
		343
		344	<pre class="brush: xml">
		345	<div class="rateit" id="rateit9">
		346	</div>
		347	<div>
		348	<button onclick="alert($('#rateit9').rateit('value'))">Get value</button>
		349	<button onclick="$('#rateit9').rateit('value', prompt('Input numerical value'))">Set value</button>
		350	</div>
		351	<div>
		352	<button onclick="alert($('#rateit9').rateit('max'))">Get max value</button>
		353	<button onclick="$('#rateit9').rateit('max', prompt('Input numerical value'))">Set max value</button>
		354	</div>
		355	<div>
		356	<button onclick="alert($('#rateit9').rateit('step'))">Get step size</button>
		357	<button onclick="$('#rateit9').rateit('step', prompt('Input numerical value'))">Set step size</button>
		358	</div>
		359	<div>
		360	<button onclick="alert($('#rateit9').rateit('readonly'))">Get readonly value</button>
		361	<button onclick="$('#rateit9').rateit('readonly',!$('#rateit9').rateit('readonly'))">Toggle readonly</button>
		362	</div>
		363	<div>
		364	<button onclick="alert($('#rateit9').rateit('ispreset'))">Get ispreset value</button>
		365	<button onclick="$('#rateit9').rateit('ispreset',!$('#rateit9').rateit('ispreset'))">Toggle ispreset</button>
		366	</div>
		367	<div>
		368	<button onclick="$('#rateit9').rateit('reset')">Reset</button>
		369	</div>
		370	</pre>
		371	</li>
		372	<li id="ex_10">
		373	<h3>
		374	10) Tooltip example</h3>
		375	<p>
		376	Using tooltips is easy. Just bind to the hover event, and do your thing. Shown here
		377	is the basic tooltip, but of course you can use any tooltip you'd like.</p>
		378	<h4>
		379	Basic numbers</h4>
		380	<div class="rateit" id="rateit10">
		381	</div>
		382
		383	<script type="text/javascript">
		384	$("#rateit10").bind('over', function (event, value) { $(this).attr('title', value); });
		385	</script>
		386
		387	<pre class="brush: xml">
		388	<div class="rateit" id="rateit10">
		389	</div>
		390
		391	<script type="text/javascript">
		392	$("#rateit10").bind('over', function (event,value) { $(this).attr('title', value); });
		393	</script>
		394	</pre>
		395	<h4>
		396	Custom text</h4>
		397	<div class="rateit" id="rateit10b" data-rateit-step="1">
		398	</div>
		399
		400	<script type="text/javascript">
		401	var tooltipvalues = ['bad', 'poor', 'ok', 'good', 'super'];
		402	$("#rateit10b").bind('over', function (event, value) { $(this).attr('title', tooltipvalues[value - 1]); });
		403	</script>
		404
		405	<pre class="brush: xml">
		406	<div class="rateit" id="rateit10b" data-rateit-step="1">
		407	</div>
		408
		409	<script type="text/javascript">
		410	var tooltipvalues = ['bad', 'poor', 'ok', 'good', 'super'];
		411	$("#rateit10b").bind('over', function (event, value) { $(this).attr('title', tooltipvalues[value-1]); });
		412	</script>
		413	</pre>
		414	</li>
		415	<li id="ex_11">
		416	<h3>
		417	11) AJAX example</h3>
		418	<p>
		419	Most times RateIt will be used using some Ajax. There are different ways of implementing
		420	it (with/without backing field, using data-* attributes etc.)</p>
		421	<div id="products">
		422	<div style="float: right; width: 350px; border: 1px solid #ccc; padding: 1em;">
		423	<strong>Server response:</strong>
		424	<ul id="response">
		425	</ul>
		426	</div>
		427	<ul>
		428	<li>
		429	<h4>
		430	Product X (id: 312)</h4>
		431	RateIt:
		432	<div data-productid="312" class="rateit">
		433	</div>
		434	</li>
		435	<li>
		436	<h4>
		437	Product Y (id: 423)</h4>
		438	RateIt:
		439	<div data-productid="423" class="rateit">
		440	</div>
		441	</li>
		442	<li>
		443	<h4>
		444	Product Z (id: 653)</h4>
		445	RateIt:
		446	<div data-productid="653" class="rateit">
		447	</div>
		448	</li>
		449	</ul>
		450	</div>
		451
		452	<script type="text/javascript">
		453	//we bind only to the rateit controls within the products div
		454	$('#products .rateit').bind('rated reset', function (e) {
		455	var ri = $(this);
		456
		457	//if the use pressed reset, it will get value: 0 (to be compatible with the HTML range control), we could check if e.type == 'reset', and then set the value to null .
		458	var value = ri.rateit('value');
		459	var productID = ri.data('productid'); // if the product id was in some hidden field: ri.closest('li').find('input[name="productid"]').val()
		460
		461	//maybe we want to disable voting?
		462	ri.rateit('readonly', true);
		463
		464	$.ajax({
		465	url: 'rateit.aspx', //your server side script
		466	data: { id: productID, value: value }, //our data
		467	type: 'POST',
		468	success: function (data) {
		469	$('#response').append('<li>' + data + '</li>');
		470
		471	},
		472	error: function (jxhr, msg, err) {
		473	$('#response').append('<li style="color:red">' + msg + '</li>');
		474	}
		475	});
		476	});
		477	</script>
		478
		479	<h4>
		480	Client</h4>
		481	<pre class="brush: xml">
		482	<div id="products">
		483	<div style="float:right; width:350px; border:1px solid #ccc; padding:1em;">
		484	<strong>Server response:</strong>
		485	<ul id="response">
		486
		487	</ul>
		488	</div>
		489	<ul>
		490	<li><h4>Product X (id: 312)</h4>
		491	RateIt: <div data-productid="312" class="rateit"></div>
		492	</li>
		493	<li><h4>Product Y (id: 423)</h4>
		494	RateIt: <div data-productid="423" class="rateit"></div></li>
		495	<li><h4>Product Z (id: 653)</h4>
		496	RateIt: <div data-productid="653" class="rateit"></div>
		497	</li>
		498	</ul>
		499
		500	</div>
		501
		502	<script type ="text/javascript">
		503	//we bind only to the rateit controls within the products div
		504	$('#products .rateit').bind('rated reset', function (e) {
		505	var ri = $(this);
		506
		507	//if the use pressed reset, it will get value: 0 (to be compatible with the HTML range control), we could check if e.type == 'reset', and then set the value to null .
		508	var value = ri.rateit('value');
		509	var productID = ri.data('productid'); // if the product id was in some hidden field: ri.closest('li').find('input[name="productid"]').val()
		510
		511	//maybe we want to disable voting?
		512	ri.rateit('readonly', true);
		513
		514	$.ajax({
		515	url: 'rateit.aspx', //your server side script
		516	data: { id: productID, value: value }, //our data
		517	type: 'POST',
		518	success: function (data) {
		519	$('#response').append('<li>' + data + '</li>');
		520
		521	},
		522	error: function (jxhr, msg, err) {
		523	$('#response').append('<li style="color:red">' + msg + '</li>');
		524	}
		525	});
		526	});
		527	</script>
		528
		529	</pre>
		530	<h4>
		531	Server (ASPX) super simplified</h4>
		532	<pre class="brush: c-sharp">
		533	<%@ Page Language="C#" %>
		534	<%
		535	//Get value
		536	float value = float.Parse(Request.Form["value"]);
		537	int productID = int.Parse(Request.Form["id"]);
		538
		539	Response.Write(string.Format("You voted {0} on product: {1}.<br/>Time on server: {2}", value, productID, DateTime.Now.ToString()));
		540
		541	%>
		542
		543
		544
		545	</pre>
		546	</li>
		547
		548	<li id="ex_12">
		549	<h3>
		550	12) Resizing
		551	</h3>
		552	<p>
		553	Sometimes we would like to resize the rating controls (perhaps based on screen size). <br />
		554	This is as easy as<br />
		555	a) adding a class to the rateit control, which would change the background image.<br/>
		556	b) modifying the starwidth and starheigth properties.
		557	<br /><br />
		558	The alternative styling is taken from example <a href="#ex_7a">7a) styling</a>.
		559	</p>
		560
		561	<div class="rateit" id="rateit12">
		562	</div>
		563	<p>Pick a size: <select id="size_12"><option data-class="" data-size="16" selected>normal</option><option data-class="bigstars" data-size="32">big</option></select></p>
		564
		565	<script type="text/javascript">
		566	$('#size_12').change(function () {
		567	var option = $(this.options[this.selectedIndex]);
		568	$('#rateit12').removeClass('bigstars')
		569	.addClass(option.data('class'))
		570	.rateit('starwidth', option.data('size'))
		571	.rateit('starheight', option.data('size'));
		572
		573	});
		574	</script>
		575	<pre class="brush: xml">
		576	<div class="rateit" id="rateit12"></div>
		577	<p>Pick a size:
		578	<select id="size_12">
		579	<option data-class="" data-size="16" selected>normal</option>
		580	<option data-class="bigstars" data-size="32">big</option>
		581	</select>
		582	</p>
		583
		584	<script type="text/javascript">
		585	$('#size_12').change(function () {
		586	var option = $(this.options[this.selectedIndex]);
		587	$('#rateit12').removeClass('bigstars') //remove old class
		588	.addClass(option.data('class')) //add new class
		589	.rateit('starwidth', option.data('size')) //change width
		590	.rateit('starheight', option.data('size')); //change height
		591
		592	});
		593	</script>
		594	</pre>
		595	</li>
		596	</ul>
		597
		598	<script src="../src/jquery.rateit.js" type="text/javascript"></script>
		599
		600	<script>
		601	//build toc
		602	var toc = [];
		603	$('#examples > li').each(function (i, e) {
		604
		605
		606	if (i > 0)
		607	toc.push(', ');
		608	toc.push('<a href="#')
		609	toc.push(e.id)
		610	toc.push('">')
		611	var title = $(e).find('h3:first').text();
		612	title = title.substring(title.indexOf(')') + 2);
		613	toc.push(title);
		614	toc.push('</a>');
		615
		616	});
		617
		618	$('#toc').html(toc.join(''));
		619
		620	</script>
		621
		622	<!-- syntax highlighter -->
		623
		624	<script src="sh/shCore.js" type="text/javascript"></script>
		625
		626	<script src="sh/shBrushJScript.js" type="text/javascript"></script>
		627
		628	<script src="sh/shBrushXml.js" type="text/javascript"></script>
		629
		630	<script src="sh/shBrushCss.js" type="text/javascript"></script>
		631
		632	<script src="sh/shBrushCSharp.js" type="text/javascript"></script>
		633
		634	<script type="text/javascript">
		635	SyntaxHighlighter.all()
		636	</script>
		637
		638	</body>
		639	</html>

Subversion Repositories Integrator Subversion

(root)/DOCUMENTOS E ANALISE/telas/assets/global/plugins/rateit/example/example.htm - Rev 1