Expresa-la

Con unha variedade de carrosséis aí fóra, moitos para Mootools tamén, eu decidín escribir a miña propia clase Carousel, por algunhas boas razóns
1. Espontánea un recurso de programación (para poder ir unha foto particular / paso no carrusel).
2. Desexaban a liberdade coa colocación dos botóns esquerda e dereita / enlaces, onde queira que eu por favor.
3. Máis control sobre os pasos de diapositivas.

Eu conseguir crear un novo carrusel, coas características anteriormente ... como a continuación ... Sinto-se libre para suxerir as modificacións que requira!

O meu exemplo coma este ... [ Ver Demo ]

Vexa o Demo | Descargar Mootools carrusel con paxinación Versión 1.0 (baixo 1981 veces)

1. Paging Carousel

Pode facilmente engadir a programación para o carrusel, simplemente definindo o sinalizador de paxinación, que é parater última pasou ao crear a instancia do MooCarousel a verdade (é paxinación) ou falso (donot querendo programación).

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

E claro que pode cambiar o look-n-feel destes achors de paxinación que queira, modificando o seu CSS.

. Carousel_paging {text-align: right; Margin: 5px 10px 0 0;}
. Carousel_paging actual, páxina carousel_paging {outline: none; width: ... 15px; height: 15px; line-height: 15px; text-align: center; Mostrar: block; float: left; background: # D8D8EB; Margin: 0 0 0 1px; text-decoration: none;}

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

Ben! hai un pequeno problema, porén, as áncoras de paxinación se definido, polo que se ve sempre xerado despois de que o compoñente do carrusel. Eu quería facelo dinámico, así como, pero só para manter o Script para soprar as proporcións, eu decidir ignore-lo.
Pero vostede sabe un pouco de JavaScript, pode facilmente modificar o código de xeración de programación na clase MooCarousel para agradar ás súas necesidades.

2. Personalizar as iconas de esquerda e dereita

Pode cambiar o posicionamento, imaxes ou calquera propiedade displat dos botóns esquerdo e dereito simplemente por xogar con CSS. poder cambiar as colocacións dos buttoms esquerda e dereita foi a razón real para min o meu dereito Clase noso carrusel.
Unha vez que esta clase MooCarousel, acepta o ID é un deses botóns, pode realmente colocar os botóns en calquera lugar da páxina, por favor ... non ten que ser na xerarquía de elementos, como no meu exemplo.

var carousel1 = new 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; width: 23px; height: 20px; float: left; cursor: pointer;}

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

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

3. Personalizar Pasos de diapositivas

O que quero dicir meus pasos foto Personalización?
A maioría dos carrosséis mova o total coa fiestra visible. Entón, dicir que tiña catro elementos (como no meu exemplo anterior), pon todos os catro elementos. Con este compoñente Carrossel, Vostede pasa o número de diapositivas eo tamaño do paso da súa elección.

var carousel1 = new 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 do paso de diapositivas

Ademais, na miña example1 eu calcuted o tamaño do paso foto, baseado na lóxica en que, sei que número de elementos, o ancho de cada elemento e as marxes que deron despois de cada elemento no meu CSS.

/ * Para bacanal 1 * /

var c1_w = 92; Ancho Elemento / farra /

var c1_n = 10; / Número / Cantidade de elementos farra Comparación

var c1_pp = Número 4 / / Comparación de perpage Elementos bacanal

var c1_marginFactor = 51;

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

var c1_ns = parseInt (((* c1_w c1_n) / c1_sss) + 0,5) / / NS = número de diapositivas

c1_sss + = c1_marginFactor / / SSS = tamaño do paso de diapositivas, 51 para as marxes

Requisitos: Mootools 1.2

Vexa o Demo | Descargar Mootools carrusel con paxinación Versión 1.0 (baixo 1981 veces)

Mootools MooRating é un (cross navegador, claro como el usa o poder da biblioteca MooTools) simple, leves e excelente solución baseada en clasificación. Non é denominado como "votos", simplemente porque, a imaxe clasificación podería ser como elixir (eu teño dende estrelas, Bares e corazóns con a descarga, pero pode crear a súa propia variedade e só soltalo in).

