Ga izražava

Uz razne deformacije vani, mnogi za Mootools kao dobro, ja sam ipak odlučio napisati svoju carousel klase, za nekih dobrih razloga
1. Htio stranične značajku (da bi mogli skočiti određeni slajd / STEP u vrtuljak).
2. Htio sloboda s plasman na lijeve i desne tipke / Linkovi, gdje god mi se sviđa.
3. Više kontrole nad Slide koraka.

Sam uspio stvoriti novu Vrtuljak, s gore navedenim značajkama ... kao ispod ... Slobodno predložiti bilo kakve izmjene te će zahtijevati!

Moj primjer izgleda ovako ... [ View Demo ]

Pogledajte demo se | Preuzimanje Mootools Vrtuljak s stranične Version 1.0 (Downloaded 1989 puta)

1. Vrtuljak Paging

Možete jednostavno dodati stranične na vrtuljak, jednostavno postavljanjem stranične zastavu, koja je prošle parater prošlo dok stvara instancu MooCarousel na TRUE (želite stranične) ili false (donot žele stranične).

var carousel1 = new MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright', c_ns, c_sss, true); / / ns = broj slajdova, SSS = tobogan veličina koraka

I ofcourse možete promijeniti izgled-n-osjećati od tih stranične achors kao što molim mijenjanjem svoje CSS.

. Carousel_paging {text-align: right; margin: 5px 10px 0 0;}
. Carousel_paging struja, carousel_paging stranica {prikaz: none; širina:... 15px; visina: 15px; line-height: 15px; text-align: središte; display: block; plovak: lijevo, background: # D8D8EB, marža: 0 1px 0 0; text-decoration: none;}

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

Dobro! postoji mali problem ipak, stranične sidra ako je skup, onda će se uvijek nastaje nakon carousel komponente. Htio sam da bude dinamičan kao dobro, ali onda samo da bi scenarij za puše iz proporcija, odlučio sam da ga preskočiti.
Ali znaš malo Javascript, možete jednostavno mijenjati kod generacije stranične u MooCarousel klase molimo vaše potrebe.

2. Prilagodba na lijevo i desno ikone

Možete promijeniti položaj, slike ili bilo displat imovine od lijeve i desne tipke jednostavno igranje okolo sa CSS-om. biti u mogućnosti mijenjati položaje u Lijevo i Desno buttoms je stvarni razlog za mene na desno moj naše carousel klase.
Budući da je ovo MooCarousel klasa, prihvaća id je od ovih gumba, zapravo možete staviti ove gumbe bilo gdje na stranici, molim Vas, ... ako to ne moraju biti u hijerarhiji elemenata, kao u mom primjeru.

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; položaj: relativni, širina: 23px; visina: 20px; plovak: lijevo, pokazivač: pointer;}

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

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

3. Prilagodba Slide koraka

Što mi znači MOJE Prilagodba KORACIMA slajda?
Većina deformacije gurnite pun vidljivog prozora. Dakle, reći da je imao četiri stavke (kao u mom uzorku gore), to će slajd sve četiri stavke. S ovim carousel komponente, možete proći broj slajdova i korak veličine po vašem izboru.

var carousel1 = new MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright', c_ns, c_sss, true);
c_ns = broj slajdova, c_sss = tobogan veličina koraka

Također, u mom example1 sam calcuted veličinu klizni korak, temelji se na logici gdje je, znam broj predmeta, širinu na svaku stavku i marže koje su dane nakon svake stavke u mojoj CSS.

/ * Za bančenje 1 * /

var c1_w = 92 / / bančenje predmeta Širina

var c1_n = 10 / / Ukupan broj predmeta odnos prema bančenje

var c1_pp = 4 / / Broj odnos prema bančenje točke perpage

var c1_marginFactor = 51;

var c1_sss = c1_w * c1_pp / / SSS = tobogan veličina koraka

var c1_ns parseInt = (((c1_w * c1_n) / c1_sss) + 0,5); / / ns = broj slajdova

c1_sss + = c1_marginFactor / / SSS = tobogan veličina koraka, 51 na marginama

Zahtjevi: Mootools 1.2

Pogledajte demo se | Preuzimanje Mootools Vrtuljak s stranične Version 1.0 (Downloaded 1989 puta)

MooRating je jednostavan (križ preglednik, naravno, jer se koristi moć MooTools knjižnice), lagan i odličan Mootools ocjena temelji rješenje. Nije nazvao kao "kategorizaciji zvjezdicama", jednostavno zato što Ocjena slika bi mogla biti kao što ste izabrali (Ja sam pod uvjetom Provjerite, barovi i srca s download, ali možete napraviti svoj vlastiti izbor i samo je kap u).

Kako to izgleda ovako:

	Mootools Ocjena različitim slikama Vidi Demo
	Mootools ocjena s Postotak vrijednosti Vidi Demo
	Mootools ocjena s djelomičnim vrijednostima Vidi Demo

