Jesprimi IT

Ma 'varjetà ta karużelli hemmhekk, ħafna għal MooTools kif ukoll, I għadhom iddeċieda li jikteb Klassi tiegħi Carousel stess, għal xi raġunijiet tajba
1. Wanted karatteristika pejġing (li tkun tista 'tiżdied slide partikolari / pass fid-karużell).
2. Riedu libertà mal-tqegħid tal-buttuni XELLUG lemin u / rabtiet, fejn qatt jien jekk jogħġbok.
3. Aktar kontroll fuq il-Passi Slide.

I ma rnexxilhomx joħolqu Carousel ġdid, bil-karatteristiċi ta 'hawn fuq ... kif hawn taħt ... Ħossok liberu li jissuġġerixxu xi modifikazzjonijiet inti tkun teħtieġ!

Eżempju tiegħi tidher bħal dan ... [ Demo View ]

Ara Demo | Download MooTools Carousel Bil Verżjoni Paging 1.0 (ddawnlowdjati 2001 darbiet)

1. Paging Carousel

Tista 'faċilment żid il-pejġing li carousel tiegħek, sempliċiment billi l-bandiera ta' pejġing, li huwa parater aħħar għadda filwaqt li joħolqu l-istanza ta 'l-MooCarousel biex veru (tixtieq paging) jew falza (donot jixtiequ pejġing).

var carousel1 = ġdid MooCarousel ("carousel1_wrapper", "carousel1_items_container", "carousel1_moveleft", "carousel1_moveright", c_ns, c_sss, vera); / / ns = numru ta 'slides, sss = daqs pass slide

U Naturalment tista 'tbiddel il-ħarsa n-sensazzjoni ta' dawn achors pejġing kif jekk jogħġbok billi timmodifika CSS tagħhom.

. Carousel_paging {test tallinja: id-dritt; marġni: 5px 10px 0 0;}
. Carousel_paging attwali, carousel_paging paġna {kontorn: xejn; wisa ':... 15px; għoli: 15px; linja tal-għoli: 15px; test tallinja: taċ-ċentru; display: block; float: xellug; isfond: # D8D8EB; marġni: 0 1px 0 0; test tiżjin: xejn;}

. Carousel_paging: imbagħad jerġgħu, carousel_paging kurrenti {isfond: # 4D4D9B; kulur: # ffffff;}..

Ukoll! hemm kwistjoni żgħir għalkemm, Il-ankri paging jekk stabbiliti, allura se tikseb iġġenerat dejjem wara l-komponent Carousel. Jien ridt li jagħmlu dan bħala dinamiku ukoll, imma mbagħad biss biex iżommu l-Script għall blowing ta 'proporzjonijiet, I iddeċieda li jaqbżuha.
Imma inti taf Javascript ftit, inti tista 'faċilment timmodifika l-kodiċi ġenerazzjoni pejġing fil-klassi MooCarousel li jekk jogħġbok bżonnijiet tiegħek.

2. Customising l Ikoni Xellug & Dritt

Tista 'tbiddel il TQEGĦID, IMAGES jew kwalunkwe proprjetà displat mill-Buttuni Jitħalla u Dritt sempliċiment billi playing madwar mal-CSS. biex ikunu jistgħu jibdlu l-pjazzamenti ta 'l-buttoms Jitħalla u Dritt kienet ir-raġuni attwali għalija li d-dritt tiegħi Klassi Carousel tagħna.
Peress li dan Klassi MooCarousel, taċċetta l-id huwa ta 'dawn il-buttuni, inti tista' attwalment post dawn il-buttuni kullimkien fuq il-paġna, jekk jogħġbok ... ma għandhom ikunu fil-ġerarkija element, bħal f'eżempju tiegħi.

var carousel1 = ġdid MooCarousel ("carousel1_wrapper", "carousel1_items_container", "carousel1_moveleft", "carousel1_moveright", c_ns, c_sss, reali);

CSS
.. Carousel_container_l, carousel_container_r {marġini: 50px 0 0 0; pożizzjoni: relattiva; wisa ': 23px; għoli: 20px; float: xellug; cursor: pointer;}

. Carousel_container_r {isfond-pożizzjoni: 0-38px;}

. Carousel_container_l {isfond-pożizzjoni: 0-58px;}

3. Customising Passi Slide

What do I jfisser PASSI MY slide Customising?
Karużelli Ħafna slide il sħiħa mal tat-tieqa viżibbli. Allura ngħid li kellek erba 'punti (bħal fil-kampjun tiegħi hawn fuq), se slide il-punti kollha erba. Ma 'dan Komponent Carousel, Inti jgħaddu l-għadd ta' slajds u d-daqs pass ta 'l-għażla tiegħek.

var carousel1 = ġdid MooCarousel ("carousel1_wrapper", "carousel1_items_container", "carousel1_moveleft", "carousel1_moveright", c_ns, c_sss, reali);
c_ns = numru ta 'slajds, c_sss = daqs pass slide

Ukoll, example1 tiegħi jien calcuted-daqs pass slide, ibbażata fuq il-loġika fejn, naf numru ta 'oġġetti, wisa fuq kull oġġett u l-marġini li taw wara kull oġġett fil-CSS tiegħi.

/ * Għal carousal 1 * /

var c1_w = 92; Wisa / / carousal Punt

var c1_n = 10; Numru / / totali ta 'Partiti carousal paragun

var c1_pp = 4 / / Numru ta 'perpage paragun Oġġetti carousal

var c1_marginFactor = 51;

var = c1_sss c1_w * c1_pp; / / sss = daqs pass slide

c1_ns var = l parseInt (((c1_w * c1_n) / c1_sss) + 0.5); / / ns = numru ta 'slajds

c1_sss + = c1_marginFactor; / / sss = slide pass daqs, 51 għall-marġini

Ħtiġiet: MooTools 1.2

Ara Demo | Download MooTools Carousel Bil Verżjoni Paging 1.0 (ddawnlowdjati 2001 darbiet)

MooTools MooRating huwa (browser transkonfinali, naturalment peress li juża l-poter tal-librerija MooTools) sempliċi, ħfief u eċċellenti bbażati soluzzjoni klassifikazzjoni. Mhuwiex msejjaħ bħala "Star Rating", sempliċement minħabba, l-immaġni tal-klassifikazzjoni tista 'tkun inti tagħżel (I pprovdew Stars, Biċċiet u qlub mal-download, iżda inti tista' toħloq varjetà tiegħek u biss qatra fl).

Kif ma jidher qisu:

	Rating MooTools bi stampi differenti Ara Demo
	Rating MooTools mal-valuri perċentwali Ara Demo
	Rating MooTools mal-valuri frazzjonali Ara Demo

Download Mootols Star Rating Script (ddawnlowdjati 722 darbiet)

Rating data: Numru Sħiħ, Deċimali jew Perċentwali
Bħalissa l-iskrittura hija mfassla biex juru d-data tal-klassifikazzjoni bħala valuri sħaħ (1,2,3,4,5), b'mod deċimali (1.24, 3.45 eċċ) jew f'persentaġġi (12%, eċċ 55%). L-għażla li juru data fi kwalunkwe mill-formati msemmija jkunu jistgħu jiġu stabbiliti sempliċiment billi jibdel xi valuri tal-bandiera fi ħdan l-JavaScript (moorating.js)
Bażikament hemm żewġ e żewġ bnadar jilagħbu ma ', għall-wiri valuri fil-format tal-għażla tiegħek ...

var inpercent = foloz; / / Issettja din tal-bandiera biex veru, jekk inti teħtieġ valuri perċentwali li għandha tintwera
var isFractional = foloz / / Irranġa dan veru, jekk inti tixtieq valuri frazzjonali bħal 1.24, 1.25, 4.56 aktar minn 1,2 ... 5

U I dont think hemm xi spjegazzjoni meħtieġa għal dan. Barra minn hekk. L-iskrittura hija sempliċi ħafna. Jekk taf javascripting ftit, inti tista 'timmodifika l-iskrittura biex jiksbu kwalunkwe tip ta' valur murija. Għall e.ż. jekk inti riedu tliet postijiet deċimali li jintwerew ... biss tweak l-iskrittura kif hawn taħt ...

jekk (isFractional) {jekk (x <= 5 | | x> = 0) moostartval [i] innerHTML = formatNumber (x, 3);.} / / 2 huwa mibdul għal 3
inkella {moostartval [i] innerHTML = Math.round (x).;

Aġġornament Valur Rating:
I havent bothered bil-miktub xi skripts Ajax għall-aġġornament tal-valur Ratings, għaliex naf mill-esperjenza tiegħi li MHUX DEJJEM tagħmel dan il-ħsieb li taġġorna l-RATA hekk kif il-ħaġa rati utent. Inti ħieles li jagħmlu dak kollu li tixtieq mal-valur rated, Aġġornament billi tuża Ajax jew Issottometti dan jew Irranġa valur moħbija qasam forma, li għandhom jiġu sottomessi mal-formola sħiħa eċċ

funzjoni updateRating (id-klassifikazzjoni) {
/ / Twissija (id + "," + klassifikazzjoni);
/ / Jagħmlu dak kollu bil-klassifikazzjoni
}

Hemm funzjoni fil-javascript imsejħa "updateRating". Din il-funzjoni ġiet mgħoddija l-ID l-tal-Div Rating, biex tidentifika dwar liema klassifikazzjonijiet (jekk ikun hemm aktar li wieħed klassifikazzjonijiet fuq il-paġna) ġie aġġornat u l-valur tal-klassifikazzjoni [updateRating (id-klassifikazzjoni)]. Inti tista 'tagħżel li tkun xi tkun tixtieq ma' dawn il-valuri, kif i imsemmi qabel.

Image Rating: Stars, qlub, Bars jew xi ħaġa jekk jogħġbok
Nibdlu l-klassifikazzjoni għal kwalunkwe mit-tipi ta 'hawn fuq (stilla, qlub eċċ) hija sempliċi ħafna. Just toħloq immaġni simili għal dak provdut u qatra pulzieri Ftakar, jekk inti jinbidel l-isem ta 'l-immaġini, ma jagħmlu bidliet meħtieġa fil-CSS fajl, ara taħt.

. Moostar {marġini: 0px; ikkuttunar: 0px; overflow: moħbija; wisa ': 84px; għoli: 20px; float: xellug; isfond: url ("stars.gif") ripetuta x;}
. Moostar medda {float: xellug; marġini: 0px; ikkuttunar: 0px; display: block; wisa ': 84px; għoli: 20px; test tiżjin: xejn; test inċiż:-9000px; z-indiċi: 20;}
.. Moostar Curr {isfond: url ("stars.gif") ħallew 25px;}

Widgets Ħafna klassifikazzjonijiet użu star u nofs star immaġini bil maws fuq avvenimenti fuq kull stilla. Klassifikazzjonijiet Moo juża immaġni Sprite sempliċi bħala isfond image biex jinkisbu l-effetti viżwali meħtieġa bil overhead baxx ħafna.

Ħtiġiet: MooTools 1.2
Download Mootols Star Rating Script (ddawnlowdjati 722 darbiet)

I kien infittxu slider doppja ippinjat (slider b'żewġ pumi, minimi u massimi) bl-użu MooTools. Għalkemm, I ma ssib ftit isir ukoll slider doppja ippinjat fil-forum MooTools, L-unika problema kienet li dawn kollha kwalitá sliders jkollhom l-markatur tad-distanza magħżul. Fl-aħħarnett! I deċiż biex toħloq tiegħi stess. Ukoll! I ma jużaw il-kodiċi oriġinali u timmodifikaha li jkollha sfond slider li indikat l-firxa magħżula fuq livell viżiv, bħala fl-eżempju tiegħi hawn taħt. L-oqsma BLUE jindika l-medda ta 'valuri magħżula.

Ara 2.2 Verżjoni Demo | MooTools Download Double ippinjat Verżjoni slider 2.2 (ddawnlowdjati 11920 darbiet)

Tista 'faċilment jibdlu l-dehra u sensazzjoni ta' l-indikatur firxa (bil-blu fl-eżempju hawn fuq), il-pum slider, il-binarju slider billi timmodifika l-slider.css kif meħtieġ.

Do qatra me kumment jekk issibha utli.

Jekk int wieħed minn dawk guys (bħali), li ħafna drabi tivverifika l-CSS tal-paġna HTML ukoll magħmula, biex tikseb ispirati jew kwalunkwe, allura inti jista 'jkollok ndunat li aħna użati Pożizzjonament Faux (kif diġà msemmi fl-artikolu preċedenti tiegħi Aħna użu Pożizzjonament assoluta Faux: A Layout CCS Brilliant )

Aħna ma xi xogħol tajba fuq din it-template, hekk ħsibt li sbieħ li tinqasam .... Download Dan Tema Wordpress (jitniżżel 197 darbiet)