Como se parece:

	Mootools Avaliación con imaxes diferentes Ver demostración
	Mootools Avaliación con valores porcentuais Ver demostración
	Mootools Avaliación con valores fracionários Ver demostración

Descargar Mootols votos Script (Trasladado 716 veces)

Datos Avaliación: Número enteiro, Decimal ou Porcentaxe
Actualmente, o guión foi creado para mostrar os datos de clasificación como valores enteiros (1,2,3,4,5), en cifras decimais (1,24, 3,45, etc) ou en porcentaxe (12%, 55% etc). A opción para mostrar datos en calquera dos formatos mencionados pode definirse simplemente cambiando algúns valores bandeira dentro do javascript (moorating.js)
Basicamente, hai dous e dous pavillóns para xogar, para amosar valores en formato da súa elección ...

var inpercent = false; / / Define ese sinalizador para true, se precisa de valores porcentuais, para ser exhibida
var isFractional = false / / Define esta opción para certo, se queres valores fracionários como 1,24, 1,25, 4,56, en vez de 1,2 ... 5

E eu non creo que haberá explicación necesaria para iso. Ademais. O script é moi sinxelo. Se coñeces un pouco Javascripting, pode modificar o script para obter calquera tipo de valor exhibido. Por exemplo, se quixese tres cifras decimais a mostrar ... só axustar a escritura como a continuación ...

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

Actualizando Valor Clasificación:
I havent incómodo escribir os guións de AJAX para actualizar o valor Ratings, porque sei da miña experiencia que non sempre pretende actualizar o CLASIFICACIÓN así que a cousa taxas de usuario. Vostede é libre de facer o que quere co valor nominal, actualiza-lo usando AJAX ou presenta-lo ou establecer un valor de campo oculto de formulario, que se presentará con todo o formulario, etc

función updateRating (id, clasificación) {
/ / Alert (ID + "," rating +);
/ / Fai o que sexa coa clasificación
}

Hai función o javascript chamada "updateRating". Esta función foi pasada a identificación da Div Avaliación, para identificar como a clasificación (se hai máis que unha clasificación na páxina) foi actualizado eo valor da avaliación [updateRating (id, clasificación)]. Podería elixir o que quere con eses valores, como mencionei anteriormente.

Imaxe Avaliación: estrelas, corazóns, barras ou calquera cousa que queira
Alterando a clasificación para calquera dos tipos anteriores (estrelas, etc corazóns) é moi sinxelo. Só ten que crear unha imaxe semellante á prevista e solte-o dentro Teña en conta que, se cambiar o nome da imaxe, non facer os cambios necesarios no ficheiro CSS, vexa abaixo.

. Moostar {Margin: 0px; padding: 0px; overflow: hidden; width: 84px; height: 20px; float: left; background: url ('stars.gif') repeat-x;}
. Moostar span {float: left; Margin: 0px; padding: 0px; Mostrar: block; width: 84px; height: 20px; text-decoration: none; text-indent:-9000px; z-index: 20;}
.. Moostar curr {background: url ('stars.gif') deixou 25px;}

A maioría dos widgets avaliacións usar estrela e media estrela de imaxes co rato sobre os acontecementos en cada estrela. Puntuacións Moo usa unha imaxe simple sprite como unha imaxe de fondo para alcanzar os efectos desexados visuais con unha sobrecarga moi baixa.

Requisitos: Mootools 1.2
Descargar Mootols votos Script (Trasladado 716 veces)

Eu estaba a buscar un control deslizante dobre preso (Slider con dous botóns, mínimo e máximo), utilizando mootools. Aínda que, eu atope unha barra ben feito poucos parella preso no foro mootools, O único problema era que toda a forza destes controis deslizantes ten o marcador de intervalo seleccionado. Finalmente! Eu decidimos crear o meu propio. Ben! Eu usei o código orixinal e modificalo para ter un fondo deslizante que indicou a franxa seleccionada visualmente, como no meu exemplo abaixo. As áreas de azul indica a gama de valor escollido.

Vexa o Demo Versión 2.2 | Mootools descargar double Pinned Versión Slider 2,2 (Trasladado 11537 veces)

Pode facilmente cambiar a aparencia do indicador de intervalo (en azul no exemplo anterior), o botón Slider, o rastro do slide, modificando o slider.css sexa necesario.

Non me mande un comentario se cre que é útil.