Esprimere IT

Con una varietà di Caroselli là fuori, molti per Mootools, come pure, ho ancora deciso di scrivere la mia stessa classe Carousel, per alcune buone ragioni
1. Cerco una funzionalità di spostamento (per essere in grado di saltare una diapositiva particolare / step nel carosello).
2. Cerco la libertà con il posizionamento dei tasti LEFT e RIGHT / links, dove mai mi piacerà.
3. Più controllo sui passi diapositive.

Sono riuscito a creare un nuovo Carosello, con le caratteristiche di cui sopra ... come di seguito ... Sentitevi liberi di suggerire eventuali modifiche che richiederebbero!

Il mio esempio si presenta così ... [ Demo View ]

Visualizza Demo | Scarica Mootools Carousel con la versione 1.0 di paging (Scaricato 2001 volte)

1. Carousel Paging

È possibile aggiungere facilmente il paging al carosello, semplicemente impostando il flag di paging, che è l'ultima parater passato durante la creazione dell'istanza del MooCarousel su true (voglio paging) o false (donot volendo paging).

var = new carousel1 MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright', c_ns, c_sss, true); / / ns = numero di diapositive, sss = slitta passo

E naturalmente è possibile cambiare il look-n-feel di questi achors di paging come ti pare modificando il CSS.

