Izsakot IT

Ar dažādiem karuseļiem tur, daudzi par Mootools kā arī, es tomēr nolēma rakstīt savu Carousel Class, dažu labu iemeslu dēļ
1. Vēlējās peidžeru funkcija (lai varētu pārlēkt uz konkrētu slaidu / soli karuselis).
2. Vēlējās brīvība ar izvietošanu kreiso un labo pogu / saites, kur kādreiz es lūdzu.
3. Vairāk kontroles pār slaidu soļi.

Es tomēr izdodas izveidot jaunu Karuseļveida, ar augstāk minētajām iezīmēm ... kā tālāk ... Jūties brīvs izvēloties jebkuru modifikācijas jūs būtu nepieciešama!

Mans piemērs izskatās šādi ... [ View Demo ]

Skatīt Demo Pārsūtīt | Download Mootools Carousel Ar Peidžeru Version 1.0 panta Downloaded 1989 reizes)

1. Karuselis Peidžeru

Jūs varat viegli pievienot peidžeru jūsu karuselī, vienkārši nosakot peidžeru karogu, kas ir pēdējais parater pieņēma vienlaikus radot instanci MooCarousel uz taisnība (gribu peidžeru) vai false (donot vēlas peidžeru).

var carousel1 = jauns MooCarousel ("carousel1_wrapper ',' carousel1_items_container ',' carousel1_moveleft ',' carousel1_moveright", c_ns, c_sss, patiess); / / ns = slaidu skaitu, sss = slaids posma lielumu

Un Protams jūs varat mainīt izskatu-n-jūtas no šiem peidžeru achors kā gribi, modificējot savu CSS.

