File indexing completed on 2024-12-22 05:33:20
0001 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 0002 <html xmlns="http://www.w3.org/1999/xhtml"> 0003 <head> 0004 <title>Pluggin jRating : Ajax rating system with jQuery</title> 0005 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 0006 <link rel="stylesheet" href="jquery/jRating.jquery.css" type="text/css" /> 0007 0008 <style type="text/css"> 0009 body {margin:15px;font-family:Arial;font-size:13px} 0010 a img{border:0} 0011 .datasSent, .serverResponse{margin-top:20px;width:470px;height:73px;border:1px solid #F0F0F0;background-color:#F8F8F8;padding:10px;float:left;margin-right:10px} 0012 .datasSent{width:200px;position:fixed;left:680px;top:0} 0013 .serverResponse{position:fixed;left:680px;top:100px} 0014 .datasSent p, .serverResponse p {font-style:italic;font-size:12px} 0015 .exemple{margin-top:15px;} 0016 .clr{clear:both} 0017 pre {margin:0;padding:0} 0018 .notice {background-color:#F4F4F4;color:#666;border:1px solid #CECECE;padding:10px;font-weight:bold;width:600px;font-size:12px;margin-top:10px} 0019 </style> 0020 </head> 0021 <body> 0022 <ul> 0023 <li>Full documentation on <a href="http://www.myjqueryplugins.com/jRating">MyjQueryPlugins.com/jRating</a></li> 0024 <li>Live demonstration on <a href="http://www.myjqueryplugins.com/jRating/demo">jRating demonstration page</a></li> 0025 </ul> 0026 <h1>jRating plugin</h1> 0027 0028 0029 <!-- EXEMPLE 1 : BASIC --> 0030 <div class="exemple"> 0031 <em>Exemple 1 (<strong>Basic exemple without options</strong>) :</em> 0032 <div class="basic" id="12_1"></div> 0033 </div> 0034 <div class="notice"> 0035 <pre> 0036 <?php 0037 echo htmlentities('<!-- JS to add --> 0038 <script type="text/javascript"> 0039 $(document).ready(function(){ 0040 $(".bacic").jRating(); 0041 }); 0042 </script> 0043 '); 0044 ?> 0045 </pre> 0046 </div> 0047 0048 <!-- EXEMPLE 2 --> 0049 <div class="exemple"> 0050 <em>Exemple 2 (type : <strong>small</strong> - average <strong>10</strong> - id <strong>2</strong> - <strong>40</strong> stars) :</em> 0051 <div class="exemple2" id="10_2"></div> 0052 </div> 0053 <div class="notice"> 0054 <pre> 0055 <?php 0056 echo htmlentities('<!-- JS to add --> 0057 <script type="text/javascript"> 0058 $(document).ready(function(){ 0059 $(".exemple2").jRating({ 0060 type:\'small\', // type of the rate.. can be set to \'small\' or \'big\' 0061 length : 40, // nb of stars 0062 decimalLength : 1 // number of decimal in the rate 0063 }); 0064 }); 0065 </script> 0066 '); 0067 ?> 0068 </pre> 0069 </div> 0070 0071 <!-- EXEMPLE 3 --> 0072 <div class="exemple"> 0073 <em>Exemple 3 (step : <strong>true</strong> - average <strong>18</strong> - id <strong>3</strong> - <strong>15</strong> stars) :</em> 0074 <div class="exemple3" id="18_3"></div> 0075 </div> 0076 <div class="notice"> 0077 <pre> 0078 <?php 0079 echo htmlentities('<!-- JS to add --> 0080 <script type="text/javascript"> 0081 $(document).ready(function(){ 0082 $(".exemple3").jRating({ 0083 step:true, // no half-star when mousemove 0084 length : 20, // nb of stars 0085 decimalLength:0 // number of decimal in the rate 0086 }); 0087 }); 0088 </script> 0089 '); 0090 ?> 0091 </pre> 0092 </div> 0093 0094 <!-- EXEMPLE 4 --> 0095 <div class="exemple"> 0096 <em>Exemple 4 (<strong>Rate is disabled</strong>) :</em> 0097 <div class="exemple4" id="10_4"></div> 0098 </div> 0099 <div class="notice"> 0100 <pre> 0101 <?php 0102 echo htmlentities('<!-- JS to add --> 0103 <script type="text/javascript"> 0104 $(document).ready(function(){ 0105 $(".exemple4").jRating({ 0106 isDisabled : true 0107 }); 0108 }); 0109 </script> 0110 '); 0111 ?> 0112 </pre> 0113 </div> 0114 0115 <!-- EXEMPLE 5 --> 0116 <div class="exemple"> 0117 <em>Exemple 5 (<strong>With onSuccess & onError methods</strong>) :</em> 0118 <div class="exemple5" id="10_5"></div> 0119 </div> 0120 <div class="notice"> 0121 <pre> 0122 <?php 0123 echo htmlentities('<!-- JS to add --> 0124 <script type="text/javascript"> 0125 $(document).ready(function(){ 0126 $(".exemple5").jRating({ 0127 length:10, 0128 decimalLength:1, 0129 onSuccess : function(){ 0130 alert(\'Success : your rate has been saved :)\'); 0131 }, 0132 onError : function(){ 0133 alert(\'Error : please retry\'); 0134 } 0135 }); 0136 }); 0137 </script> 0138 '); 0139 ?> 0140 </pre> 0141 </div> 0142 0143 <!-- EXEMPLE 5 --> 0144 <div class="exemple"> 0145 <em>Exemple 6 (<strong>Disabled rate info</strong>) :</em> 0146 <div class="exemple6" id="10_5"></div> 0147 </div> 0148 <div class="notice"> 0149 <pre> 0150 <?php 0151 echo htmlentities('<!-- JS to add --> 0152 <script type="text/javascript"> 0153 $(document).ready(function(){ 0154 $(".exemple6").jRating({ 0155 length:10, 0156 decimalLength:1, 0157 showRateInfo:false 0158 }); 0159 }); 0160 </script> 0161 '); 0162 ?> 0163 </pre> 0164 </div> 0165 0166 0167 0168 <div class="datasSent"> 0169 Datas sent to the server : 0170 <p></p> 0171 </div> 0172 <div class="serverResponse"> 0173 Server response : 0174 <p></p> 0175 </div> 0176 0177 <script type="text/javascript" src="jquery/jquery.js"></script> 0178 <script type="text/javascript" src="jquery/jRating.jquery.js"></script> 0179 <script type="text/javascript"> 0180 $(document).ready(function(){ 0181 $('.basic').jRating(); 0182 0183 $('.exemple2').jRating({ 0184 type:'small', 0185 length : 40, 0186 decimalLength : 1 0187 }); 0188 0189 $('.exemple3').jRating({ 0190 step:true, 0191 length : 20 0192 }); 0193 0194 $('.exemple4').jRating({ 0195 isDisabled : true 0196 }); 0197 0198 $('.exemple5').jRating({ 0199 length:10, 0200 decimalLength:1, 0201 onSuccess : function(){ 0202 alert('Success : your rate has been saved :)'); 0203 }, 0204 onError : function(){ 0205 alert('Error : please retry'); 0206 } 0207 }); 0208 0209 $(".exemple6").jRating({ 0210 length:10, 0211 decimalLength:1, 0212 showRateInfo:false 0213 }); 0214 }); 0215 </script> 0216 </body> 0217 </html>