. Carousel_paging {text-align: right; margin: 5px 10px 0 0;}
. Carousel_paging corrente, carousel_paging page {outline: none; larghezza... 15px, Altezza: 15px; line-height: 15px; text-align: center; display: block; float: left; background: # D8D8EB; margin: 0 1px 0 0; text-decoration: none;}

. Carousel_paging a: hover, carousel_paging corrente {background: # 4D4D9B; color: # FFFFFF;}..

Bene! c'è un piccolo problema, però, Le ancore di paging, se impostato, poi si vengono generati sempre dopo che il componente Carousel. Volevo renderla dinamica pure, ma poi solo per mantenere lo script per il soffiaggio di proporzioni, ho deciso di ignorarlo.
Ma conoscete un po 'di Javascript, è possibile modificare facilmente il codice di generazione di paging nella classe MooCarousel per soddisfare le vostre esigenze.

2. Personalizzare le icone Left & Right

È possibile modificare la posizione, immagini o qualsiasi proprietà displat dei tasti destro e sinistro semplicemente suonando in giro con il CSS. di essere in grado di cambiare i posizionamenti dei buttoms Sinistra e Destra è stata la vera ragione per me la mia destra la nostra classe Carousel.
Dal momento che questa classe MooCarousel, accetta l'id di questi pulsanti, si può effettivamente mettere questi pulsanti in qualsiasi punto della pagina, se non vi dispiace ... non deve essere nella gerarchia degli elementi, come nel mio esempio.

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; width: 23px, Altezza: 20px; float: left; cursor: pointer;}

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

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

3. Personalizzazione Steps diapositive

Che cosa intendo MIEI PASSI SLIDE PERSONALIZZAZIONE?
La maggior parte dei Caroselli far scorrere il pieno rispetto della finestra visibile. Quindi, dire che hai avuto quattro elementi (come nel mio esempio sopra riportato), sarà scorrere tutti i quattro elementi. Con questo componente Carousel, si passa il numero di diapositive e il passo della vostra scelta.

var = new carousel1 MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright', c_ns, c_sss, true);
c_ns = numero di diapositive, c_sss = slitta passo

Inoltre, nella mia example1 ho calcuted la dimensione del passo diapositiva, basata sulla logica, dove, so che numero di elementi, larghezza su ciascun elemento ed i margini che hanno dato dopo ogni elemento nella mia CSS.

/ * Per Carousal 1 * /

c1_w var = 92; Larghezza Item / / Carousal

c1_n var = 10; Numero / / totale di elementi carousal comparativa delle

c1_pp var = 4 / / Numero di Carousal Comparazione perpage Articoli

var c1_marginFactor = 51;

var = c1_sss c1_w c1_pp * / / SSS = passo di diapositive

c1_ns var = parseInt (((* c1_w c1_n) / c1_sss) + 0,5); / / ns = numero di diapositive

c1_sss + = c1_marginFactor; / / SSS scivolo = dimensione del passo, 51 per i margini

Requisiti: Mootools 1.2

Visualizza Demo | Scarica Mootools Carousel con la versione 1.0 di paging (Scaricato 2001 volte)

Mootools è un MooRating (cross browser, naturalmente in quanto utilizza il potere della libreria MooTools) semplice, leggera e ottima soluzione basata su rating. Non è definito come "Star Rating", semplicemente perché, l'immagine rating potrebbe essere a vostra scelta (io ho fornito Stelle, Bar e cuori con il download, ma è possibile creare il vostro gusto personale e solo cadere in).

Come appare così:

	Valutazione Mootools con immagini differenti Visualizza Demo
	Valutazione Mootools con valori percentuali Visualizza Demo
	Valutazione Mootools con valori frazionari Visualizza Demo

Scarica Mootols Star Rating Script (Scaricato 722 volte)

Dati Rating: numero intero, decimale o percentuale
Attualmente lo script è stato progettato per visualizzare i dati di rating come valori interi (1,2,3,4,5), in decimali (1,24, 3,45, ecc) o in percentuale (12%, 55% etc). La scelta di mostrare i dati in uno dei formati citati può essere impostato semplicemente cambiando alcuni valori di bandiera all'interno del javascript (moorating.js)
Fondamentalmente ci sono due e due bandiere con cui giocare, per la visualizzazione dei valori nel formato di vostra scelta ...

var inpercent = false; / / Imposta questo flag su true, se avete bisogno di valori percentuali da visualizzare
var isFractional = false / / Imposta questo a true, se vuoi i valori frazionari come 1,24, 1,25, 4,56 invece di 1,2 ... 5

E non penso che ci sia una spiegazione per questo necessaria. Inoltre. Lo script è molto semplice. Se conoscete un po 'javascripting, è possibile modificare lo script per ottenere qualsiasi tipo di valore visualizzato. Per esempio, se si voleva tre cifre decimali da visualizzare ... basta modificare lo script come segue ...

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

Aggiornamento del valore di targa:
I havent preso la briga scrivere gli script AJAX per l'aggiornamento del valore di rating, perché so dalla mia esperienza che non sempre si intende aggiornare il RATING non appena l'utente abbia i tassi. Siete liberi di fare quello che vuoi con il valore nominale, aggiornarla con AJAX o inviarlo o Impostare un valore nascosto campo del modulo, da presentare con la forma intera, ecc

Funzione updateRating (id, rating) {
/ / Alert (id + "," + rating);
/ / Facciamo quanto CON IL RATING
}

Vi è funzione nel javascript chiamato "updateRating". Questa funzione è stato superato, la ID del Div Rating, per individuare di quali valutazioni (se ci sono più di un rating sulla pagina) è stato aggiornato e il valore del rating [updateRating (id, rating)]. Si può scegliere di quello che vuoi con questi valori, come ho detto prima.

Immagine di rating: stelle, cuori, bar o qualsiasi cosa tu per favore
Cambiare il rating per uno dei tipi di cui sopra (stelle, cuori, ecc) è molto semplice. Basta creare un'immagine simile a quello previsto e rilasciarlo dentro Ricordati, se si modifica il nome dell'immagine, non apportare le modifiche necessarie nel file CSS, vedi sotto.

. Moostar {margin: 0px; padding: 0px; overflow: hidden; width: 84px, Altezza: 20px; float: left; background: url ('stars.gif') repeat-x;}
. Moostar span {float: left; margin: 0px; padding: 0px; display: block; width: 84px, Altezza: 20px; text-decoration: none; text-indent:-9000px; z-index: 20;}
.. Moostar curr {background: url ('stars.gif') ha lasciato 25px;}

La maggior parte dei widget rating utilizzare stella e mezza stelle immagini con il mouse sopra eventi in ogni stella. Valutazioni Moo utilizza una semplice immagine sprite come immagine di sfondo per ottenere gli effetti visivi richiesti con un overhead molto basso.

Requisiti: Mootools 1.2
Scarica Mootols Star Rating Script (Scaricato 722 volte)

Ero stato alla ricerca di un doppio cursore bloccato (scorrimento con due manopole, minimo e massimo) con mootools. Anche se, ho trovato alcuni ben fatto doppio cursore bloccato nel forum mootools, L'unico problema era che tutti questi hanno la forza cursori marcatore selezionato gamma. Finalmente! Ho deciso di creare il mio. Bene! Ho fatto utilizzare il codice originale e modificarlo in modo da avere uno sfondo cursore che indica la gamma selezionata visivamente, come nel mio esempio qui sotto. Le aree blu indica l'intervallo di valore scelto.

Visualizza versione 2.2 Demo | Scarica Mootools doppia Pinned Version Slider 2,2 (Scaricato 11896 volte)

Si può facilmente modificare l'aspetto grafico dell'indicatore range (in blu nell'esempio precedente), manopola slider, la traccia di scorrimento modificando la slider.css come richiesto.

Non lasciatemi un commento se lo trovate utile.