|
   |
| Moderador del foro: ZorG |
| Foro uCoz Información General Para los principiantes RANKING DE LOS MATERIALES |
| RANKING DE LOS MATERIALES |
En “Control de plantillas (CSS)”:
Quote .rating { color: #757575; font: 11px tahoma; width: 85px; height: 16px; } .unit-rating { list-style: none; margin: 0px; padding: 0px; width: 85px; height: 16px; position: relative; background: url(http://heroes-ru.info/img/rating/rating.gif) repeat-x top left; } .unit-rating li { text-indent: -90000px; padding: 0px; margin: 0px; float:left; } /*heroes-ru.info*/ .unit-rating li a { display: block; width: 17px; height: 16px; text-decoration: none; text-indent:-9000px; z-index: 17; position: absolute; padding: 0px; } .unit-rating li a:hover { background-image: url(http://heroes-ru.info/img/rating/rating.gif); background-position: left center; z-index: 2; left: 0px; } .unit-rating a.r1-unit { left: 0px; } .unit-rating a.r1-unit:hover { width: 17px; } .unit-rating a.r2-unit { left: 17px; } .unit-rating a.r2-unit:hover { width: 34px; } .unit-rating a.r3-unit { left: 34px; } .unit-rating a.r3-unit:hover { width: 51px; } .unit-rating a.r4-unit { left: 51px; } .unit-rating a.r4-unit:hover { width: 68px; } .unit-rating a.r5-unit { left: 68px; } .unit-rating a.r5-unit:hover { width: 85px; } .unit-rating li.current-rating { background-image: url(http://heroes-ru.info/img/rating/rating.gif); background-position: left bottom; position: absolute; height: 16px; display: block; text-indent: -9000px; z-index: 1; } Ahora abrimos la plantilla de la página del material y comentarios a éste
Code <?if($RATE_FORM$)?><span id='rt$ID$'><span id='ratig-layer' style="float: left; background: url('http://heroes-ru.info/img/rating/$RATING_NUM$.gif')"><span class="rating"> <ul class="unit-rating"> <li class="current-rating" id="ids$ENTRY_ID$" style="width:0px;">0</li> [*]<a href="#" title="Mal" class="r1-unit" onclick="if (confirm('¿Confirma Ud su evaluación?')){var cObj=uz.util.Connect.asyncRequest('GET','/news/0-0-1-$ID$-15-1',{success: function(o){ getaruond$ENTRY_ID$(1); ParseXML(o.responseXML);}}); return false }">1</a></li> [*]<a href="#" title="Pasable" class="r2-unit" onclick="if (confirm('¿Confirma Ud su evaluación?')){var cObj=uz.util.Connect.asyncRequest('GET','/news/0-0-2-$ID$-15-1',{success: function(o){ getaruond$ENTRY_ID$(1); ParseXML(o.responseXML);}}); return false }">2</a></li> [*]<a href="#" title="Ordinario" class="r3-unit" onclick="if (confirm('¿Confirma Ud 3?')){var cObj=uz.util.Connect.asyncRequest('GET','/news/0-0-3-$ID$-15-1',{success: function(o){ getaruond$ENTRY_ID$(1); ParseXML(o.responseXML);}}); return false }">3</a></li> [*]<a href="#" title="Bien" class="r4-unit" onclick="if (confirm('¿Confirma Ud 4?')){var cObj=uz.util.Connect.asyncRequest('GET','/news/0-0-4-$ID$-15-1',{success: function(o){ getaruond$ENTRY_ID$(1); ParseXML(o.responseXML);}}); return false }">4</a></li> [*]<a href="#" title="Excelente" class="r5-unit" onclick="if (confirm('¿Confirma Ud 5?')){var cObj=uz.util.Connect.asyncRequest('GET','/news/0-0-5-$ID$-15-1',{success: function(o){ getaruond$ENTRY_ID$(1); ParseXML(o.responseXML);}}); return false }">5</a></li> [/list] </span></span></span> <script type="text/javascript"> document.getElementById('ids$ENTRY_ID$').style.width=17*$RATING$+'px'; var i = 0; function getaruond$ENTRY_ID$(x){ if(!i){ var q = $RATED$*$RATING$; var w = (q+x)/($RATED$+1); document.getElementById('ids$ENTRY_ID$').style.width=17*w+'px'; i++; }} </script> <?else?><img src="http://heroes-ru.info/img/rating/$RATING_NUM$.gif" align=absmiddle valign=center border=0 alt="Ranking del material: $RATING$/$RATED$"><?endif?> Aspecto de los materiales:
Code <?if($RATE_FORM$)?><span id='rt$ID$'><span id='ratig-layer' style="float: left; background: url('http://heroes-ru.info/img/rating/$RATING_NUM$.gif')"><span class="rating"> <ul class="unit-rating"> <li class="current-rating" id="ids$ID$" style="width:0px;">0</li> [*]<a href="#" title="Mal" class="r1-unit" onclick="if (confirm(¿Confirma Ud su evaluación?')){var cObj=uz.util.Connect.asyncRequest('GET','/news/0-0-1-$ID$-15-1',{success: function(o){ getaruond$ID$(1); ParseXML(o.responseXML);}}); return false }">1</a></li> [*]<a href="#" title="Pasable" class="r2-unit" onclick="if (confirm('¿Confirma Ud su evaluación?')){var cObj=uz.util.Connect.asyncRequest('GET','/news/0-0-2-$ID$-15-1',{success: function(o){ getaruond$ID$(1); ParseXML(o.responseXML);}}); return false }">2</a></li> [*]<a href="#" title="Ordinario" class="r3-unit" onclick="if (confirm('¿Confirma Ud 3?')){var cObj=uz.util.Connect.asyncRequest('GET','/news/0-0-3-$ID$-15-1',{success: function(o){ getaruond$ID$(1); ParseXML(o.responseXML);}}); return false }">3</a></li> [*]<a href="#" title="Bien" class="r4-unit" onclick="if (confirm('¿Confirma Ud 4?')){var cObj=uz.util.Connect.asyncRequest('GET','/news/0-0-4-$ID$-15-1',{success: function(o){ getaruond$ID$(1); ParseXML(o.responseXML);}}); return false }">4</a></li> [*]<a href="#" title="Excelente" class="r5-unit" onclick="if (confirm('¿Confirma Ud 5?')){var cObj=uz.util.Connect.asyncRequest('GET','/news/0-0-5-$ID$-15-1',{success: function(o){ getaruond$ID$(1); ParseXML(o.responseXML);}}); return false }">5</a></li> [/list] </span></span></span> <script type="text/javascript"> document.getElementById('ids$ID$').style.width=17*$RATING$+'px'; var i = 0; function getaruond$ID$(x){ if(!i){ var q = $RATED$*$RATING$; var w = (q+x)/($RATED$+1); document.getElementById('ids$ID$').style.width=17*w+'px'; i++; }} </script> <?else?><img src="http://heroes-ru.info/img/rating/$RATING_NUM$.gif" align=absmiddle valign=center border=0 alt="Ranking del material: $RATING$/$RATED$"><?endif?> Catálogo de archivos:
Code <?if($RATE_FORM$)?><span id='ratig-layer' style="float: left; background: url('http://heroes-ru.info/img/rating/$RATING_NUM$.gif)"><span class="rating"> <ul class="unit-rating"> <li class="current-rating" id="ids$ID$" style="width:0px;">0</li> [*]<a href="#" title="Mal" class="r1-unit" onclick="if (confirm('¿Confirma Ud su evaluación?')){var cObj=uz.util.Connect.asyncRequest('GET','/load/0-1-1-$ID$-3',{success: function(o){ getaruond$ID$(1); ParseXML(o.responseXML);}}); return false }">1</a></li> [*]<a href="#" title="Pasable" class="r2-unit" onclick="if (confirm('¿Confirma Ud su evaluación?')){var cObj=uz.util.Connect.asyncRequest('GET','/load/0-1-2-$ID$-3',{success: function(o){ getaruond$ID$(1); ParseXML(o.responseXML);}}); return false}">2</a></li> [*]<a href="#" title="Ordinario" class="r3-unit" onclick="if (confirm('¿Confirma Ud 3?')){var cObj=uz.util.Connect.asyncRequest('GET','/load/0-1-3-$ID$-3',{success: function(o){ getaruond$ID$(1); ParseXML(o.responseXML);}}); return false}">3</a></li> [*]<a href="#" title="Bien" class="r4-unit" onclick="if (confirm('¿Confirma Ud 4?')){var cObj=uz.util.Connect.asyncRequest('GET','/load/0-1-4-$ID$-3',{success: function(o){ getaruond$ID$(1); ParseXML(o.responseXML);}}); return false}">4</a></li> [*]<a href="#" title="Excelente" class="r5-unit" onclick="if (confirm('¿Confirma Ud 5?')){var cObj=uz.util.Connect.asyncRequest('GET','/load/0-1-5-$ID$-3',{success: function(o){ getaruond$ID$(1); ParseXML(o.responseXML);}}); return false}">5</a></li> [/list] </span></span> <script type="text/javascript"> document.getElementById('ids$ID$').style.width=17*$RATING$+'px'; var i = 0; function getaruond$ID$(x){ if(!i){ var q = $RATED$*$RATING$; var w = (q+x)/($RATED$+1); document.getElementById('ids$ID$').style.width=17*w+'px'; i++; }} </script> <?else?><img src="http://heroes-ru.info/img/rating/$RATING_NUM$.gif" align=absmiddle valign=center border=0 alt="Ranking del material: $RATING$/$RATED$"><?endif?> Álbum de fotos
Code <?if($RATE_FORM$)?><span id='ratig-layer' style="float: left; background: url('http://heroes-ru.info/img/rating/$RATING_NUM$.gif')"><span class="rating"> <ul class="unit-rating"> <li class="current-rating" id="ids$ID$" style="width:0px;">0</li> [*]<a href="#" title="Mal" class="r1-unit" onclick="if (confirm('¿Confirma Ud su evaluación?')){var cObj=uz.util.Connect.asyncRequest('GET','/photo/$CID$-1-$ID$-13-1',{success: function(o){ getaruond$ID$(1); ParseXML(o.responseXML);}}); }">1</a></li> [*]<a href="#" title="Pasable" class="r2-unit" onclick="if (confirm(¿Confirma Ud su evaluación?')){var cObj=uz.util.Connect.asyncRequest('GET','/photo/$CID$-1-$ID$-13-2',{success: function(o){ getaruond$ID$(1); ParseXML(o.responseXML);}}); }">2</a></li> [*]<a href="#" title="Ordinario" class="r3-unit" onclick="if (confirm('¿Confirma Ud 3?')){var cObj=uz.util.Connect.asyncRequest('GET','/photo/$CID$-1-$ID$-13-3',{success: function(o){ getaruond$ID$(1); ParseXML(o.responseXML);}}); }">3</a></li> [*]<a href="#" title="Bien" class="r4-unit" onclick="if (confirm('¿Confirma Ud 4?')){var cObj=uz.util.Connect.asyncRequest('GET','/photo/$CID$-1-$ID$-13-4',{success: function(o){ getaruond$ID$(1); ParseXML(o.responseXML);}}); }">4</a></li> [*]<a href="#" title="Excelente" class="r5-unit" onclick="if (confirm('¿Confirma Ud 5?')){var cObj=uz.util.Connect.asyncRequest('GET','/photo/$CID$-1-$ID$-13-5',{success: function(o){ getaruond$ID$(1); ParseXML(o.responseXML);}}); }">5</a></li> [/list] </span></span> <script type="text/javascript"> document.getElementById('ids$ID$').style.width=17*$RATING$+'px'; var i = 0; function getaruond$ID$(x){ if(!i){ var q = $RATED$*$RATING$; var w = (q+x)/($RATED$+1); document.getElementById('ids$ID$').style.width=17*w+'px'; i++; }} </script> <?else?><img src="http://heroes-ru.info/img/rating/$RATING_NUM$.gif" align=absmiddle valign=center border=0 alt="Ranking del material: $RATING$/$RATED$"><?endif?> Blog
Code <?if($RATE_FORM$)?><span id='ratig-layer' style="float: left; background: url('http://heroes-ru.info/img/rating/$RATING_NUM$.gif')"><span class="rating"> <ul class="unit-rating"> <li class="current-rating" id="ids$ID$" style="width:0px;">0</li> [*]<a href="#" title="Mal" class="r1-unit" onclick="if (confirm('¿Confirma Ud su evaluación?')){var cObj=uz.util.Connect.asyncRequest('GET','/blog/0-0-1-$ID$-14-1',{success: function(o){ getaruond$ID$(1); ParseXML(o.responseXML);}}); return false }">1</a></li> [*]<a href="#" title="Pasable" class="r2-unit" onclick="if (confirm('¿Confirma Ud su evaluación?')){var cObj=uz.util.Connect.asyncRequest('GET','/blog/0-0-2-$ID$-14-1',{success: function(o){ getaruond$ID$(1); ParseXML(o.responseXML);}}); return false}">2</a></li> [*]<a href="#" title="Ordinario" class="r3-unit" onclick="if (confirm('¿Confirma Ud 3?')){var cObj=uz.util.Connect.asyncRequest('GET','/blog/0-0-3-$ID$-14-1',{success: function(o){ getaruond$ID$(1); ParseXML(o.responseXML);}}); return false}">3</a></li> [*]<a href="#" title="Bien" class="r4-unit" onclick="if (confirm('¿Confirma Ud 4?')){var cObj=uz.util.Connect.asyncRequest('GET','/blog/0-0-4-$ID$-14-1',{success: function(o){ getaruond$ID$(1); ParseXML(o.responseXML);}}); return false}">4</a></li> [*]<a href="#" title="Excelente" class="r5-unit" onclick="if (confirm('¿Confirma Ud 5?')){var cObj=uz.util.Connect.asyncRequest('GET','/blog/0-0-5-$ID$-14-1',{success: function(o){ getaruond$ID$(1); ParseXML(o.responseXML);}}); return false}">5</a></li> [/list] </span></span> <script type="text/javascript"> document.getElementById('ids$ID$').style.width=17*$RATING$+'px'; var i = 0; function getaruond$ID$(x){ if(!i){ var q = $RATED$*$RATING$; var w = (q+x)/($RATED$+1); document.getElementById('ids$ID$').style.width=17*w+'px'; i++; }} </script> <?else?><img src="http://heroes-ru.info/img/rating/$RATING_NUM$.gif'" align=absmiddle valign=center border=0 alt="Ranking del material: $RATING$/$RATED$"><?endif?> Catálogo de artículos
Code <?if($RATE_FORM$)?><span id='ratig-layer' style="float: left; background: url('http://heroes-ru.info/img/rating/$RATING_NUM$.gif'')"><span class="rating"> <ul class="unit-rating"> <li class="current-rating" id="ids$ID$" style="width:0px;">0</li> [*]<a href="#" title="Mal" class="r1-unit" onclick="if (confirm('¿Confirma Ud su evaluación?')){var cObj=uz.util.Connect.asyncRequest('GET','/publ/0-1-1-$ID$-3',{success: function(o){ getaruond$ID$(1); ParseXML(o.responseXML);}}); return false }">1</a></li> [*]<a href="#" title="Pasable" class="r2-unit" onclick="if (confirm('¿Confirma Ud su evaluación?')){var cObj=uz.util.Connect.asyncRequest('GET','/publ/0-1-2-$ID$-3',{success: function(o){ getaruond$ID$(1); ParseXML(o.responseXML);}}); return false}">2</a></li> [*]<a href="#" title="Ordinario" class="r3-unit" onclick="if (confirm('¿Confirma Ud 3?')){var cObj=uz.util.Connect.asyncRequest('GET','/publ/0-1-3-$ID$-3',{success: function(o){ getaruond$ID$(1); ParseXML(o.responseXML);}}); return false}">3</a></li> [*]<a href="#" title="Bien" class="r4-unit" onclick="if (confirm('¿Confirma Ud 4?')){var cObj=uz.util.Connect.asyncRequest('GET','/publ/0-1-4-$ID$-3',{success: function(o){ getaruond$ID$(1); ParseXML(o.responseXML);}}); return false}">4</a></li> [*]<a href="#" title="Excelente" class="r5-unit" onclick="if (confirm('¿Confirma Ud 5?')){var cObj=uz.util.Connect.asyncRequest('GET','/publ/0-1-5-$ID$-3',{success: function(o){ getaruond$ID$(1); ParseXML(o.responseXML);}}); return false}">5</a></li> [/list] </span></span> <script type="text/javascript"> document.getElementById('ids$ID$').style.width=17*$RATING$+'px'; var i = 0; function getaruond$ID$(x){ if(!i){ var q = $RATED$*$RATING$; var w = (q+x)/($RATED$+1); document.getElementById('ids$ID$').style.width=17*w+'px'; i++; }} </script> <?else?><img src="http://heroes-ru.info/img/rating/$RATING_NUM$.gif'" align=absmiddle valign=center border=0 alt="Ranking del material: $RATING$/$RATED$"><?endif?> El siguiente enlace http://heroes-ru.info/img/rating/ ha de estar sustituido con lo tuyo. Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
|
Crea un sistema de votaciones con jQuery Raty jQuery Raty es un plugin creado para jQuery que nos permite crear un sistema de rating en nuestro sitio que sea fácil de utilizar y muy simple de implementar. Este plugin se caracteriza por lo ligero que es, ya que ocupa unos 4 Kb en su versión comprimida. Su funcionamiento es muy sencillo, ya que solo necesitamos crear un contenedor DIV con un id y hacer llamada al plugin. El ejemplo más sencillo es cuando no tiene ninguna opción. Es el siguiente código. Si queremos que el sistema empiece ya con un valor determinado, se puede utilizar la opción “start” En el ejemplo anterior también hemos hecho uso de la propiedad “readOnly”, para indicar que el elemento es de solo lectura. Cuando un elemento es de solo lectura, se puede poner un mensaje que indique información al respecto. Para ello se utiliza la propiedad “noRatedMsg”. <div id="anyone"></div> También se puede una puntuación con nombre personalizado y también personalizar el número de estrellas que aparecen. <div id="number"></div> También se pueden utilizar funciones dentro de la llamada, capturando el evento onClick. Os dejamos el código. <div id="click"></div> También se puede indicar que se muestren medias estrellas. Para ello utilizamos la propiedad “showHalf” a true. Otra opción que nos permite, es modificar el nombre que aparece por defecto en las estrellas. Esto se hace utilizando la siguiente propiedad. Como véis, es sencillo utilizar el plugin. Podéis ver sobre este plugin, mirando en su página oficial. Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
|
| |||
| |||