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 1999 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 1999 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 721 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 721 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 11880 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.

Prima abbiamo avuto a che fare con i CSS per creare i nostri layout di pagina, allineando alcuni contenuti all'interno di una cella di una tabella sembrava proprio gioco da ragazzi. Basta impostare la "align" o "valign" la proprietà della tabella per avere l'allineamento della vostra scelta, pezzo di torta!
Con layout CSS, anche se abbiamo "vertical-align" proprietà per gli elementi, non sembra essere semplice come il "align" o "valign" Proprietà. Per essere più specifiic il "vertical-align" non sembra mai per risolvere qualsiasi dei vostri problemi, specialmente se si scrive un pezzo di cross-browser CSS.

Senza l'uso di tabelle HTML, IL PROBLEMA di centrare su un oggetto, sia esso un'immagine o un testo all'interno di una divisione di contenimento, è stato probabilmente ogni UI / CSS incubo sviluppatori ad un certo punto. Questo problema estrapola ulteriormente le vostre preoccupazioni di allinearsi, se l'oggetto da centrare è di natura dinamica, cioè quando la sua altezza è variabile (altezza sconosciuto).

Anche se non vi è alcuna soluzione nota dritto in avanti che avrebbe funzionato per tutta la gamma di browser che abbiamo a che fare con la soluzione che ho cercato di arrivare a non sembrano funzionare nei browser pochi che ho provato in (IE6, IE 7 , FF).

SOLUZIONE:
In browser come Mozilla, Opera e Safari, lo strano comportamento "vertical-align" proprietà può essere portato ai suoi sensi, semplicemente impostando la proprietà "display" della divisione di contenimento a "table-cell" (display: table-cell) .

Il problema resta con la famiglia dei browser IE, il quale, tuttavia non sembrano capire cosa con la proprietà "table-cell" e ignoranti come sono, semplicemente la ignorano. La soluzione qui di seguito, anche se semplici, annunci di alcuni elementi in più al vostro DOM HTML per far accadere le cose.

Il CSS e HTML simile a questa
.outer_container {
display: table;
text-align:center;
height: 140px;
width:140px;
position: relative;
overflow: hidden;
float:left;
margin:0px 10px 0px 0px;
}
.obj_container {
display: table-cell;
vertical-align: middle;
#position: absolute;
#top: 50%;
#left:50%;
}
.obj{
#position: relative;
#top: -50%;
#left:-50%;
margin:0px auto 0px auto;
}

HTML: -
<div class="outer_container">
<div class="obj_container">
<div class="obj"> <img src="image1.jpg"/> <br/> viste: 3456 </ div>
</ Div>
</ Div>

Il risultato assomiglia a questo: -

visualizzare la demo qui | File di origine Scarica (Scaricato 453 volte)

TOP Allinea CSS
.obj_container_top {
display: table-cell;
vertical-align: top;
#position: absolute;
#top: 0%;
#left:50%;
}
.obj_top{
#position: relative;
#top: 0%;
#left:-50%;
margin:5px auto 0px auto;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#cccccc;
}

HTML: -
<div class="outer_container">
<div class="obj_container_top">
<div class="obj_top"> <img src="image1.jpg"/> <br/> viste: 1234 </ div>
</ Div>
</ Div>

Il risultato assomiglia a questo: -

Allinea in basso CSS
.obj_container_bottom {
display: table-cell;
vertical-align: bottom;
#position: absolute;
#bottom: 0%;
#left:50%;
}
.obj_bottom {
#position: relative;
#bottom: 0%;
#left:-50%;
margin:5px auto 0px auto;
}
HTML: -
<div class="outer_container">
<div class="obj_container_bottom">
<div class="obj_bottom"> <img src="image1.jpg"/> <br/> viste: 1234 </ div>
</ Div>
</ Div>

Il risultato assomiglia a questo: -

visualizzare la demo qui | Scarica qui

