Vyjadrenie IT

S rôznymi kolotoče vonku, veľa pre MooTools tiež, stále sa rozhodol napísať vlastnú Carousel triedy, pre niektoré z dobrých dôvodov
1. Chcel stránkovací funkcie (mohli skočiť konkrétny snímok / krok v karuselu).
2. Chceli slobodu, umiestnenie na ľavý a pravý tlačidlá či odkazy, kde vôbec sa mi zapáči.
3. Väčšiu kontrolu nad Slide schodov.

Ja sa podarilo vytvoriť nový Carousel, s vyššie uvedenými funkciami ... ako je uvedené nižšie ... Nebojte sa navrhnúť nejaké zmeny by ste vyžadovať!

Môj Príklad vyzerá takto ... [ View Demo ]

Zobraziť Demo záložky | Stiahnuť MooTools Carousel S stránkovacieho verzia 1.0 (stiahnuté 1998 krát)

1. Kolotoč Paging

Môžete ľahko pridať stránkovania do kolotoča, jednoducho nastavením stránkovací vlajku, čo je posledný parater prešiel pri vytváraní inštancie MooCarousel na hodnotu true (chcete stránkovací) alebo false (donot chce stránkovania).

var carousel1 = new MooCarousel ("carousel1_wrapper ',' carousel1_items_container ',' carousel1_moveleft ',' carousel1_moveright" c_ns, c_sss, true); / / ns = počet snímok, sss = snímok veľkosť kroku

A samozrejme môžete zmeniť vzhľad-n-štýl týchto vyhľadávacích achors, ako je libo úpravou ich CSS.

