Expressá-la

Com uma variedade de carrosséis lá fora, muitos para Mootools também, eu ainda decidi escrever minha própria classe Carousel, por algumas boas razões
1. Espontânea um recurso de paginação (para ser capaz de saltar um slide particular / passo no carrossel).
2. Desejavam a liberdade com a colocação dos botões ESQUERDA e DIREITA / links, onde quer que eu por favor.
3. Mais controle sobre os passos de slides.

Eu consegui criar um novo carrossel, com as características acima ... como abaixo ... Sinta-se livre para sugerir as modificações que exijam!

Meu exemplo parecido com este ... [ Ver Demo ]

Veja o Demo | Download de Mootools carrossel com paginação Versão 1.0 (baixado 2001 vezes)

1. Paging Carousel

Você pode facilmente adicionar a paginação para o carrossel, simplesmente definindo o sinalizador de paginação, que é parater última passou ao criar a instância do MooCarousel a verdade (quer paginação) ou falso (donot querendo paginação).

var carousel1 = new MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright', c_ns, c_sss, true); / / ns = número de slides, sss = tamanho do passo de slides

E claro que você pode mudar o look-n-feel destes achors de paginação que você queira, modificando o seu CSS.

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

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

Bem! há um pequeno problema, porém, as âncoras de paginação se definido, então ele vai ficar sempre gerado depois que o componente do carrossel. Eu queria torná-lo dinâmico, bem como, mas apenas para manter o Script para soprar as proporções, eu decidi ignorá-lo.
Mas você sabe um pouco de JavaScript, você pode facilmente modificar o código de geração de paginação na classe MooCarousel para agradar às suas necessidades.

2. Personalizar os ícones de esquerda e direita

Você pode alterar o posicionamento, imagens ou qualquer propriedade displat dos botões esquerdo e direito simplesmente por brincar com o CSS. ser capaz de alterar as colocações dos buttoms Esquerda e Direita foi o motivo real para mim o meu direito Classe nosso carrossel.
Uma vez que esta classe MooCarousel, aceita o ID é um desses botões, você pode realmente colocar os botões em qualquer lugar da página, por favor ... não tem que ser na hierarquia 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 Passos de slides

O que quero dizer MEUS PASSOS SLIDE Personalização?
A maioria dos Carrosséis deslize o total com a janela visível. Então, dizer que você tinha quatro itens (como no meu exemplo acima), ele coloca todos os quatro itens. Com este componente Carrossel, Você passa o número de slides eo tamanho do passo de sua escolha.

var carousel1 = new MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright', c_ns, c_sss, true);
c_ns = número de slides, c_sss = tamanho do passo de slides

Além disso, na minha example1 eu calcuted o tamanho do passo slide, baseado na lógica em que, eu sei que número de itens, a largura em cada item e as margens que deram depois de cada item no meu CSS.

/ * Para bacanal 1 * /

var c1_w = 92; Largura Item / farra /

var c1_n = 10; / Número / Total de Itens farra Comparação

var c1_pp = Número 4 / / Comparação de perpage Itens bacanal

var c1_marginFactor = 51;

var c1_sss = c1_w * c1_pp / / sss = tamanho do passo de slides

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

c1_sss + = c1_marginFactor / / sss = tamanho do passo de slides, 51 para as margens

Requisitos: Mootools 1.2

Veja o Demo | Download de Mootools carrossel com paginação Versão 1.0 (baixado 2001 vezes)

Mootools MooRating é um (cross browser, é claro como ele usa o poder da biblioteca MooTools) simples, leves e excelente solução baseada em classificação. Não é denominado como "Votos", simplesmente porque, a imagem classificação poderia ser como você escolher (eu tenho desde Estrelas, Bares e corações com o download, mas você pode criar sua própria variedade e só soltá-lo in).

Como ele se parece:

	Mootools Avaliação com imagens diferentes Exibir demonstração
	Mootools Avaliação com valores percentuais Exibir demonstração
	Mootools Avaliação com valores fracionários Exibir demonstração

