Blog Borchani Studios

Añadir Starbox por debajo de estas bibliotecas, el orden correcto es como en el ejemplo siguiente.

•  <link rel=”stylesheet” type=”text/css” href=”css/starbox.css” />

Cargar las imágenes en el directorio de imágenes. No se olvide de hacer modificar esta línea en starbox.js cuando pone las imágenes en un directorio diferente.

• overlayImages: ‘../images/starbox/’,

Compatibilidad de IE8: Prototype 1.6.0.3 no es compatible con Internet Explorer 8, Prototype 1.6.1_rc3 es. Puede descargarlo aquí. Este comunicado no está disponible a través de la API de Google, ya que es una versión candidata por lo que tendrá como anfitrión a sí mismo por ahora

Sugerencia: El Google Ajax Libraries API puede utilizarse para cargar automáticamente la última versión de Prototype y Scriptaculous. Uso de prototipos, por ejemplo, la última parte de la dirección URL se puede cambiar a / 1.6/prototype.js de la última versión 1.6 .*, o / 1/prototype.js de la última versión 1 .*.

Si usted es anfitrión de Prototype y Scriptaculous y quieres hacer que el tamaño del archivo más pequeño, echar un vistazo a Protopacked. Contiene versiones comprimidas de prototipos a partir de 21kb.

Cómo usar
Usted puede convertir cualquier elemento en una Starbox utilizando:

• new Starbox(element, average);

Más Starboxes avanzados pueden hacerse utilizando un parámetro TERCERA con opciones, algunos ejemplos

• new Starbox(element, average, { stars: 10, buttons: 20, max: 10 });
• new Starbox(element, average, { overlay: ‘big.png’, ghosting: true });
• new Starbox(element, average, { total: 539, rated: 4.5, rerate: true });

Este es uno de los ejemplos de starbox.css:

 Tutoriales
¿Cómo puedo guardar los resultados en una base de datos?
Hay muchas maneras de ir sobre esto, en una variedad de idiomas. Sin embargo, dado que está utilizando prototipos, necesarios para Starbox al trabajo, la parte de Ajax puede ser utilizado para hacer esta tarea un poco más fácil. Yo sólo voy a entrar en la parte este de Javascript, ya que no puede cubrir todos los casos de back-final. Voy a utilizar Ajax.Request Prototipo de llamar a un archivo que guarda en la base de datos y también le mostrará cómo en publicar la calificación utilizando un formulario normal.

Usando un formulario
Cuando se agrega starboxes dentro de una etiqueta de formulario, todos sus datos serán presentados por utilizar este formato: identity_data. La identidad es la identidad que pasan a través de opciones, si no se establece el ID de su elemento Starbox se utilizará. Si no tiene un id, el id ’starbox_ # nr’ (donde # incrementos de auto nr) se añadirán automáticamente al elemento. Una vez que el formulario se sabrá lo que se ha evaluado mediante la inspección de la POST o variables GET en el lado del servidor. En Php por ejemplo:

• $rated = $_POST(’starbox_1_rated’);

Parámetros que usted puede acceder son: nominal, promedio, máximo y total. Así, el promedio estaría disponible como $ _POST ( ’starbox_1_average’)

Uso de Ajax
Digamos que usted quería salvar a todos los Starboxes utilizando una función. Esto puede hacerse mediante la observación del documento para el evento ‘Starbox: nominal. Primero, una función de ahorro es necesario para llamar cuando se hace clic en una estrella. A continuación se muestra una posible aplicación de esa función

• function saveStar(event) {
•   new Ajax.Request(’savestar.php’, {
•     parameters: event.memo,
•     onComplete: function(xhr) {
•       // optional callback
•     }
•   });
• }

 Prototype Ajax.Request se usa para manejar la parte de ahorro. Una característica útil de Starbox event.memo es que tiene toda la información importante: la puntuación, la identidad, media, máxima y total. event.memo.rated por ejemplo, tiene la calificación que se hizo clic. Ajax.Request tiene la opción de enviar a lo largo de los parámetros como un objeto o como una cadena de consulta. Desde event.memo es un objeto que simplemente puede ponerlo en como parámetros como se muestra en la función saveStar arriba.

Ahora tenemos que saber cuando el “Starbox: la calificación de” fue despedido el evento y llamar a la función saveStar. Hay dos maneras de escuchar para el evento personalizado, ambos se muestran a continuación.

• // observing all starboxes
• document.observe(’starbox:rated’, saveStar);
•  
• // observe just one
• document.observe(‘dom:loaded’, function() { // once the DOM is loaded
•   $(‘element_id’).observe(’starbox:rated’, saveStar);
• });

 Prototypes ‘dom:loaded’  se requiere en este caso por $ ( ‘element_id’). Observar al trabajo, ya que el elemento con el id sólo está disponible después de que el DOM está cargado. Alternativamente puede agregar el derecho de observar el código bajo el elemento de Starbox sí dentro de una etiqueta <script>, pero el ‘dom: loaded’ enfoque ayudará a mantener todos sus javascript en el mismo lugar, yo recomiendo que ponga esto en su cabecera.

Más información sobre Ajax.Request: http://www.prototypejs.org/api/ajax/request/
Más información sobre las opciones que puede utilizar: http://www.prototypejs.org/api/ajax/options/

En este caso, el back-end se lleva a cabo por PHP, por lo que debería ser capaz de utilizar $ _POST valores como $ _POST ( “identidad”) y $ _POST ( ‘nominal’) para obtener su calificación y completar la base de datos de guardar. Si no está seguro de cómo se hace esto, Google debería ser capaz de ayudar con eso. En el caso de PHP y MySQL, una búsqueda de ‘ajax guardar MySQL PHP prototipo “debe dar lo suficiente para empezar.

¿Cómo puedo utilizar onRate para salvar la calificación?
Una alternativa al uso de eventos personalizados de Prototype está utilizando la devolución de llamada onRate. La mejor forma de manejar un puesto es el uso de los eventos personalizados como se describió anteriormente, este mantendrá su código limpio onRate porque entonces no tiene que fijarse para cada Starbox individuales. Pero debe encontrar el método más fácil onRate puede utilizar de esta manera: 

• function myOnRate(element, memo) {
•   new Ajax.Request(’savestar.php’, {
•     parameters: memo,
•     onComplete: function(xhr) {
•       // optional callback
•     }
•   });
• }