Ki ga izraža

Z različnimi vrtiljaki tam, veliko za Mootools tudi, jaz še vedno se odločil napisati svoj razred vrtiljak, nekaj dobrih razlogov
1. Želeli ostranjevalne funkcijo (da bi lahko skočil določen diapozitiv / korak v vrtiljaku).
2. Želel svobodo s postavitvijo na levi in desni gumb / povezavami, kjer sem kdaj prosim.
3. Večji nadzor nad Slide korakih.

Nisem uspel ustvariti nov vrtiljak, z zgoraj navedenimi značilnostmi, kot spodaj ... ... Prosto za nasvet za spremembe, ki bi jih potrebujejo!

Moja Primer izgleda takole ... [ View Demo ]

Poglej Demo plinov v Download Mootools Carousel z ostranjevanjem Version 1.0 (Downloaded 1999 krat)

1. Vrtiljak Paging

Z lahkoto lahko dodate ostranjevanje na vaš vrtiljaku, enostavno z nastavitvijo ostranjevalne zastavo, ki je zadnja parater opravil pri ustvarjanju primerek MooCarousel v res želimo (paging) ali napačne (donot želijo paging).

var carousel1 = new MooCarousel ("carousel1_wrapper ',' carousel1_items_container", "carousel1_moveleft", "carousel1_moveright", c_ns, c_sss, true); / / ns = število diapozitivov, sss = slide korak Velikost

Seveda pa lahko spreminjate videz-n-občutek teh osebnega klica achors, kot ste si ga spremenila njihovo CSS.

. Carousel_paging {text-align: right; margin: 5px 10px 0 0;}
. Carousel_paging tok, carousel_paging stran {oris: none; širina:... 15px; višina: 15px; line-višina: 15px; text-align: center; zaslon: block; float: left; background: # D8D8EB; margin: 0 1px 0 0; text-decoration: none;}

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

No! je majhen problem, čeprav, ostranjevalne sidra Če nastavljeno, bo potem dobil vedno ustvari po Carousel komponente. Hotela sem, da bi bilo dinamično, kot tudi, potem pa samo, da scenarij za pihanje iz deležev, sem se odločil, da ga preskočite.
Ampak veste, malo Javascript, bi lahko zlahka spremeniti kodo ostranjevalne generacije v MooCarousel razredu prosim vaše potrebe.

2. Prilagajanje na levo in desno ikona

Spremenite lahko postavitev, slike ali katero koli displat lastnino o levi in ​​desni gumb preprosto igranje okrog s CSS. da bi lahko spremenili umestitve na levi in ​​desno buttoms je dejanski razlog za mene, da mi pravi naš Carousel razreda.
Ker je to MooCarousel razred, sprejme id je od teh gumbov, lahko dejansko dati te gumbe, kjerkoli na strani, prosim ... da ni treba biti v elementu hierarhije, kot v mojem primeru.

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; lega: relativna, širina: 23px; višina: 20px; float: left; kazalec: kazalec;}

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

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

3. Prilagajanje Slide koraki

Kaj imam v mislih MOJE Prilagajanje KORAKE SLIDE?
Večina vrtiljakov potisnite poln vidnega okna. Torej, da ste imeli štiri predmete (kot v mojem vzorcu zgoraj), bo potisnite vse štiri elemente. S tem Carousel komponente, boste mimo številnih diapozitivov in korak velikost po vaši izbiri.

var carousel1 = new MooCarousel ("carousel1_wrapper ',' carousel1_items_container", "carousel1_moveleft", "carousel1_moveright", c_ns, c_sss, true);
c_ns = število diapozitivov, c_sss = slide korak Velikost

Tudi v mojem example1 sem calcuted velikost zaporedja korakov, ki temelji na logiki, kjer je, vem, da število elementov, širino za vsako postavko in robove, ki so podane po posameznih postavkah v mojem CSS.

/ * Za Bančenje 1 * /

var c1_w = 92; / / Bančenje točka Širina

var c1_n = 10 / / Skupno število postavk komparaciji Bančenje

var c1_pp = 4 / / Število primerjavo so perpage Bančenje Items

var c1_marginFactor = 51;

var c1_sss = c1_w * c1_pp; / / sss = slide korak Velikost

c1_ns var = parseInt (((c1_w * c1_n) / c1_sss) + 0,5); / / ns = število diapozitivov

c1_sss + = c1_marginFactor; / / sss = slide korak velikost, 51 za marže

Zahteve: Mootools 1.2

Poglej Demo plinov v Download Mootools Carousel z ostranjevanjem Version 1.0 (Downloaded 1999 krat)

MooRating je preprost (navzkrižno brskalnik, seveda, kot ga uporablja moč knjižnice MooTools), lahki in odlično Mootools temelji rating rešitev. To ni označilo kot "zvezdic", preprosto zato, ker bi lahko ocena slika je kot ste jih izbrali (sem iz Stars, barov in srca s prenosom, vendar lahko ustvarite svojo paleto in šele spusti v).

