Expressant TI

Amb una varietat de carrusels per aquí, molts de Mootools també, encara em vaig decidir a escriure la meva pròpia classe Carrusel, per algunes bones raons
1. Es busca una funció de localització (per ser capaç de saltar una diapositiva en particular / pas en el carrusel).
2. Volien la llibertat amb la col · locació dels botons ESQUERRA i DRETA / links, allà on em doni la gana.
3. Més control sobre els Passos de diapositives.

Me les vaig arreglar per crear un carrusel de nou, amb les característiques anteriors de la manera ...... Siéntase lliure de suggerir les modificacions que es requereixin!

El meu exemple són aquestes ... [ Veure demostració ]

Veure demo | Descarregar Mootools carrusel Amb la versió 1.0 de paginació (Descarregat 1995 vegades)

1. Carrusel de paginació

Vostè pot afegir fàcilment la paginació al seu carrusel, simplement posant la bandera de paginació, que és Parater última va passar en crear la instància de la MooCarousel a true (vull paginació) o fals (donot desig de paginació).

var = new carousel1 MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright', c_ns, c_sss, true); / / ns = nombre de diapositives, sss = mida de pas de diapositives

I per descomptat es pot canviar el look-n-feel d'aquests achors de paginació al seu gust mitjançant la modificació de la CSS.

. Carousel_paging {text-align: right; margin: 5px 10px 0 0;}
. Carousel_paging actual, carousel_paging pàgina {outline: none; ample: ... 15px; alçada: 15px; line-height: 15px; text-align: center; display: block; float: left; fons: # D8D8EB; margin: 0 1px 0 0; text-decoration: none;}

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

Bé! hi ha un petit problema, però, les àncores de paginació si s'estableix, llavors es genera sempre després que el component de Carrusel. Jo volia fer-ho dinàmic també, però a continuació, només per mantenir la seqüència de comandaments per a la bufa de les proporcions, em vaig decidir a saltar.
Però vostè sap una mica de Javascript, que podria modificar fàcilment el codi de generació de paginació en la classe MooCarousel per complaure a les seves necessitats.

2. Personalització de les icones d'esquerra i dreta

Podeu canviar la ubicació, imatges o qualsevol propietat displat dels botons esquerre i dret, simplement per jugar amb el CSS. ser capaç de canviar les ubicacions dels buttoms esquerra i dreta va ser la raó real per a mi, a la nostra dreta, la meva classe de Carrusel.
Atès que aquesta classe MooCarousel, accepta l'ID és un d'aquests botons, vostè pot col · locar aquests botons en qualsevol lloc de la pàgina, si us plau ... no han d'estar en la jerarquia d'elements, com en el meu exemple.

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; Ample: 23px; alçada: 20px; float: left; cursor: pointer;}

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

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

3. Personalització dels passos de diapositives

Què vull dir MEUS PASSOS Personalització de diapositives?
La majoria dels carrusels passeu el ple de la finestra visible. Així que dir que tenia quatre elements (com en el meu exemple anterior), que es lliscarà cap als quatre elements. Amb aquest component de Carrusel, es passa el nombre de diapositives i la mida de pas de la seva elecció.

var = new carousel1 MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright', c_ns, c_sss, true);
c_ns = nombre de diapositives, c_sss = mida de pas de diapositives

A més, en el meu Exemple1 he calcuted la mida de pas de diapositives, basada en la lògica que, ja ho sé nombre d'elements, l'amplada de cada element i els marges que li han donat després de cada element en la meva CSS.

/ * Per orgia 1 * /

var c1_w = 92; l'article / / Ample de gresca

var c1_n = 10; / / nombre total d'articles Comparació de gresca

var c1_pp = 4 / / Nombre de gresca Comparació de productes perpage

var c1_marginFactor = 51;

var = c1_sss c1_w c1_pp * / / sss = mida de pas de diapositives

c1_ns var = parseInt (((* c1_w c1_n) / c1_sss) + 0.5) / / ns = nombre de diapositives

c1_sss + = c1_marginFactor; / / sss slide = mida de pas, de 51 anys per als marges

Requisits: Mootools 01/02

Veure demo | Descarregar Mootools carrusel Amb la versió 1.0 de paginació (Descarregat 1995 vegades)

Mootools és un MooRating (navegadors, per descomptat, ja que utilitza el poder de la biblioteca Mootools) simple, lleuger i excel · lent solució basada en qualificació. No es denomina com "estrelles", simplement perquè la imatge de qualificació podria ser que vostè trii (que he proporcionat estrelles, Bars i cors amb la descàrrega, però vostè pot crear la seva pròpia varietat i simplement deixi caure en).