. Carousel_paging {text-align: right; margin: 5PX 10px 0 0;}
. Carousel_paging strāva, carousel_paging lapa {kontūra: none; platums:... 15px; augstums: 15px; līnijas augstums: 15px; teksts-align: center; display: block; float: left; fons: # D8D8EB; margin: 0 1px 0 0; teksta noformējums: none;}

. Carousel_paging: hover, carousel_paging pašreizējais {background: # 4D4D9B, krāsa: # FFFFFF;}..

Labi! tur ir maza problēma, lai gan, peidžeru enkuri, ja komplekts, tad tā kļūs radīts vienmēr pēc karuseļveida sastāvdaļu. Es gribēju, lai būtu dinamiska kā arī, bet tad tikai, lai saglabātu skriptu nopūš proporciju, es nolēmu izlaist to.
Bet jūs zināt mazliet Javascript, jūs varētu viegli mainīt peidžeru paaudzes kodeksu, MooCarousel klasē lūdzu jūsu vajadzībām.

2. Pielāgošana kreiso un labo ikonas

Jūs varat mainīt izvietojumu, attēlu vai jebkuru displat īpašumu par kreiso un labo pogas vienkārši spēlējot aptuveni ar CSS. lai varētu mainīt izvietojumus no kreisās un labo buttoms bija faktiskais iemesls man labo manu mūsu karuseļveida klasē.
Jo tas MooCarousel klase, pieņem id ir no šīm pogām, jūs faktiski var novietot šīs pogas jebkurā lappuses vietā, ja jūs lūdzu ... tā nav jābūt elementam hierarhijā, kā manā piemērā.

var carousel1 = jauns MooCarousel ("carousel1_wrapper ',' carousel1_items_container ',' carousel1_moveleft ',' carousel1_moveright", c_ns, c_sss, patiess);

CSS
.. Carousel_container_l, carousel_container_r {margin: 50px 0 0 0; amats: radinieku; platums: 23px; augstums: 20px; float: left; kursora: pointer;}

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

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

3. Pielāgošana slaidu soļi

Ko man nozīmē MY pielāgošana SLIDE soļus?
Vairums Karuseļi slaidu pilns ar no redzamā loga. Tā teikt, jums bija četras vienības (piemēram, manā izlasē iepriekš), tā būs slide visus četrus priekšmetus. Ar šo karuseļveida komponenta, Jums iet uz slaidu skaitu un soļu izmēru jūsu izvēles.

var carousel1 = jauns MooCarousel ("carousel1_wrapper ',' carousel1_items_container ',' carousel1_moveleft ',' carousel1_moveright", c_ns, c_sss, patiess);
c_ns = slaidu skaitu, c_sss = slaids posma lielumu

Arī manā example1 esmu calcuted slaidu soļu lielumu, pamatojoties uz loģiku ja, es zinu vairākus priekšmetus, kas par katru posteni platumu un piemales, kas radījuši pēc katra vienuma manā CSS.

/ * Lai 1 karuselis * /

var c1_w = 92; / / karuselis postenis platums

var c1_n = 10; / / Kopējais skaits salīdzināšanas karuselis preces

var c1_pp = 4 / / skaits salīdzināšanai karuselis Items perpage

var c1_marginFactor = 51;

var c1_sss = c1_w * c1_pp; / / sss = slaids posma lielumu

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

c1_sss + = c1_marginFactor; / / sss = slaids solis izmērs, 51 par starpību

Prasības: Mootools 1.2

Skatīt Demo Pārsūtīt | Download Mootools Carousel Ar Peidžeru Version 1.0 panta Downloaded 1989 reizes)

MooRating ir vienkāršs (pāri pārlūku, protams, kā tā izmanto spēku MooTools bibliotēkas), viegls un teicams Mootools balstās reitinga risinājumu. Tas nav saukts par "Star Rating", vienkārši tāpēc, reitings attēls varētu būt kā izvēlēties (man ir sniegušas Pārbaudīt, bāri un sirdis ar download, bet jūs varat izveidot savu daudzveidību un tikai piliens to).

Kā tas izskatās:

	Mootools Reitings ar dažādiem attēliem Apskatīt Demo
	Mootools Reitings ar procentu vērtībām Apskatīt Demo
	Mootools Reitings ar daļskaitļiem Apskatīt Demo

Lejuplādēt Mootols Viesnīcas kategorijā Script (Downloaded 718 times)

Vērtējums dati: Vesels skaitlis, decimāldaļu vai procentuālā
Šobrīd skripts ir paredzēts, lai parādītu vērtējums datus kā visu vērtību (1,2,3,4,5), jo decimāldaļām (1,24, 3,45 utt) vai procentuālā daļa (12%, 55% utt.) Izvēle, lai parādītu datus jebkurā no minētajiem formātiem var noteikt, vienkārši nomainot dažas karoga vērtības robežās JavaScript (moorating.js)
Pamatā ir divi e divi karogi spēlēt ar, parādot vērtības formātu jūsu izvēles ...

var inpercent = false; / / Set šo karogu uz true, ja jums nepieciešama procentu vērtības, kas parādītas
var isFractional = false / / Set to taisnība, ja jūs vēlaties, daļējām vērtībām, piemēram, 1,24 un 1,25, 4.56, nevis 1,2 ... 5

Un es dont domāju, ka ir kāds izskaidrojums nepieciešama to. Turklāt. Skripts ir ļoti vienkārši. Ja jūs zināt mazliet javascripting, jūs varētu modificēt skriptu, lai saņemtu jebkāda veida redzamo vērtību. Par piemēram, ja jūs vēlaties, trīs zīmēm aiz komata, kas redzams ... vienkārši iekniebt skriptu, kā zemāk ...

ja (isFractional) {if (x <= 5 | | x> = 0) moostartval [i] innerHTML = FormatNumber (x, 3);.} / / 2 tiek mainīta uz 3
else {moostartval [i] innerHTML = Math.round (x).;

Atjaunināšanu vērtējuma vērtību:
Es havent bothered rakstot jebkuru AJAX skriptus, lai atjauninātu vērtēšanas vērtību, jo es zinu no savas pieredzes, ka ne vienmēr tā plāno atjaunināt reitingu tiklīdz lietotājs likmju kaut ko. Jūs esat brīvi darīt neatkarīgi vēlaties ar nominālo vērtību, Update to, izmantojot AJAX vai Iesniedziet to, vai Nosaka slēptās formas lauka vērtību, kas jāiesniedz kopā ar visu formu uc

funkcija updateRating (id, vērtējums) {
/ / Alert (id + "," + vērtējums);
/ / Vai kāds ar kredītreitingu
}

Ir funkcija javascript sauc "updateRating". Šī funkcija ir nokārtojis to ID Reitings Div, lai identificētu to, kuras reitingiem (ja ir vairāk nekā viens vērtējumu par lapu), tika atjaunināts un vērtība reitingā [updateRating (id, vērtējums)]. Jūs varētu izvēlēties neatkarīgi vēlaties ar šīm vērtībām, kā jau minēju iepriekš.

Vērtējums attēls: Zvaigznes, sirdis, bāri vai kaut ko, lūdzu,
Mainot reitingu uz jebkuru no iepriekš minētajiem veidiem (zvaigznes, sirdis utt) ir ļoti vienkārša. Tikko izveidoju attēlu līdzīgu sniegto vienu un nometiet to iekšā Atcerieties, ja jūs maināt nosaukumu no attēla, do veikt nepieciešamās izmaiņas CSS failu, skatiet zemāk.

. Moostar {margin: 0px; padding: 0px; pārplūde: hidden; platums: 84px; augstums: 20px; float: left; fons: url ('stars.gif ") atkārtotu x;}
. Moostar span {float: left; margin: 0px; padding: 0px; display: block; platums: 84px; augstums: 20px; teksta noformējums: none; teksta ievilkumu:-9000px; z-index: 20;}
. Moostar Valūta {background: url ('stars.gif ") atstāja 25px;}.

Lielākā daļa vērtējumi logrīki izmantot zvaigzne un 1/2 zvaigžņu attēlus ar peli pār notikumiem katru zvaigzni. Moo Reitingi izmanto vienkāršu Sprite attēlu kā fona attēlu, lai sasniegtu prasītos vizuālos efektus ar ļoti zemu virs galvas.

Prasības: Mootools 1.2
Lejuplādēt Mootols Viesnīcas kategorijā Script (Downloaded 718 times)

Man bija meklējis divkāršu piesprausto slīdni panta slīdnis ar divām pogām, minimālās un maksimālās), izmantojot mootools. Lai gan, es tomēr atrast pāris labi darīts dubultā pinned slīdni uz mootools forumā, vienīgā problēma bija tā, ka visi šie slīdošie iedobt ir atlasītā diapazona marķieri. Beidzot! Es nolēmu izveidot savu. Labi! I did izmantot oriģinālo kodu un mainīt to, lai būtu slīdni fons, nekā norādīts diapazons izvēlēts vizuāli, kā manā piemērā zemāk. Zilā platības norāda vērtības diapazonu izvēli.

Skatīt versiju 2,2 Demo | Download Mootools Double Pinned Slider versiju 2.2 (aplūk. 11665 reizes)

Jūs varat ļoti viegli mainīt izskatu un justies no diapazona rādītājs (zilā krāsā iepriekšējā piemērā), Slider piku, slīdni celiņu, modificējot slider.css pēc vajadzības.

Vai piliens man komentēt, ja jūs atradīsiet par lietderīgu.