Väljendades IT

Mis sorti Karussellid seal, paljud Mootools ka, ma siiski otsustasin kirjutada oma Carousel klass, mõned head põhjused
1. Tahan kutsungi tunnuseks (et oleks võimalik hüpata eriti slide / samm karussell).
2. Wanted vabadust paigutamine vasakule ja paremale nuppe / linke, kus iganes ma palun.
3. Rohkem kontrolli Slide Steps.

Ma ei suutnud luua uus karusell, eespool nimetatud funktsioone ... nagu allpool ... Julgelt soovitan muudatusi te eeldaks!

Minu Näide näeb välja selline ... [ View Demo ]

Vaata Demo | Lae Mootools Carousel Mis Piipar versioon 1.0 (Alla 1990 korda)

1. Karussell Piipar

Võid kergesti lisada kutsungi oma karusell, lihtsalt seades kutsungi lipp, mis on viimase parater läbinud luues astme MooCarousel tõeseks (soovi kutsungi) või vale (donot tahavad kutsungi).

var carousel1 = new MooCarousel (carousel1_wrapper "," carousel1_items_container "," carousel1_moveleft "," carousel1_moveright "c_ns, c_sss, true); / / ns = number of slaidid, sss = slide sammu suurus

Ja muidugi võite muuta look-n-tunnen neid kutsungi achors nagu soovite, muutes oma CSS.

. Carousel_paging {text-align: right; margin: 5px 10px 0 0;}
. Carousel_paging. Praegune. Carousel_paging. Lehekülje {ülevaade: none; laius: 15px; kõrgus: 15px; line-height: 15px; text-align: center; kuva: block; float: left; background: # D8D8EB; margin: 0 1px 0 0; text-decoration: none;}

. Carousel_paging: hover. Carousel_paging. Praegune {background: # 4D4D9B; color: # FFFFFF;}

Hästi! on väike küsimus küll, kutsungi ankrud kui see on seatud, siis saavad loodud alati pärast Carousel osa. Ma tahtsin, et oleks dünaamiline hästi, kuid siis lihtsalt hoida Script puhub välja proportsioone, otsustasin ma vahele jätta.
Aga tead vähe Javascript, siis võib kergesti muuta kutsungi põlvkonna koodi MooCarousel klassi palun teie vajadustele.

2. Kohandamine Left & Right Icons

Teil on võimalik muuta paigutus, pilte või mistahes displat vara vasakule ja paremale nuppe lihtsalt mängides CSS. et oleks võimalik muuta praktika Vasak ja parem buttoms oli tegelik põhjus, miks ma paremal minu oma Carousel klassi.
Kuna see MooCarousel klassi, võtab id on neid nuppe saab tegelikult panna neid nuppe suvalisse kohta leheküljel, kui siis ... see ei pea olema element hierarhia, nagu minu eeskuju.

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; seisukoht: suhteline, laius: 23px; kõrgus: 20px; float: left; kursor: pointer;}

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

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

3. Kohandamine Slide Steps

Mida ma mõtlen MY kohandamine SLIDE sammud?
Enamik Karussellid lükake täis on nähtav akna. Nii et öelda, sa olid 4 eset (nagu minu proov eespool), siis lükake kõik neli punkti. Selle Carousel Component, Jätate number slaidid ja sammu suurus oma valik.

var carousel1 = new MooCarousel (carousel1_wrapper "," carousel1_items_container "," carousel1_moveleft "," carousel1_moveright "c_ns, c_sss, true);
c_ns = number of slaidid, c_sss = slide sammu suurus

Ka minu example1 olen calcuted slide sammu suurus, mis põhineb loogika, kus ma tean mitmeid punkte, laius iga objekt ja marginaale, mis on antud pärast iga kirje minu CSS.

/ * For pummelung 1 * /

var c1_w = 92; / / pummelung toode Laius

var c1_n = 10; / / koguarv Võrdlemine pummelung Kirjed

var c1_pp = 4 / / arv Võrdlemine pummelung Kirjed perpage

var c1_marginFactor = 51;

var c1_sss = c1_w * c1_pp / / sss = slide sammu suurus

var c1_ns = parseInt (((c1_w * c1_n) / c1_sss) + 0,5) / / ns = number of slaidid

c1_sss + = c1_marginFactor / / sss = slide sammu suurus, 51 ja marginaalid

Nõuded: Mootools 1,2

Vaata Demo | Lae Mootools Carousel Mis Piipar versioon 1.0 (Alla 1990 korda)

MooRating on lihtne (cross brauser, muidugi kui ta kasutab võimu Mootools raamatukogu), kerge ja suurepärane Mootools põhineb hinnang lahendus. Ei ole nimetada "Star Rating" lihtsalt sellepärast, hinnang pilti võiks olla valida (olen tingimusel Stars, vardad ja südamed lae alla, kuid saate luua oma sordi ja lihtsalt tilk seda).

Kuidas see välja näeb:

	Mootools Rating erinevaid pilte Vaata Demo
	Mootools Rating koos protsent väärtused Vaata Demo
	Mootools Rating koos Fractional väärtused Vaata Demo

Lae Mootols Tärnireiting Script (laetud 718 korda)

Hinnang andmed: täisarv, kümnendsüsteemis või osakaal
Praegu skripti eesmärk on näidata hinnang andmed tervikuna väärtused (1,2,3,4,5), mis kümnendkohtade (1,24, 3,45 jne) või protsentides (12%, 55% jne). Valik näidata andmeid üheski mainitud formaate saab määrata lihtsalt muutes mõned lipu väärtuste javascript (moorating.js)
Põhimõtteliselt on kaks e 2 lipud mängida, väljapanek väärtused vormi oma valik ...

var inpercent = false; / / Määra selle lipu tõsi, kui teil on vaja protsent väärtused kuvada
var isFractional = false / / Määra tõeseks, kui soovite osaline väärtusi, nagu 1,24, 1,25, 4,56, mitte 1,2 ... 5

Ja ma ei usu, et on mingit selgitust selleks vaja. Lisaks. Script on väga lihtne. Kui tead veidi javascripting, siis võiks muuta skripti saada mingit väärtust näidata. Sest näiteks kui sa tahad kolm kohta pärast koma näidatakse ... lihtsalt näpistama skript alla ...

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

Ajakohastamine Rating Maksumus:
Ma pole vaevunud kirjutama kõik AJAX skriptid ajakohastamine Ratings väärtus, sest ma tean, minu kogemus, et mitte alati seda teha kavatsevad uuendada RATING niipea kui kasutaja määrad midagi. Oled vaba tegema mida iganes sa tahad hinnatava väärtuse kohta, ajakohastada seda kasutades AJAX või esitab selle või Määra varjatud kujul välja väärtus, mis tuleb esitada koos kogu vormi jne

funktsioon updateRating (id, hinnang) {
/ / Alert (id + "," + hinnang);
/ / Kas kõik KOOS RATING
}

On funktsiooni javascript nimega "updateRating". See funktsioon on läbinud ID Rating Div, et tuvastada, milliseid reitinguid (kui neid on rohkem kui 1 reitingud lehel), ajakohastati ja väärtuse hinnang [updateRating (id, hinnang)]. Sa võid valida, et mida iganes sa tahad neid väärtusi, nagu ma mainisin.

Hinnang Pilt: tähti, südameid, baari või midagi palun
Muutuvad hinnang iga eespool nimetatud liiki (tähed, südamed jne) on väga lihtne. Just luua pilt sarnane tingimusel ja tilk see sisse Pea meeles, kui muudad nime mainet, ei tee vajalikke muudatusi CSS faili, vt allpool.

. Moostar {margin: 0px; padding: 0px; overflow: hidden; laius: 84px; kõrgus: 20px; float: left; background: url ("stars.gif) repeat-x;}
. Moostar span {float: left; margin: 0px; padding: 0px; kuva: block; laius: 84px; kõrgus: 20px; text-decoration: none; teksti taane:-9000px; z-index: 20;}
. Moostar. Val {background: url ("stars.gif") jättis 25px;}

Enamik reitingud vidinaid kasutada täht ja 1/2-star pilte hiirega üle sündmuste iga täht. Moo Ratings kasutab lihtsate sprite pilt taustapilt, et saavutataks nõutud visuaalsed efektid väga väikese ressursikuluga.

Nõuded: Mootools 1,2
Lae Mootols Tärnireiting Script (laetud 718 korda)

Olin otsinud topelt Kinnitatud liugur (liugurit 2 nupud, minimaalne ja maksimaalne), kasutades Mootools. Kuigi, ma ei leia mõned hästi tehtud topelt Kinnitatud liugur Mootools foorum Ainuke probleem oli see, et kõik need liugurid varal on valitud vahemiku marker. Lõpuks! Ma otsustasin luua oma. Hästi! Ma tegin kasutada algset koodi ja seda muuta on liugur tausta märgitud vahemikus valitud visuaalselt, kui minu näites. BLUE valdkondades näitab valikut väärtus valinud.

Vaata Version 2,2 Demo | Lae Mootools Double Kinnitatud Slider Version 2,2 (Alla 11691 korda)

Te saate väga lihtsalt muuta ilme ja valik indikaator (sinine ülaltoodud näites), liugur nupp, liugur track muutes slider.css vastavalt vajadusele.

Kas tilk mulle comment kui leiate, et see on vajalik.

Kui te olete üks neist poisid (nagu mina), kes sageli vaadata CSS hästi tehtud HTML leht, et saada inspiratsiooni või mis iganes, siis võib-olla märganud, et oleme kasutanud FAUX Positioning (nagu juba mainitud minu eelmises artiklis Oleme kasutades Faux absoluutne positsioneerimine: Brilliant CCS Layout )

Me ei head tööd selle malli, nii et arvasin, et see oleks tore jagada .... Lae see WordPress Theme (laetud 196 korda)