Com es veu així:

	Valoració de Mootools amb diferents imatges Veure demostració
	Valoració de Mootools, amb valors percentuals Veure demostració
	Valoració de Mootools, amb valors fraccionaris Veure demostració

Descarregar Mootols Grau de l'estrella de seqüència (Descarregat 718 vegades)

Classificació de dades: Número sencer, decimal o Percentatge
Actualment el guió està dissenyat per mostrar les dades de qualificació com a valors sencers (1,2,3,4,5), en decimals (1,24, 3,45, etc) o en percentatges (12%, 55% etc.) L'opció de mostrar les dades en qualsevol dels formats esmentats es pot establir amb només canviar alguns valors dels indicadors dins de la JavaScript (moorating.js)
Bàsicament hi ha dues i dues banderes amb què jugar, per mostrar els valors en el format de la seva elecció ...

var inpercent = false; / / Establir la marca com true, si vostè requereix els valors de percentatge perquè es mostri
var isFractional = false / / Establir aquesta propietat a true per que els valors fraccionaris com 1,24, 1,25, 4,56 en lloc de 1,2 ... 5

I jo no crec que hi hagi cap explicació necessària. D'altra banda. L'script és molt simple. Si vostè coneix una mica de JavaScripting, pot modificar l'script per obtenir qualsevol tipus de valor que es mostra. Per exemple, si vostè vol tres xifres decimals que es mostraran ... només modificar la seqüència de comandaments de la següent manera ...

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

Actualització de valor nominal:
I havent molestat escriure cap script de AJAX per actualitzar el valor de Qualificacions, perquè jo sé per experiència que no sempre es té intenció d'actualitzar la qualificació tan aviat com l'usuari alguna cosa taxes. Sou lliure de fer el que vulguis amb el valor nominal, que s'actualitzarà l'ús d'AJAX, o sotmetre-o establir un valor de camp de formulari ocult, que s'han de presentar amb el formulari complet, etc

funció de updateRating (Identificació, classificació) {
/ / Alert (id + "," + Nota);
/ / Faci el amb la qualificació
}

No és funció de javascript en l'anomenat "updateRating". Aquesta funció s'ha aprovat la identificació de la Divisió de la Classificació, per identificar com perquè les qualificacions (si hi ha més que un qualificacions a la pàgina) s'ha actualitzat i el valor de la qualificació [updateRating (Identificació, classificació)]. Vostè pot optar per el que vulguis amb aquests valors, com he esmentat abans.

Valoració de la imatge: estrelles, cors, bars o qualsevol cosa que vulguis
Canvi de la classificació a qualsevol dels tipus anteriors (estrelles, cors, etc) és molt simple. Només cal crear una imatge similar a la prevista i poseu polz Recordi, si canvia el nom de la imatge, no fer els canvis necessaris al fitxer CSS, vegeu a sota.

. Moostar {margin: 0px; padding: 0px; overflow: hidden; Ample: 84px; alçada: 20px; float: left; background: url ('stars.gif') repeat-x;}
. Moostar gen {float: left; margin: 0px; padding: 0px; display: block; Ample: 84px; alçada: 20px; text-decoration: none; text-indent:-9000px; z-index: 20;}
.. Moostar curr {background: url ('stars.gif') a l'esquerra 25px;}

La majoria dels widgets de qualificacions utilitzen imatges de les estrelles estrella i mitja amb el ratolí sobre els esdeveniments de cada estel. Valoracions Moo utilitza un sprite simple com una imatge de fons per aconseguir els efectes requerits visuals amb una sobrecàrrega molt baixa.

Requisits: Mootools 01/02
Descarregar Mootols Grau de l'estrella de seqüència (Descarregat 718 vegades)

Jo havia estat buscant un control lliscant de doble clavat (slider amb dos perillós, mínim i màxim) utilitzant Mootools. Encara que, vaig trobar uns quants lliscant ben fet doble clavat al fòrum de Mootools, L'únic problema era que tots aquests reguladors de força té el marcador de rang seleccionat. Per fi! Em vaig decidir a crear la meva pròpia. Bé! Vaig fer ús del codi original i modificar-lo per tenir un fons lliscant que indica el rang seleccionat visualment, com en el meu exemple a continuació. Les àrees blava indica el rang de valor triat.

Veure la Versió 2.2 de demostració | Descarregar Mootools doble Pinned Versió 2.2 lliscant (Descarregat 11826 vegades)

Vostè pot fàcilment canviar l'aspecte i la sensació que l'indicador abast (en blau en l'exemple anterior), comandament de control lliscant, la guia de desplaçament mitjançant la modificació del slider.css segons sigui necessari.

No deixar-me un comentari si és que els sigui útil.