Preuzmite Mootols Broj zvjezdica Skripta (Downloaded 718 puta)

Ocjena podaci: cijeli broj, decimalni ili postotak
Trenutno skripta je dizajniran za prikaz ocjena podatke kao cjelovite vrijednosti (1,2,3,4,5), u decimale (1,24, 3,45 i sl.) ili u postocima (12%, 55% itd.). Izbor za prikaz podataka u bilo kojem od spomenutih formata može se postaviti jednostavno promjenom nekih vrijednosti unutar zastavu JavaScript (moorating.js)
U osnovi postoje dvije e dvije zastave igrati sa, za prikazivanje vrijednosti u formatu po vašem izboru ...

var inpercent = false; / / Postavite ovu zastavu na true, ako vam je potrebna postotak vrijednosti koji će biti prikazani
var isFractional = false / / Set to istina, ako želite nepotpune vrijednosti kao što su 1,24 i 1,25 i 4,56 umjesto 1,2 ... 5

A ja ne mislim da je bilo potrebno objašnjenje za to. Osim toga. Skripta je vrlo jednostavna. Ako znate malo javascripting, možete modificirati skriptu da biste dobili bilo kakve vrijednosti prikazane. Jer npr. ako biste željeli tri decimalna mjesta koji će biti prikazani ... samo ugađanje skriptu kao ispod ...

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

Ažuriranje Ocjena vrijednost:
Ja luka smeta pisanje bilo kakvih AJAX skripte za ažuriranje ocjene vrijednost, jer znam da iz mog iskustva da NIJE UVIJEK se ne namjerava ažurirati Ocjena čim nešto korisničkom stope. Vi ste slobodni raditi što god želite s nazivnom vrijednosti, Ažurirajte koristeći AJAX ili ga poslati ili Podesite skrivene vrijednost polje obrasca, koje se podnosi s cijelim obliku itd.

Funkcija updateRating (id, ocjena) {
/ / Alert (id + "" + ocjena);
/ / Što god SA rating
}

Tu je funkcija u JavaScriptu pod nazivom "updateRating". Ova funkcija je prošao u ID Ocjena diviziju, identificirati kako bi se što ocjena (ako postoji više od jedne ocjene na stranici) je ažuriran i vrijednost ocjena [updateRating (id, rating)]. Možete odabrati ono što želite s tim vrijednostima, kao što sam spomenuo ranije.

Ocjena Slika: zvjezdice, srca, barovi, ili bilo što, molim Vas
Promjena ocjena za bilo koji od navedenih vrsta (zvjezdice, srca, itd.) je vrlo jednostavan. Dovoljno je stvoriti sliku sličan onome predviđenom i ispustite ga u. Zapamtite, ako ste promijenili ime slike, napravite potrebne promjene u CSS datoteke, pogledajte u nastavku.

. Moostar {margin: 0px; padding: 0px; overflow: skriveno, širina: 84px; visina: 20px; plovak: lijevo, background: url ('stars.gif') ponavljam-x;}
. Moostar span {plovak: lijevo; margin: 0px; padding: 0px; display: block; širina: 84px; visina: 20px; text-decoration: none; teksta alineje:-9000px; z-index: 20;}
.. Moostar valuta {background: url ('stars.gif') lijevo 25px;}

Većina ocjene dodaci koristiti zvijezda i pola zvjezdice slike s mišem preko događaja na svakoj zvijezdi. Moo Ocjene koristi jednostavan Sprite sliku kao pozadinsku sliku za postizanje potrebne vizualne efekte s vrlo niskom pretek.

Zahtjevi: Mootools 1.2
Preuzmite Mootols Broj zvjezdica Skripta (Downloaded 718 puta)

Sam bio u potrazi za dvokrevetnu zabodena klizač (slider s dvije ručice, minimalne i maksimalne) koristeći mootools. Iako, ja sam naći nekoliko dobro učinio dvostruko zabodena klizač u mootools forumu, jedini problem je da sve to klizače utisak imaju odabranog raspona marker. Konačno! Odlučio sam napraviti moj vlastiti. Dobro! Ja sam koristiti izvorni kod i mijenjati imati klizača pozadinu koja je naznačeno raspon odabrane vizualno, kao u mom primjeru u nastavku. Plavi područja označava raspon vrijednosti odabrani.

Prikaži verziju 2.2 Demo | Preuzimanje Mootools Dvokrevetna Pinned Slider inačice 2.2 (Downloaded 11652 puta)

Možete vrlo lako promijeniti izgled i dojam raspon pokazatelja (u plavo u gornjem primjeru), klizač tipku, klizač staze mijenjanjem slider.css prema potrebi.

Ne ispadne mi komentar ako vam je koristan.