Uttrykke IT

Med en rekke Karuseller der ute, mange for MooTools også, jeg fortsatt besluttet å skrive min egen Carousel klasse, for noen gode grunner
1. Ønsket en personsøker funksjon (for å kunne hoppe et bestemt lysbilde / trinn i karusellen).
2. Ønsket frihet med plassering av Venstre og Høyre / linker, der jeg noen gang vil.
3. Mer kontroll over Slide trinn.

Jeg klarte å lage en ny Carousel, med de ovennevnte funksjoner ... som under ... gjerne foreslå noen endringer du måtte trenge!

Mitt eksempel ser slik ut ... [ Se demo ]

Se demo | Last ned MooTools karusell med Paging Version 1.0 (Nedlastet 1995 ganger)

1. Carousel Personsøker

Du kan enkelt legge til personsøker til karusellen din, ganske enkelt ved å sette paging flagg, som er siste parater passerte mens du oppretter forekomsten av MooCarousel til sann (ønske paging) eller falsk (donot ønsker paging).

Var carousel1 = ny MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright', c_ns, c_sss, true); / / ns = antall lysbilder, sss = lysbilde steg størrelse

Og selvsagt kan du endre utseende-n-følelse av disse personsøk achors som du vil ved å endre deres CSS.

. Carousel_paging {text-align: right; margin: 5px 10px 0 0;}
. Carousel_paging gjeldende, carousel_paging side {skisse: none; bredde:... 15px; høyde: 15px; linje-høyde: 15px; text-align: center; display: block; float: left; bakgrunn: # D8D8EB; margin: 0 1px 0 0; text-decoration: none;}

. Carousel_paging a: hover, carousel_paging nåværende {background: # 4D4D9B; color: # FFFFFF;}..

Vel! det er en liten sak om, sidevekslingen ankere hvis sett, så vil det bli generert alltid etter Carousel komponenten. Jeg ønsket å gjøre det dynamisk også, men da bare for å holde Script for å blåse ut av proporsjoner, bestemte jeg meg for å hoppe over det.
Men du vet litt Javascript, kan du lett endre sidevekslingsfilen generasjon koden i MooCarousel klassen å behage dine behov.

2. Tilpasse Venstre & Høyre Ikoner

Du kan endre plasseringen, bilder eller noen displat eiendom på venstre og høyre knapp bare ved å spille rundt med CSS. å kunne endre plasseringer av Venstre og Høyre buttoms var selve grunnen for meg til høyre for meg vår Carousel Class.
Siden dette MooCarousel klasse, aksepterer id er av disse knappene, kan du faktisk plassere disse knappene hvor som helst på siden, hvis du ber ... det trenger ikke å være i element hierarkiet, som i mitt eksempel.

Var carousel1 = ny 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; stilling: relative; bredde: 23px; høyde: 20px; float: left; markøren: pekeren;}

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

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

3. Tilpasse Slide Steps

Hva mener jeg Brukerdefinere SLIDE trinn?
De fleste Karuseller skyv fulle med av det synlige vinduet. Så sier du hadde fire elementer (som i mitt eksempelet ovenfor), vil den skyve alle de fire elementene. Med denne Carousel Component, passerer du antall lysbilder og steg størrelsen du ønsker.

Var carousel1 = ny MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright', c_ns, c_sss, true);
c_ns = antall lysbilder, c_sss = lysbilde steg størrelse

Også i mittnavn1 min har jeg calcuted raset trinnet størrelse, basert på logikk der, vet jeg antall elementer, bredde på hvert element, og marginene som har gitt etter hvert element i CSS min.

/ * For Carousal 1 * /

Var c1_w = 92; / / Carousal element Bredde

Var c1_n = 10; / / Antall sammenligning Carousal Elementer

Var c1_pp = 4 / / Antall sammenligning Carousal Elementer perpage

Var c1_marginFactor = 51;

Var c1_sss = c1_w * c1_pp; / / sss = lysbilde steg størrelse

Var c1_ns = parseInt (((c1_w * c1_n) / c1_sss) + 0,5); / / NS = antall lysbilder

c1_sss + = c1_marginFactor; / / sss = lysbilde skritt størrelse, 51 for marginer

Krav: MooTools 1.2

Se demo | Last ned MooTools karusell med Paging Version 1.0 (Nedlastet 1995 ganger)

MooRating er en enkel (kryss nettleser, selvfølgelig som den bruker makten til MooTools biblioteket), lette og utmerket MooTools basert vurdering løsning. Det er ikke betegnet som "Star Rating", ganske enkelt fordi kunne vurdering bildet være som du velger (jeg har gitt Stjerner, barer og hjerter med nedlastingen, men du kan lage din egen variasjon og bare slippe den i).

Hvordan det ser ut som:

	MooTools Rangering med forskjellige bilder Se demo
	MooTools Rangering med Prosentverdiene Se demo
	MooTools Rangering med brøkverdier Se demo

Last ned Mootols Stjerner Script (Nedlastet 718 ganger)

Rangering data: Heltall, Desimal eller prosentvis
Foreløpig skriptet er laget for å vise de reisende data som hele verdier (1,2,3,4,5), i desimaler (1,24, 3,45 etc) eller i prosenter (12%, 55% osv). Valget å vise data i noen av de nevnte formatene kan settes ganske enkelt ved å endre noen flagg verdier innenfor JavaScript (moorating.js)
I utgangspunktet er det to e to flagg å spille med, for å vise verdier i det formatet du ønsker ...

Var inpercent = false; / / Sett denne flagg til true, hvis du trenger prosentpoeng verdier som skal vises
Var isFractional = false / / Sett denne til true, hvis du ønsker brøkverdier som 1,24, 1,25, 4,56 snarere enn 1,2 ... 5

Og jeg tror ikke det er noen forklaring kreves for dette. Videre. Manuset er svært enkel. Hvis du vet litt javascripting, kan du endre skriptet til å få noen form for verdi vises. For eksempel hvis du ville ha tre desimaler som skal vises ... bare finpusse manuset som under ...

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

Oppdatering Rangering Value:
Jeg har ikke gidder skrive noen AJAX skript for å oppdatere Ratings verdi, fordi jeg vet fra min erfaring at ikke alltid gjør det til hensikt å oppdatere RATING så snart brukeren priser noe. Du er fri til å gjøre hva du vil med den nominelle verdien, oppdaterer du den ved hjelp av AJAX eller Send det eller ligger en skjult skjemafelt verdi, som skal leveres med hele skjemaet etc.

funksjon updateRating (id, rating) {
/ / Alert (id + "," + rating);
/ / Gjør alt MED RATING
}

Det er funksjon i javascript som heter "updateRating". Denne funksjonen har blitt passert IDen til vurdering div, å identifisere om hvilke karakterer (hvis det er mer at man stemmer på siden) ble oppdatert, og verdien av rettigheten [updateRating (id, rating)]. Du kan velge å hva du vil med disse verdiene, som jeg nevnte tidligere.

Rating Bilde: Stjerner, Hjerter, barer eller noe du vil
Endre karakter til noen av de ovennevnte typer (stjerner, hjerter osv.) er veldig enkel. Bare opprett et bilde som ligner på en forutsatt og slipp den i. Husk, hvis du endrer navnet på bildet, gjør nødvendige endringer i CSS-filen, se nedenfor.

. Moostar {margin: 0px; padding: 0px; overflow: hidden; bredde: 84px; høyde: 20px; float: left; bakgrunn: url ('stars.gif') repeat-x;}
. Moostar span {float: left; margin: 0px; padding: 0px; display: block; bredde: 84px; høyde: 20px; text-decoration: none; tekst-innrykk:-9000px; z-index: 20;}
.. Moostar curr {background: url ('stars.gif') forlot 25px;}

De fleste rangeringer widgets bruke stjerne og halv-stjerners bilder med musen over arrangementer på hver stjerne. Moo Ratings bruker en enkel sprite bildet som et bakgrunnsbilde for å oppnå de nødvendige visuelle effekter med en svært lav overhead.

Krav: MooTools 1.2
Last ned Mootols Stjerner Script (Nedlastet 718 ganger)

Jeg hadde vært på utkikk etter en dobbel fastklemt skyveknapp (stolpe med to knotter, minimum og maksimum) bruker MooTools. Selv gjorde jeg finne noen godt gjort dobbelt festet glidebryteren i MooTools forumet, var det eneste problemet at alle disse gliderne dint har det merkede området markør. Endelig! Jeg bestemte meg for å lage min egen. Vel! Jeg gjorde bruke den opprinnelige koden og endre det å ha en skyveknapp bakgrunn som indikerte intervallet valgt visuelt, som i mitt eksempel nedenfor. De blå områdene viser omfanget av verdi valgt.

Vis Versjon 2.2 Demo | Last ned MooTools Double Flyttet Slider Version 2.2 (Nedlastet 11829 ganger)

Du kan veldig enkelt endre utseendet området indikatoren (i blått i eksempelet ovenfor), glidebryteren knotten, glidebryteren spor ved å endre slider.css etter behov.

Du må slippe meg en kommentar hvis du finner det nyttig.

Hvis du er en av de gutta (som meg), som ofte sjekke CSS for godt laget HTML-siden, for å bli inspirert eller hva, så du kanskje har lagt merke til at vi har brukt Faux Positioning (som allerede nevnt i min tidligere artikkel Vi er bruker Faux absolutt posisjonering: A Brilliant CCS Layout )

Vi gjorde noen god jobb på denne malen, så tenkte det ville hyggelig å dele det .... Last ned denne WordPress Theme (lastet ned 196 ganger)