Baixar Mootols Votos Script (Transferido 722 vezes)

Dados Avaliação: Número inteiro, Decimal ou Percentual
Atualmente, o script foi criado para mostrar os dados de classificação como valores inteiros (1,2,3,4,5), em casas decimais (1,24, 3,45 etc) ou em percentagem (12%, 55% etc). A escolha para mostrar dados em qualquer um dos formatos mencionados pode ser definido simplesmente mudando alguns valores bandeira dentro do javascript (moorating.js)
Basicamente, existem dois e dois pavilhões para brincar, para exibir valores no formato de sua escolha ...

var inpercent = false; / / Defina esse sinalizador para true, se você precisar de valores percentuais, para ser exibida
var isFractional = false / / Defina esta opção para verdadeiro, se você quiser valores fracionários como 1,24, 1,25, 4,56, em vez de 1,2 ... 5

E eu não acho que há qualquer explicação necessária para isso. Além disso. O script é muito simples. Se você conhece um pouco Javascripting, você pode modificar o script para obter qualquer tipo de valor exibido. Por exemplo, se você quisesse três casas decimais a serem exibidas ... apenas ajustar o script como abaixo ...

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

Atualizando Valor Classificação:
I havent incomodado escrever os scripts de AJAX para atualizar o valor Ratings, porque eu sei da minha experiência que nem sempre ele pretende atualizar o CLASSIFICAÇÃO assim que a coisa taxas de usuário. Você é livre para fazer o que quiser com o valor nominal, atualizá-lo usando AJAX ou apresentá-lo ou definir um valor de campo oculto de formulário, que será apresentado com todo o formulário, etc

função updateRating (id, classificação) {
/ / Alert (ID + "," rating +);
/ / Faça o que for COM A CLASSIFICAÇÃO
}

Há função no javascript chamada "updateRating". Esta função foi passada a identificação da Div Rating, para identificar como a classificação (se houver mais que uma classificação na página) foi atualizado eo valor da avaliação [updateRating (id, classificação)]. Você poderia escolher o que quiser com esses valores, como mencionei anteriormente.

Imagem Avaliação: estrelas, corações, Barras ou qualquer coisa que você queira
Alterando a classificação para qualquer um dos tipos acima (estrelas, etc corações) é muito simples. Basta criar uma imagem semelhante à prevista e solte-o dentro Lembre-se, se você alterar o nome da imagem, não fazer as mudanças necessárias no arquivo CSS, veja 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; display: block; width: 84px; height: 20px; text-decoration: none; text-indent:-9000px; z-index: 20;}
.. Moostar curr {background: url ('stars.gif') deixou 25px;}

A maioria dos widgets avaliações usar estrela e meia estrela de imagens com o mouse sobre os acontecimentos em cada estrela. Pontuações Moo usa uma imagem simples sprite como uma imagem de fundo para alcançar os efeitos desejados visuais com uma sobrecarga muito baixa.

Requisitos: Mootools 1.2
Baixar Mootols Votos Script (Transferido 722 vezes)

Eu estava procurando um controle deslizante duplo preso (slider com dois botões, mínimo e máximo), utilizando mootools. Embora, eu encontrei uma barra bem feito poucos casal preso no fórum mootools, O único problema era que toda a força destes controles deslizantes tem o marcador de intervalo selecionado. Finalmente! Eu decidi criar o meu próprio. Bem! Eu usei o código original e modificá-lo para ter um fundo deslizante que indicou a faixa selecionada visualmente, como no meu exemplo abaixo. As áreas de azul indica a gama de valor escolhido.

Veja o Demo Versão 2.2 | Mootools download double Pinned Versão Slider 2,2 (Transferido 11931 vezes)

Você pode facilmente mudar a aparência do indicador de intervalo (em azul no exemplo acima), o botão slider, o rasto do slider, modificando o slider.css conforme necessário.

Não me mande um comentário se você achar que é útil.