Expresando TI

Con una variedad de carruseles por ahí, muchos de Mootools también, todavía me decidí a escribir mi propia clase Carrusel, por algunas buenas razones
1. Se busca una función de localización (para ser capaz de saltar una diapositiva en particular / paso en el carrusel).
2. Querían la libertad con la colocación de los botones IZQUIERDA y DERECHA / links, donde quiera que me dé la gana.
3. Más control sobre los Pasos de diapositivas.

Me las arreglé para crear un carrusel de nuevo, con las características anteriores de la siguiente manera ... ... Siéntase libre de sugerir las modificaciones que se requieran!

Mi ejemplo se parece a esto ... [ Ver demostración ]

Ver demo | Descargar Mootools carrusel Con la versión 1.0 de paginación (Descargado 1980 veces)

1. Carrusel de paginación

Usted puede agregar fácilmente la paginación a su carrusel, simplemente poniendo la bandera de paginación, que es Parater última pasó al crear la instancia de la MooCarousel en true (quiero paginación) o falso (donot deseo de paginación).

var = new carousel1 MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright', c_ns, c_sss, true); / / ns = número de diapositivas, sss = tamaño de paso de diapositivas

Y por supuesto se puede cambiar el look-n-feel de estos achors de paginación a su gusto mediante la modificación de la CSS.