. Carousel_paging {text-align: právo; margin: 5px 10px 0 0;}
. Carousel_paging prúd, carousel_paging stránku {outline: none; šírka: týždeň. 15px, výška: 15px; line-height: 15px; text-align: centrum; display: block; float: left; pozadia: # D8D8EB; margin: 0 1px 0 0; text-decoration: none;}

. Carousel_paging: hover, carousel_paging prúd {background: # 4D4D9B, color: # FFFFFF;} ..

No! tam je malý problém keď, ak je nastavená, stránkovací kotvy potom to dostane generovaný vždy po Carousel komponenty. Chcel som, aby to dynamický tiež, ale potom už len, aby scenár k fúkanie rozmerov, rozhodol som sa ju preskočiť.
Ale viete, trochu Javascript, môžete ľahko upraviť stránkovací generácie kód v MooCarousel triede potešiť svoje potreby.

2. Prispôsobenie ľavý a pravý ikony

Môžete zmeniť umiestnenie, obrázky ani disple majetok z ľavého a pravého tlačidla jednoducho tým, že hranie sa s CSS. mať možnosť zmeniť umiestnenie medzi ľavým a pravým Privolávacie bol skutočný dôvod, aby som na pravú mojej našej Carousel triedy.
Vzhľadom k tomu, MooCarousel triedy, prijme id je z týchto tlačidiel, môžete skutočne umiestniť tieto tlačidlá kdekoľvek na stránke, prosím ... to nemusí byť v hierarchii prvkov, ako v mojom príklade.

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; pozície: relatívna, šírka: 23px; výška: 20px; float: left; cursor: pointer;}

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

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

3. Prispôsobenie snímok kroky

Čo tým myslím MOJE Prispôsobenie snímok kroky?
Väčšina Kolotoč posuňte plne s z viditeľného okna. Takže povedať, že mal štyri položky (ako v mojom vzorke vyššie), bude to kĺzať všetky štyri položky. S týmto Carousel Component, miniete niekoľko snímok a veľkosť kroku podľa vášho výberu.

var carousel1 = new MooCarousel ("carousel1_wrapper ',' carousel1_items_container ',' carousel1_moveleft ',' carousel1_moveright" c_ns, c_sss, true);
c_ns = počet snímok, c_sss = snímok veľkosť kroku

Aj v mojom example1 som calcuted prezentáciu veľkosť kroku, založený na logike kde, viem, že počet položiek, šírka na každej položky a marží, ktoré dali za každou položkou v mojom CSS.

/ * Pre Pitka 1 * /

var c1_w = 92 / / Pitka položky Šírka

var c1_n = 10 / / Celkový počet položiek porovnávané Pitka

var c1_pp = 4 / / Počet porovnávanej perpage Pitka položky

var c1_marginFactor = 51;

var c1_sss = c1_w * c1_pp / / sss = snímok veľkosť kroku

var c1_ns = parseInt (((c1_w * c1_n) / c1_sss) + 0.5) / / ns = počet snímok

c1_sss + = c1_marginFactor, / / ​​sss = snímok veľkosť kroku, 51 pre okraje

Požiadavky: MooTools 1.2

Zobraziť Demo záložky | Stiahnuť MooTools Carousel S stránkovacieho verzia 1.0 (stiahnuté 1998 krát)

MooRating je jednoduchý (cross prehliadač, samozrejme, pretože využíva sily knižnice MooTools), ľahké a vynikajúce MooTools podľa hodnotenia riešenia. To nie je pomenovaný ako "hviezdičiek", jednoducho preto, že by hodnotenie obrázok, ako si vybrať (ja som za predpokladu, hviezdičky, bary a srdce na stiahnutie, ale môžete vytvoriť vlastnú paletu a nechaj ho).

Ako to vyzerá takto:

	MooTools hodnotenie s rôznymi obrázkami Zobraziť ukážku
	MooTools hodnotenie s percentuálne hodnoty Zobraziť ukážku
	MooTools hodnotenie s hodnotami nepatrné Zobraziť ukážku

Stiahnuť Mootols é Script (Stiahnuté 718 krát)

Hodnotenie údaje: celé číslo, desatinné alebo percento
V súčasnej dobe skript je navrhnutý tak, aby ratingové zobraziť údaje ako celok hodnôt (1,2,3,4,5), v desatinné miesta (1,24, 3,45 atď), alebo v percentách (12%, 55% atď.) Voľba pre zobrazenie dát v jednom z uvedených formátov je možné nastaviť jednoducho tým, že sa mení niektoré vlajky hodnôt v JavaScripte (moorating.js)
V zásade existujú dva e dve vlajky na hranie, pre zobrazenie hodnoty vo formáte podľa vášho výberu ...

var inpercent = false; / / Nastavenie tohto príznaku na hodnotu true, ak potrebujete percentuálne hodnoty, ktoré sa zobrazí
var isFractional = false / / Nastavte na hodnotu true, ak chcete nepatrnej hodnoty, ako sú 1,24, 1,25 a 4,56, skôr než 1,2 ... 5

I dont myslím, že je potrebné nejaké vysvetlenie pre to. Okrem toho. Skript je veľmi jednoduchý. Ak viete, trochu javascripting, môžete upraviť skript dostať akúkoľvek hodnotu zobrazenú. Pre napr ak by ste chceli tri desatinné miesta majú byť zobrazené, ... proste poupraviť skript nižšie ...

if (isFractional) {if (x <= 5 | | x> = 0) moostartval [i] = innerHTML FormatNumber (x, 3);.} / / 2 sa mení na 3
else {moostartval [i] = innerHTML Math.round (x).;

Aktualizácia Hodnotenie hodnota:
I havent obťažoval písať nejaké AJAX skripty pre aktualizáciu ratingov hodnotu, pretože viem z vlastnej skúsenosti, že nie vždy sa to v úmysle aktualizovať RATING akonáhle užívateľ sadzieb niečo. Môžete si robiť, čo chcete s menovitou hodnotou, aktualizovať ho pomocou AJAX alebo ho nastaviť alebo skryté pole formulára hodnotu, ktorá má byť predložená s celou formou atď

Funkcia updateRating (id, hodnotenie) {
/ / Alert (id + "," + hodnotenie);
/ / Rob si, čo s hodnotením
}

K dispozícii je funkcia v javascriptu názvom "updateRating". Táto funkcia sa uzniesol na identifikátor Hodnotenie Div, zistiť, aké hodnotenie (ak existuje viac ako jedna hodnotenie na stránke) bol aktualizovaný a hodnota ratingu [updateRating (id, hodnotenie)]. Dalo by sa rozhodnúť, čo chcete s týmito hodnotami, ako som už spomenul.

Hodnotenie Obrázok: hviezdy, srdce, bary alebo niečo prosím
Zmena hodnotenia na niektorú z vyššie uvedených typov (hviezdy, srdce atď) je veľmi jednoduché. Stačí vytvoriť obraz podobný tomu, ak jeden a umiestnite ho dovnútra Pamätajte, že ak zmeníte názov obrazu, sa vykonať potrebné zmeny v súbore CSS, viď nižšie.

. Moostar {margin: 0px; padding: 0px; overflow: hidden; šírka: 84px; výška: 20px; float: left; background: url ("stars.gif") repeat-x;}
. Moostar span {float: left; margin: 0px; padding: 0px; display: block; šírka: 84px; výška: 20px; text-decoration: none; text-indent:-9000px, z-index: 20;}
.. Moostar akt. {Background: url ("stars.gif") odišiel 25px;}

Väčšina hodnotenie widgety používať hviezdu a pol hviezdičkami obrazy s myšou nad udalosťami na každej hviezdy. Moo hodnotenie používa jednoduchý škriatka ako obrázok na pozadí, aby sa dosiahla požadovaná vizuálne efekty s veľmi nízkou záťažou.

Požiadavky: MooTools 1.2
Stiahnuť Mootols é Script (Stiahnuté 718 krát)

Som hľadal dvojaký pripnutý Posúvač (jazdec s dvomi gombíkmi, minimálny a maximálny) pomocou MooTools. Aj keď, našiel som pár dobre odvedenú dvojitý jazdec pripnutý na fóre MooTools, jediný problém bol, že všetky tieto posuvníky dint sa vybrané dosahu. Konečne! Som sa rozhodol vytvoriť svoj vlastný. No! Som použiť pôvodný kód a upraviť ju mať jazdec pozadí, ktoré je uvedené rozmedzie vybrané vizuálne, ako v mojom príklade. Modré oblasti udáva rozsah hodnôt zvolili.

Zobraziť Demo verzia 2.2 | Download MooTools Double Čapové a kolíkové Slider verzia 2.2 (stiahnuté 11847 krát)

Môžete veľmi ľahko zmeniť vzhľad a dojem z radu ukazovatele (modro vo vyššie uvedenom príklade), slider gombík, posuvník trať zmenou slider.css podľa potreby.

Páči sa napíšte mi komentár, ak vám to užitočné.