Sembra età, dal momento che stavo cercando di trovare una soluzione ragionevole a questo problema di allineamento. Ma ora con questa soluzione, mi sento in pace piccola.

Con una speranza che un giorno

• l'allineamento verticale proprietà CSS lavorerà come fa all'interno di una cella di una tabella, senza dover battere molto intorno al cespuglio
• Almeno, impostando margin-top: auto e margin-bottom: auto, darà come lo stesso risultato con margin-left e margin-right set di auto
• La guerra dei browser sarà finito un giorno.
• Ci sarà un solo browser per TUTTI.

Scarica il CSS e HTML della soluzione qui sopra (Scaricato 453 volte) .. per la comprensibilità, la CSS non è stato ottimizzato

PS: E comunque, queste sono le miniature di alcune foto che ho cliccato ...

Non che ci sono solo pochi LIGHTBOX che si può trovare quando si google. Il problema con la maggior parte delle lightboxes che ho trovato era che tutti sembravano di utilizzare una o le altre strutture pesanti di peso JavaScript come jQuery, Prototype, MooTools e simili. Sono tutti freschi e swanky cercando. Ma se la vostra esigenza è "MA VOGLIO A SCRIPT LIGHTBOX semplice e leggero Per il mio sito", eccola qui;

Alcune caratteristiche interessanti di questa raccolta

1. Molto leggero
   uno. 4kb di script quando confezionate (8 kb scompattato)
   b. 2 kb di CSS
   c. Poche righe di codice HTML per il contenitore lightbox
2. Semplice da capire e da attuare
3. Può avere Lightbox multipli sulla stessa pagina.
4. Il contenitore lightbox viene utilizzato lo stesso per mostrare, contenuti diversi (che è incluso come parte divisioni nascosti nella pagina), a seconda del link / opzione che viene cliccato.
5. Centra automaticamente, prendendo in considerazione tutti i fattori, quali, l'altezza e la larghezza Window (risoluzione dello schermo), l'importo pagina di scorrimento e l'altezza dei contenuti del lightbox
6. Testato in IE 7 e FF

Visualizza Demo |
Scarica Fonte Zip Lightbox (Scaricato 1810 volte)

jo.js e jo_pack.js [versione imballato]: - un semplice insieme di oggetti JavaScript [JO], che contiene elementi, finestra e gli script di posizionamento dei documenti. È possibile aprire JO.JS se si vuole sporcarsi le mani con un po 'Javascripting avanzata, creazione di funzioni astratte, estendendo le proprietà degli elementi e così via. Se non è troppo Javascripting, Lascia stare.

lightbox.js, lightbox_pack.js [versione packed]: - contiene luce gli script del gestore della scatola. Se siete di progettazione delle pagine, anche responsabile di attuare il lightbox nella pagina, è necessario comprendere la LightBoxManager. LightBoxManager showLightBox contiene sostanzialmente solo due funzioni e closeLightBox.

lightbox.css: - Se conosci il CSS, è possibile giocare con lightbox.css per personalizzare il look-n-feel lightbox.css

index.html: Esempio di implementazione della raccolta con due contenuti diversi

lb_underlay_bkg.png: - Questa è la luce / simi un'immagine trasparente che viene utilizzato lo sfondo per il sottofondo lightbox [Underlay è lo strato al di sotto del lighbox, che impedisce all'utente di fare clic qualsiasi altra entità sulla pagina, mentre il lightbox è aperta]. È possibile utilizzare qualsiasi immagine o una tinta unita per questo scopo, a seconda del design della pagina e il requisito.

icon_lb_close.gif: - L'immagine per maniglia lightbox stretta in alto a destra della finestra di luce. Possibile utilizzare qualsiasi immagine come da disegno

Visualizza Demo |
Scarica Fonte Zip Lightbox (Scaricato 1810 volte)

Vi preghiamo di farci avere i vostri commenti ...