. Carousel_paging {text-align: right; margin: 5px 10px 0 0;}
. Carousel_paging actual, carousel_paging página {outline: none; ancho:... 15px; altura: 15px; line-height: 15px; text-align: center; display: block; float: left; fondo: # D8D8EB; margin: 0 1px 0 0; text-decoration: none;}

. Carousel_paging a: hover, carousel_paging actual {background: # 4D4D9B; color: # ffffff;}..

Bueno! hay un pequeño problema, sin embargo, las anclas de paginación si se establece, entonces se genera siempre después de que el componente de Carrusel. Yo quería hacerlo dinámico también, pero a continuación, sólo para mantener la secuencia de comandos para la sopla de las proporciones, me decidí a saltar.
Pero usted sabe un poco de Javascript, que podría modificar fácilmente el código de generación de paginación en la clase MooCarousel para complacer a sus necesidades.

2. Personalización de los iconos de izquierda y derecha

Puede cambiar la ubicación, imágenes o cualquier propiedad displat de los botones izquierdo y derecho, simplemente por jugar con el CSS. ser capaz de cambiar las ubicaciones de los Buttoms izquierda y derecha fue la razón real para mí, a nuestra derecha, mi clase de Carrusel.
Dado que esta clase MooCarousel, acepta el ID es uno de estos botones, usted puede colocar estos botones en cualquier lugar de la página, por favor ... no tienen que estar en la jerarquía de elementos, como en mi ejemplo.

var = new carousel1 MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright', c_ns, c_sss, true);

CSS
.. Carousel_container_l, carousel_container_r {margin: 50px 0 0 0; position: relative; Ancho: 23px; altura: 20px; float: left; cursor: pointer;}

. Carousel_container_r {background-position: 0-38px;}

. Carousel_container_l {background-position: 0-58px;}

3. Personalización de los pasos de diapositivas

¿Qué quiero decir MIS PASOS Personalización de diapositivas?
La mayoría de los carruseles deslice el pleno de la ventana visible. Así que decir que tenía cuatro elementos (como en mi ejemplo anterior), que se deslizará hacia los cuatro elementos. Con este componente de Carrusel, se pasa el número de diapositivas y el tamaño de paso de su elección.

var = new carousel1 MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright', c_ns, c_sss, true);
c_ns = número de diapositivas, c_sss = tamaño de paso de diapositivas

Además, en mi ejemplo1 he calcuted el tamaño de paso de diapositivas, basada en la lógica que, ya lo sé número de elementos, la anchura de cada elemento y los márgenes que le han dado después de cada elemento en mi CSS.

/ * Para orgía 1 * /

var c1_w = 92; del artículo / / Ancho de juerga

var c1_n = 10; / / número total de artículos Comparación de juerga

var c1_pp = 4 / / Número de juerga Comparación de productos perpage

var c1_marginFactor = 51;

var = c1_sss c1_w c1_pp * / / sss = tamaño de paso de diapositivas

c1_ns var = parseInt (((* c1_w c1_n) / c1_sss) + 0.5) / / ns = número de diapositivas

c1_sss + = c1_marginFactor; / / sss slide = tamaño de paso, de 51 años para los márgenes

Requisitos: Mootools 1.2

Ver demo | Descargar Mootools carrusel Con la versión 1.0 de paginación (Descargado 1980 veces)

Mootools es un MooRating (navegadores, por supuesto, ya que utiliza el poder de la biblioteca MooTools) simple, ligero y excelente solución basada en calificación. No se denomina como "Estrellas", simplemente porque la imagen de calificación podría ser que usted elija (que he proporcionado Estrellas, Bares y corazones con la descarga, pero usted puede crear su propia variedad y simplemente deje caer en).

¿Cómo se ve así:

	Valoración de Mootools con diferentes imágenes Ver demostración
	Valoración de Mootools, con valores porcentuales Ver demostración
	Valoración de Mootools, con valores fraccionarios Ver demostración

Descargar Mootols Grado de la estrella de secuencias de comandos (Descargado 716 veces)

Clasificación de datos: Número entero, Decimal o Porcentaje
Actualmente el guión está diseñado para mostrar los datos de calificación como valores enteros (1,2,3,4,5), en decimales (1,24, 3,45, etc) o en porcentajes (12%, 55% etc.) La opción de mostrar los datos en cualquiera de los formatos mencionados se puede establecer con sólo cambiar algunos valores de los indicadores dentro de la JavaScript (moorating.js)
Básicamente hay dos e dos banderas con los que jugar, para mostrar los valores en el formato de su elección ...

var inpercent = false; / / Establecer la marca como true, si usted requiere los valores de porcentaje para que se muestre
var isFractional = false / / Establecer esta propiedad a true si desea que los valores fraccionarios como 1,24, 1,25, 4,56 en lugar de 1,2 ... 5

Y yo no creo que haya ninguna explicación necesaria para ello. Por otra parte. El script es muy simple. Si usted conoce un poco de JavaScripting, puede modificar el script para obtener cualquier tipo de valor que se muestra. Por ejemplo, si usted quiere tres cifras decimales que se mostrarán ... sólo modificar la secuencia de comandos de la siguiente manera ...

if (isFractional) {if (x <= 5 | | x> = 0) moostartval [i] innerHTML = formatNumber (x, 3);.} / / 2 se cambia a 3
else {moostartval [i] innerHTML = Math.round (x).;

Actualización de valor nominal:
I havent molestado escribir ningún script de AJAX para actualizar el valor de Calificaciones, porque yo sé por experiencia que no siempre se tiene intención de actualizar la calificación tan pronto como el usuario algo tasas. Usted es libre de hacer lo que quieras con el valor nominal, que se actualizará el uso de AJAX, o someterlo o establecer un valor de campo de formulario oculto, que deben presentarse con el formulario completo, etc

función de updateRating (Identificación, clasificación) {
/ / Alert (id + "," + Nota);
/ / Haga lo con la calificación
}

No es función de javascript en el llamado "updateRating". Esta función se ha aprobado el ID de la División de la Clasificación, para identificar como para que las calificaciones (si hay más que uno calificaciones en la página) se ha actualizado y el valor de la calificación [updateRating (Identificación, clasificación)]. Usted puede optar por lo que quieras con estos valores, como he mencionado antes.

Valoración de la imagen: estrellas, corazones, bares o cualquier cosa que quieras
Cambio de la clasificación a cualquiera de los tipos anteriores (estrellas, corazones, etc) es muy simple. Basta con crear una imagen similar a la prevista y colóquelo pulg Recuerde, si cambia el nombre de la imagen, no hacer los cambios necesarios en el archivo CSS, vea abajo.

. Moostar {margin: 0px; padding: 0px; overflow: hidden; Ancho: 84px; altura: 20px; float: left; background: url ('stars.gif') repeat-x;}
. Moostar gen {float: left; margin: 0px; padding: 0px; display: block; Ancho: 84px; altura: 20px; text-decoration: none; text-indent:-9000px; z-index: 20;}
.. Moostar curr {background: url ('stars.gif') a la izquierda 25px;}

La mayoría de los widgets de calificaciones utilizan imágenes de las estrellas estrella y media con el ratón sobre los acontecimientos de cada estrella. Valoraciones Moo utiliza un sprite simple como una imagen de fondo para lograr los efectos requeridos visuales con una sobrecarga muy baja.

Requisitos: Mootools 1.2
Descargar Mootols Grado de la estrella de secuencias de comandos (Descargado 716 veces)

Yo había estado buscando un control deslizante de doble clavado (slider con dos perillas, mínimo y máximo) utilizando mootools. Aunque, encontré unos cuantos deslizante bien hecho doble clavado en el foro de mootools, El único problema era que todos estos reguladores de fuerza tiene el marcador de rango seleccionado. ¡Por fin! Me decidí a crear mi propia. Bueno! Hice uso del código original y modificarlo para tener un fondo deslizante que indica el rango seleccionado visualmente, como en mi ejemplo a continuación. Las áreas azul indica el rango de valor elegido.

Ver la Versión 2.2 de demostración | Descargar Mootools doble Pinned Versión 2.2 deslizante (Descargado 11509 veces)

Usted puede fácilmente cambiar el aspecto y la sensación de que el indicador alcance (en azul en el ejemplo anterior), mando de control deslizante, la guía de desplazamiento mediante la modificación del slider.css según sea necesario.

No dejarme un comentario si es que les sea útil.