Para la parte del css me he basado en el codigo de Komodo Media, e cual pueden encontrar aqui
Lo interesante de este script es que uso jquery y guardo la votación en un archivo de texto y asi ya no requiero una base de datos
El diseño
Las instrucciones detalladas como ya indique las pueden encontrar en Komodo Media, asi que yo me voy a limitar a copiar el codigo del formulario.
1 2 3 4 5 6 7 8 9 10 11 12 13 | <form name="frm_rating" method="post" action="index.php"> <ul class='star-rating'> <li class='current-rating' style='width:<?php echo 25 * round($promedio);?>px;'>Currently 3.5/6 Stars.</li> <li class="star"><a href='#' title='1' class='one-star'>1</a></li> <li class="star"><a href='#' title='2' class='two-stars'>2</a></li> <li class="star"><a href='#' title='3' class='three-stars'>3</a></li> <li class="star"><a href='#' title='4' class='four-stars'>4</a></li> <li class="star"><a href='#' title='5' class='five-stars'>5</a></li> <li class="star"><a href='#' title='6' class='six-stars'>6</a></li> </ul> <input type="hidden" name="my_vote" value="0" id="my_vote" /> <input type="submit" name="submit" value="Votar" /> </form> |
La hoja de estilos y el grafico de las estrellas lo encuentran en el archivo zip al final del tutorial
AJAX
Ahora necesito que cuando se le de click a una estrella, esta se marque y el valor del campo hiddden «my_vote» se modifique
Para eso voy a hacer un simple javascript invocando mi libreria jquery:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <script language="javascript" src="jquery-1.2.6.min.js"></script> <script language="javascript"> $(document).ready(function(){ // Detecto la estrella que es presionada $("li.star a").click(function(event){ // Recojo el valor de la estrella valor_actual=$(this).attr("title"); // Cambio el estilo para mostrar la estrella seleccionada $("li.current-rating").css("width", valor_actual*25); // Cambio el valor del campo hidden $("#my_vote").attr("value", valor_actual); }); }); </script> |
Pueden ver la segunda parte del tutorial aqui
Otra forma de hacer un Star Rating usando un plugin para Jquery
muy interesante ajax
Hola, sabes que me gustaria tener el codigo del script para meterlo directamente a el codigo de blogger, ya ke no me gusta meterlos a ninguna libreria, si es posible por suepuesto…
quiero ver como funciona en blogger,
mil Gracias:)
No estoy seguro si puedes instalar ese código en blogger ya que es código PHP, y cuál es tu blog?
hola, buenas noches, te escribo para pedirte si me podes ayudar, esta funcionando bien el tema del rating perfectamente, tengo varios rating en una misma pagina web, el problema que tengo es, que al votar alguna de las estrellas, el resultado de la opcion (ya votaste o gracias por tu voto» me las publica en todos los raiting de la pagina, y no solamente en el raiting que se hizo clic, nose si me entendes? espero sus ayudas, gracias
había un pequeño bug en el plugin, vuelve a descargar el archivo zip y sobreescribe el js
hola,
Habia demorado en regresar a ver tu respuesta a mi pregunta anterior,
No soy experta, de hecho soy principiante mi blog recien lo empiezo y con lo poco que he aprendido me he lanzado a disenar plantillas para blogger, tengo mucho camino por recorrer, y muchas cosas aun que aprender, no es mi especialidad, pero encuentro esto divertido, entretenido y desestresante, el rollo es que queria implemetar esto en una plantilla gratuita, y segun lo que he visto puede sacumbir la libreria donde esta alojado el script si muchas personas usan.
Bueno Gracias por preguntarme, y seguire viendo tos posts, los cuales me parecen muy interesantes y recomendables, a proposito dime si puedo basarme en ellos para meter algunos en mi blog(te dare el credito porsupuesto) Me gustaron los del posicionamiento y metatags…
Gracias…. y que tengas un compartidisimo dia!
Hola Karla, le di una ojeada a tu blog, curiosos diseños me recuerdan a los collages del cole tienen ese cierto toque infantil. Si, puedes basarte en algún post siempre que pongas el link respectivo.
Saludos
En donde se encuentra el enlace de descarga?
Gracias por el script era exactamente lo que estaba buscando, como guardar el valor en un campo hidden despues de clickar en una estrella. Ahora tengo un problemilla, tengo 4 filas de 5 Star Rating, cada una valora una caracterisitca, por ejemplo la primera serie de 5 estrellas es para evaluar la «Facilidad de Uso» y asi con el resto de listas. Con Firefox no ocurre pero con IE cuando clicko en una estrella desaparece cualquier otra seleccion si la habia y se posiciona en el inicio de la pagina. No se si me he explicado bien. Aqui abajo muestro el codigo de javascript que estoy utilizando:
$(document).ready(function() {
$(‘#ratelinks li a’).click(function(e){
var star = $(this);
valor_actual=star.attr(«title»);
$(«#value4money»).attr(«value», valor_actual);
star.closest(‘ul’).find(‘.checked’).removeClass(‘checked’);
star.addClass(‘checked’);
e.preventDefault();
});
$(‘#ratelinks2 li a’).click(function(f){
…
});
$(‘#ratelinks3 li a’).click(function(g){
…
});
$(‘#ratelinks4 li a’).click(function(h){
…
});
});