Starbox le permite crear fácilmente todo tipo de cajas de calificación con una sola imagen PNG. La biblioteca es construir en la parte superior del marco Javascript Prototype. Para algunos efectos adicionales que usted puede agregar Scriptaculous también. Compruebe las demos a continuación para ver lo que Starbox está todo alrededor y leyendo para obtener más información sobre cómo personalizar su Starboxes propia.
Instalación
Starbox requiere
Prototype 1.6.0.3, si desea usar los efectos de
Scriptaculous 1.8.1 se requiere también. En el siguiente ejemplo que estoy incluyendo tanto el uso de
Google Bibliotecas AJAX API. Como alternativa, se pueden descargar de acogida y de prototipos y Scriptaculous mismo, pero incluyendo tanto el uso de AJAX de Google Bibliotecas de la API no tiene que preocuparse por el coste de almacenamiento en caché y ancho de banda.
Añadir Starbox por debajo de estas bibliotecas, el orden correcto es como en el ejemplo siguiente.
- <script type=’text/javascript’
- src=’http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.3/prototype.js’></script>
- <script type=’text/javascript’
- src=’http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.1/scriptaculous.js’></script>
- <script type=’text/javascript’ src=’js/starbox.js’></script>
Añadir starbox.css a su cabecera.
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 });
A continuación se presentan todas las opciones que puede utilizar. Guardando la calificación se describe en la sección de tutoriales, junto con otros ejemplos útiles.
- new Starbox(
- element, // the id of your element
- average, // average rating to start with
- {
- buttons: 5, // amount of clickable areas
- className : ‘default’, // default class
- color: false, // overwrites the css style to set color on the stars
- duration: 0.6, // duration of revert effect, when effects are used
- effect: {
- mouseover: false, // use effects on mouseover, default false
- mouseout: true // use effects on mouseout, default when available
- }
- hoverColor: false, // overwrites the css hover color
- hoverClass: ‘hover’, // the css hover class color
- ghostColor: false, // the color of the ghost stars, if used
- ghosting: false, // ghosts the previous vote
- identity: false, // a unique value you can give each starbox
- indicator: false, // use an indicator, default false
- inverse: false, // inverse the stars, right to left
- locked: false, // lock the starbox to prevent voting
- max: 5, // the maximum rating of the starbox
- onRate: false, // or function(element, memo) {}
- // element = your starbox element
- // memo = { identity: identity,
- // rated: rated,
- // average: average,
- // max: max,
- // total: total
- // }
-
- rated: false, // or a rating to indicate a vote has been cast
- ratedClass: ‘rated’, // class when rated
- rerate: false, // allow rerating
- overlay: ‘default.png’, // default star overlay image
- overlayImages: ‘../images/starbox/’, // directory of images relative to the js file
- stars: 5, // the amount of stars
- total: 0 // amount of votes cast
- }
- );
Styling
Puede estilo de su starboxes con CSS, en starbox.css usted puede encontrar algunos ejemplos de cómo hacer esto. Tenga en cuenta que la única cosa que no se puede establecer a través de CSS es la superposición de imágenes.
Este es uno de los ejemplos de starbox.css:
- .starbox .stars { background: #cccccc; }
- .starbox .rated .stars { background: #dcdcdc; }
- .starbox .rated .hover .stars { background: #cccccc; }
- .starbox .colorbar { background: #1e90ff; }
- .starbox .hover .colorbar { background: #ffcc1c; }
- .starbox .rated .colorbar { background: #64b2ff; }
- .starbox .rated .hover .colorbar { background: #1e90ff; }
- .starbox .ghost { background: #a1a1a1; }
- .starbox .indicator { clear: both; }
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
- }
- });
- }
Luego, por debajo de su elemento Starbox o, preferentemente, en la cabecera usando el DOM: evento cargado como se ha descrito antes, se coloca el siguiente.
- new Starbox(‘starbox1′, 5, { onRate: myOnRate });
¿Cómo puedo utilizar los eventos personalizados?
Los eventos personalizados se pueden utilizar para obtener un mayor control y manejar la calificación. Usted puede utilizar el Starbox personalizado eventos: nominal, Starbox: cambiado y Starbox: a la izquierda. A continuación se presentan ejemplos de cada uno de ellos. También he comentado la fuente de esta página, es una buena idea tener una mirada en ella, si quieres más ejemplos.
- document.observe(‘starbox:rated’, function(event) {
- // event.memo holds important information like event.memo.rated
- var memo = ”;
- for(var i in event.memo)
- memo += i + ‘ : ‘ + event.memo[i] + ‘\n’;
- alert(memo);
-
- // should you ever need the starbox element itself, use Event#findElement:
- new Effect.Pulsate(event.findElement(‘.starbox’));
- });
-
- $(‘mystarbox’).observe(‘starbox:changed’, function(event) {
- // this event triggers when hovering stars
- event.findElement(‘.starbox’).down(‘.indicator’).update(event.memo.rating);
- });
-
- $(‘mystarbox’).observe(‘starbox:left’, function(event) {
- new Effect.Shake(event.findElement(‘.starbox’));
- });
fuente: nickstakenburg/
