Star Rating jquery sin base de datos 1
Categories: AJAX, PHP - Tags: AJAX, jquery, PHP, rating, starPara 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?