Kako to izgleda nekako takole:

	Ocena Mootools z različnimi podobami Poglej Demo
	Ocena Mootools z odstotkom vrednosti Poglej Demo
	Ocena Mootools z delno vrednosti Poglej Demo

Prenos Mootols Zvezdic Script (Downloaded 721 krat)

Ocena podatki: celo število, Decimal ali odstotek
Trenutno je scenarij zasnovan tako, da prikazujejo bonitetne podatke kot celoto vrednot (1,2,3,4,5), v decimalk (1,24, 3,45, itd) ali v odstotkih (12%, 55% itd.) Izbira za prikaz podatkov v katero od omenjenih oblik se lahko preprosto nastavite tako, da spremenite nekaj zastavo vrednot v JavaScript (moorating.js)
V osnovi obstajata dve e dve zastavi, da igrajo z, za prikaz vrednosti v obliki po vaši izbiri ...

var inpercent = false; / / nastavite zastavo na true, če potrebujete odstotne vrednosti, ki se prikaže
var isFractional = false / / Nastavite na true, če želite deljenim vrednote, kot 1,24 in 1,25 in 4,56 in ne 1,2 ... 5

In dont mislim, da obstaja razlaga za to potrebna. Še več. Scenarij je zelo preprosta. Če veste, malo javascripting, lahko spremenite skript, da bi dobili kakršno koli prikazano vrednost. Na primer, če si hotel tri decimalna mesta naj bodo prikazane ... samo poteg scenarij, kot je spodaj ...

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

Posodabljanje Ocena vrednosti:
Jaz pristanišče moti pisanje vse AJAX skripte za posodabljanje ocen vrednosti, ker vem iz mojih izkušenj, da ni vedno vse namerava posodobiti bonitetno oceno takoj, ko je nekaj uporabnika stopnje. Vam je storiti karkoli hočeš z nazivno vrednostjo, Update, da z uporabo AJAX in ga predloži ali Set skrito vrednost polje obrazca, ki se predloži s celotno obliko itd

Funkcija updateRating (id, ocena) {
/ / Alert (id + "," + ocena);
/ / Za vsako ceno z ocenjevanjem
}

Obstaja funkcija v javascript, imenovano "updateRating". Ta funkcija je opravil ID za Ocena div, ugotoviti, kateri ocene (če obstaja več kot ena ocene na strani) je bil posodobljen in vrednost rating [updateRating (id, ocena)]. Lahko se odločite za karkoli hočeš s temi vrednostmi, kot sem že prej omenil.

Ocena slike: zvezde, srce, palice ali kaj, prosim
Spreminjanje ocene za katero koli od zgoraj navedenih vrst (zvezde, srca itd) je zelo preprosta. Samo ustvariti sliko, ki je podoben tistemu in ga spusti noter Ne pozabite, če ste spremenili ime slike, ne da potrebne spremembe v datoteki CSS, glej spodaj.

. Moostar {margin: 0px; padding: 0px; overflow: hidden; širina: 84px; višina: 20px; float: left; background: url ("stars.gif) ponavljajočih x;}
. Moostar span {float: left; margin: 0px; padding: 0px; zaslon: blok, širina: 84px; višina: 20px; text-decoration: none; text-alinea:-9000px; z-indeks: 20;}
. Moostar curr {background: url ("stars.gif) levo 25px;}.

Večina pripomočki ocene uporabite zvezdico in pol zvezdicami slike z miško nad dogodki na vsako zvezdo. Moo Ratings uporablja preprost Sprite slike kot ozadje za dosego zahtevane vizualne učinke z zelo nizko režijske stroške.

Zahteve: Mootools 1.2
Prenos Mootols Zvezdic Script (Downloaded 721 krat)

Sem iskal za brezplačno zabodena drsnika (drsnik z dvema gumbi, najkrajši in najdaljši) z uporabo mootools. Čeprav, sem našel nekaj dobro opravljeno dvojno zabodena drsnik na forumu mootools, samo problem je bil, da so vsi ti drsniki Trud je izbrano marker. Končno! Odločil sem se, da ustvarite svoj lasten. No! Jaz sem uporabo izvirno kodo in jo spremeniti, da imajo drsnik ozadje, ki je navedeno območje izbran vizualno, tako kot v mojem primeru spodaj. V BLUE področja kaže obseg vrednosti izbrane.

Poglej Različica 2.2 Demo | Download Mootools Double Lepljivek drsnik različice 2.2 (Downloaded 11880 krat)

Enostavno lahko spremenite videz in občutek območju kazalca (v modri v zgornjem primeru), drsnik gumb se drsnik progo s spreminjanjem slider.css kot je potrebno.

Ne spusti me komentar če se vam zdi, da je koristno.

Če ste eden tistih (kot jaz), ki pogosto preverite CSS za dobro narejena stran HTML, da bi dobili navdih ali karkoli, potem ste morda opazili, da smo uporabili faux položaja (kot že omenjeno v moji prejšnji članku smo z faux Absolutno pozicioniranje: Brilliant CCS Postavitev )

Nismo nekaj dobro delo na te predloge, zato mislil, da bi lepo, da ga delite .... Prenesi to temo WordPress (preneseno 197 krat)