Ilmaista sitä

Monien Karusellit siellä, monet Mootools myös, olen silti päättänyt kirjoittaa oman Carousel luokka, on hyviä syitä
1. Halutaan henkilöhaku ominaisuus (voisi siirtyä erityisesti dia / askel karuselli).
2. Ostetaan vapaus sijainnin vasen ja oikea painike / linkkejä, missä ikinä olen hyvä.
3. Lisää valvoa Slide Steps.

En onnistunut luomaan uuden Carousel, jossa edellä mainitut ominaisuudet ... alla ... Voit vapaasti ehdottaa muutoksia te vaatisi!

Oma esimerkki näyttää tältä ... [ View Demo ]

Katso esittely | Lataa Mootools Carousel With Paging 1.0 (Downloaded 1998 kertaa)

1. Carousel Hakulaite

Voit helposti lisätä henkilöhaku teidän karuselli yksinkertaisesti asettamalla henkilöhaku lippu, joka on viimeinen parater läpäissyt luotaessa esiintymän MooCarousel todelliseen (haluta paging) tai epätosi (antaja haluaa paging).

var carousel1 = new MooCarousel (carousel1_wrapper ',' carousel1_items_container ',' carousel1_moveleft ',' carousel1_moveright ", c_ns, c_sss, true); / / ns = useita dioja, SSS = slide askelkoko

Ja tietysti voit muuttaa ulkoasua-n-tuntuu näiden henkilöhaku achors kuten haluat muokkaamalla sen CSS.

. Carousel_paging {text-align: right; margin: 5px 10px 0 0;}
. Carousel_paging. Nykyinen. Carousel_paging. Sivu {outline: none; width: 15px; height: 15px; line-height: 15px; text-align: center; display: block; float: left; background: # D8D8EB; margin: 0 1px 0 0; text-decoration: none;}

. Carousel_paging: hover. Carousel_paging. Nykyinen {background: # 4D4D9B; color: # ffffff;}

No! on pieni asia kuitenkin, henkilöhaku ankkurit jos asetettu, niin se saa syntyy aina kun Carousel komponentti. Halusin tehdä dynaamisia samoin, mutta sitten vain pitää Script puhaltaa ulos mittasuhteet, päätin ohittaa sen.
Mutta te tiedätte vähän Javascript, voit helposti muokata henkilöhaku sukupolvi koodin MooCarousel luokassa miellyttää teidän tarpeisiin.

2. Kustomointi vasen ja oikea kuvakkeet

Voit muuttaa sijoitusta, IMAGES tai displat omaisuutta vasenta ja oikeaa näppäintä yksinkertaisesti pelaa noin kanssa CSS. pystyä muuttamaan sijoitukset vasen ja oikea buttoms oli todellinen syy minun oikealle minun meidän Carousel luokka.
Koska MooCarousel luokan hyväksyy id on näitä painikkeita, voit itse sijoittaa nämä painikkeet mihin tahansa sivulla, jos sallitte ... ei tarvitse olla elementin hierarkiassa, kuten minun esimerkiksi.

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; kanta: suhteellinen, leveys: 23px; height: 20px; float: left; kohdistimen: osoitinta;}

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

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

3. Kustomointi Slide Steps

Mitä tarkoitan MINUN Kustomointi SLIDE vaiheet?
Useimmat Karusellit liu'uta täynnä on näkyvissä ikkunasta. Joten sano oli neljä kohteita (kuten minun esimerkin kohta), se liukuu kaikki neljä aihetta. Tämän Carousel Component, Ohitat määrä dioja ja askel haluamansa kokoiseksi.

var carousel1 = new MooCarousel (carousel1_wrapper ',' carousel1_items_container ',' carousel1_moveleft ',' carousel1_moveright ", c_ns, c_sss, true);
c_ns = useita dioja, c_sss = slide askelkoko

Myös minun Esimerkki1 olen calcuted dia askeleen koko sen logiikka missä, tiedän kappalemäärä, leveys kunkin kohteen ja marginaalit, jotka ovat antaneet jälkeen kunkin kohteen CSS.

/ * Jos juomingit 1 * /

var c1_w = 92; / / juomingit Item leveys

var c1_n = 10; / / kokonaislukumäärä Vertailuvuoden juomingit Tuotteet

var c1_pp = 4 / / määrä Vertailuvuoden juomingit Tuotteet perpage

var c1_marginFactor = 51;

var c1_sss = c1_w * c1_pp; / / SSS = slide askelkoko

var c1_ns = parseInt (((c1_w * c1_n) / c1_sss) + 0.5) / / ns = useita dioja

c1_sss + = c1_marginFactor; / / SSS = slide askeleen koko, 51 ja marginaalit

Vaatimukset: Mootools 1,2

Katso esittely | Lataa Mootools Carousel With Paging 1.0 (Downloaded 1998 kertaa)

MooRating on yksinkertainen (risti selain, tietenkin sillä se käyttää valtaa MooTools kirjasto), kevyt ja erinomainen Mootools perustuu rating ratkaisu. Sitä ei kutsutaan nimellä "Star Rating", yksinkertaisesti siksi, rating kuva voisi olla niin päätät (Olen tarjonnut Stars, baarit ja Hertta latauksen kanssa, mutta voit luoda omia erilaisia ​​ja vain pudota se).

Miltä se näyttää:

	Mootools Arvostelu kanssa erilaisten kuvien Katso demo
	Mootools Arvostelu prosentteina määritelty Katso demo
	Mootools Arvostelu kanssa murtolukuarvoja Katso demo

Lataa Mootols Tähtiluokitus Script (Downloaded 720 kertaa)

Rating tiedot: kokonaisluku, desimaali tai prosenttiosuus
Tällä hetkellä skripti on suunniteltu näyttämään rating tietoja koko arvot (1,2,3,4,5), ja desimaalit (1,24, 3,45 jne.) tai prosentteina (12%, 55% jne). Valinta näyttää data missä tahansa mainituista muodot voidaan määrittää yksinkertaisesti muuttamalla noin lippu arvojen javascript (moorating.js)
Periaatteessa on olemassa kaksi e kaksi lippua pelata, näyttämiseen arvot haluamassasi muodossa ...

var inpercent = false; / / Määritä tämä merkintä on totta, jos tarvitset osuus arvoja näytetään
var isFractional = false / / Aseta arvoksi true, jos haluat Murtolukuarvot kuten 1,24, 1,25, 4,56 sijasta 1,2 ... 5

Ja I dont ajatella ole mitään selitystä tarvita tähän. Lisäksi. Käsikirjoitus on hyvin yksinkertainen. Jos tiedät vähän javascripting, voit muokata skriptin saada minkäänlaista arvoa näytössä. Esim. jos haluatte kolmen desimaalin tarkkuudella voidaan näyttää ... juuri nipistää käsikirjoituksesta alla ...

Jos (isFractional) {jos (x <= 5 | | x> = 0) moostartval [i]. innerHTML = formatNumber (x, 3);} / / 2 muutetaan 3
muu {moostartval [i]. innerHTML = Math.round (x);

Päivittäminen Rating Arvo:
En ole viitsinyt kirjoittaa mitään AJAX skriptit päivittää Ratings arvoa, koska tiedän kokemuksesta, että ei voi aina tehdä se aikoo päivittää RATING heti käyttäjä hinnat jotain. Voit vapaasti tehdä mitä haluat kanssa nimellisarvosta, Päivitä se AJAX tai esittää sen tai asettaa piilotetun lomakkeen kentän arvo on esitetty koko lomake jne.

toiminto updateRating (id, luokitus) {
/ / Alert (id + "," + luokitus);
/ / Tee mitä nopeuden kanssa
}

On funktio javascript nimeltään "updateRating". Tämä toiminto on läpäissyt tunnus Rating Div, tunnistaa, mitä arviota (jos on useampi, että yksi miehistön sivulla) on päivitetty, ja arvon rating [updateRating (id-luokitus)]. Voit valita mitä haluat näitä arvoja, kuten aiemmin mainitsin.

Arvostelu Kuva: tähtiä, sydämiä, baarit tai jotain ota
Muuttaminen luokitus Jonkin edellä tyyppiä (tähden, sydämet jne.), on erittäin yksinkertainen. Luo vain kuva samanlaisia ​​tarjotun ja pudottaa sen sisään Muista, jos muutat kuvan nimi, älä tee tarvittavat muutokset CSS-tiedoston, katso alla.

. Moostar {margin: 0px; padding: 0px; overflow: hidden; width: 84px; height: 20px; float: left; background: url ('stars.gif'), repeat-x;}
. Moostar span {float: left; margin: 0px; padding: 0px; display: block; width: 84px; height: 20px; text-decoration: none; text-indent:-9000px; z-index: 20;}
. Moostar. As {background: url ('stars.gif') jätti 25px;}

Useimmat arviot widgetit käyttävät tähti ja puolen tähden kuvat hiiri tapahtumia kunkin tähden. Moo Ratings käyttää yksinkertaista sprite kuvan taustakuva saadaan tarvittava visuaalisia tehosteita hyvin alhaiset yleiskustannukset.

Vaatimukset: Mootools 1,2
Lataa Mootols Tähtiluokitus Script (Downloaded 720 kertaa)

Olin etsinyt kaksinkertainen puristuksiin liukusäädintä (liukusäädin kaksi nupit, minimi ja maksimi) käyttäen MooTools. Tosin löysin muutamia hyvin tehty kaksinkertainen puristuksiin liukusäädintä mootools foorumilla Ainoa ongelma oli, että kaikki nämä liukusäädintä dint on valitun alueen merkki. Vihdoinkin! Päätin luoda oman. No! Tein käyttää alkuperäistä koodia ja muokata sitä on liukusäätimen taustan ilmoitettua alueen valittu visuaalisesti, kuten minun alla olevassa esimerkissä. BLUE alueet osoittaa alueen arvon valittu.

View Version 2.2 Demo | Lataa Mootools Double Pinned Slider Version 2.2 (Downloaded 11865 kertaa)

Voit helposti muuttaa ulkoasua alueen indikaattorin (sinisellä edellä olevassa esimerkissä), dia nuppi, liukusäädintä radan muokkaamalla slider.css tarpeen.

Älä pudota minulle kommentti, jos löydät sen tarpeelliseksi.

Jos olet yksi niistä kaverit (kuten minä), jotka usein tarkistaa CSS hyvin tehty HTML-sivun, inspiroivia tai mitä tahansa, niin olet ehkä huomannut, että olemme käyttäneet faux Paikannus (kuten jo totesin aiemmin artikkelissa olemme käyttäen Faux Absolute Positioning: Brilliant CCS Layout )

Me teimme hyvää työtä tähän malliin, niin ajattelin se mukava jakaa se .... lataamista WordPress Theme (ladatut 197 kertaa)