IT kifejezése

A különböző Körhinta odakinn, sokan Mootools is, még mindig úgy döntött, hogy írjak saját Körhinta osztály, néhány jó ok
1. Keresünk egy lapozó funkció (ahhoz, hogy ugrani egy adott dia / lépés a körhinta).
2. Keresett szabadságot elhelyezése a bal és jobb gombok / linkek, ha valaha kedvem.
3. Jobban kézben tarthatják a Slide lépések.

Én nem sikerült létrehozni egy új Körhinta, a fenti jellemzők az alábbiak szerint ... ... Nyugodtan javasol módosításokat akkor lenne szükség!

Saját példa így néz ki ... [ Bemutató megtekintése ]

Demo megtekintése | Letöltés Mootools Carousel A személyhívó 1.0 (Letöltve 1991 alkalommal)

1. Körhinta Lapozás

Könnyedén hozzá a lapozás a körhinta, egyszerűen csak beállítja a személyhívó zászló, ami elmúlt parater telt megteremtése mellett például a MooCarousel az igaz (akar lapozó) vagy hamisak (donot akar lapozó).

var carousel1 = new MooCarousel ("carousel1_wrapper ',' carousel1_items_container ',' carousel1_moveleft ',' carousel1_moveright", c_ns, c_sss, true); / / ns = számú diák, sss = dia lépés nagyság

És persze meg lehet változtatni a kinézetét-n érzem, ezeknek a személyhívó achors kedve szerint módosítja a CSS-t.

. Carousel_paging {text-align: right; margin: 5px 10px 0 0;}
. Carousel_paging. Áram. Carousel_paging. Oldal {vázlata: none; szélesség: 15px; magasság: 15px; line-height: 15px; text-align: center; display: block; float: left; background: # D8D8EB; margin: 0 1px 0 0; text-decoration: none;}

. Carousel_paging a: hover. Carousel_paging. Aktuális {background: # 4D4D9B; color: # ffffff;}

Nos! van egy kis probléma azonban a horgonyok személyhívó ha be van állítva, akkor mindig lesz keletkezett után Carousel komponens. Azt akartam, hogy ez a dinamikus is, de aztán csak tartani a szkript elfújta az arányok, úgy döntöttem, hogy kihagyom.
De tudod, egy kis JavaScript, akkor könnyedén módosíthatja a lapozás generáció kódot a MooCarousel osztály kérjük az Ön igényeinek.

2. Testreszabása a Bal és Jobb Ikonok

Meg lehet változtatni az elhelyezést, képek vagy bárminemű displat tulajdonában bal és jobb gombok egyszerűen csak a játék körül a CSS-t. , hogy képes legyen megváltoztatni a kihelyezések a bal és jobb buttoms volt a tényleges oka, hogy számomra mi az én jobb Carousel osztály.
Mivel ez MooCarousel osztály, elfogadja az id van ilyen gomb, akkor valójában ezek a gombok helyet bárhol az oldalon, ha úgy tetszik ... nem kell lennie az elem hierarchiában, mint a példámat.

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; helyzet: relatív, szélesség: 23px; magasság: 20px; float: left; kurzor: pointer;}

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

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

3. Testreszabása Slide lépések

Mit értek MY testreszabása SLIDE lépések?
A legtöbb Körhinta tolja tele az a látható ablak. Tehát meg kellett mondani a négy elem (mint a fenti példában), akkor csúszik mind a négy elem. Ezzel a Carousel komponens, miután elhaladt a diák számát és méretét a lépés, amelyet választott.

var carousel1 = new MooCarousel ("carousel1_wrapper ',' carousel1_items_container ',' carousel1_moveleft ',' carousel1_moveright", c_ns, c_sss, true);
c_ns = számú diák, c_sss = dia lépés nagyság

Továbbá, az én vagyok example1 calcuted lépést a dia méretét, a logikán alapul, ahol tudom, hogy a tárgyak számát, szélesség minden egyes darabjáról és a margók számára, amelyek után az egyes elemeket az én CSS.

/ * A tivornya 1 * /

var c1_w = 92; / / szélesség tivornya pont

var c1_n = 10; / / száma Összehasonlító tivornya tételek

var c1_pp = 4 / / Összehasonlító száma tivornya tételek perpage

var c1_marginFactor = 51;

var = c1_sss c1_w c1_pp * / / sss = dia lépés nagyság

var c1_ns = parseInt (((* c1_w c1_n) / c1_sss) + 0,5) / / ns = hány dia

c1_sss + = c1_marginFactor / / sss = dia lépcső méretét, 51 margók

Követelmények: 1,2 Mootools

Demo megtekintése | Letöltés Mootools Carousel A személyhívó 1.0 (Letöltve 1991 alkalommal)

MooRating egy egyszerű (kereszt böngésző, persze ami használja az erejét a MooTools könyvtár), könnyű és kiváló minősítés Mootools alapú megoldás. Nem nevezik a "Star Rating", egyszerűen azért, mert a minősítés képet lehet választani, mint te (adtam Stars, bárok és a szívek a letöltés, de létrehozhatunk saját fajta és csak csepp azt).

Hogyan néz ki:

	Mootools Értékelés különböző képek megtekintése Demo
	Értékelés Mootools a százalékos értékeket bemutató megtekintése
	Mootools Értékelés tört értékeket bemutató megtekintése

Letöltés Mootols Star Rating Script (Letöltve 718 alkalommal)

Értékelés adatok: Egész szám, decimális és százalékos
Jelenleg a szkript célja, hogy bemutassa az adatok értékelése, mint az egész értékek (1,2,3,4,5), a tizedes (1,24, 3,45, stb), vagy százalékban (12%, 55% stb.) A választás az adatok azt mutatják, bármelyik említett formátumokat lehet állítani egyszerűen megváltoztatják néhány jelzőértékeit a javascript (moorating.js)
Alapvetően két e két flag játszani, értékek megjelenítésére a választott formátumban ...

var inpercent = false; / / Állítsuk ezt a zászlót, hogy igaz, ha szüksége százalékos értékeket megjeleníteni
var isFractional = false / / Állítsd true, ha szeretné tört értékek, mint a 1,24, 1,25, 4,56 helyett 1,2 ... 5

És én nem hiszem, hogy van-e magyarázat szükséges ehhez. Sőt. A script nagyon egyszerű. Ha ismeri egy kicsit javascripting, akkor tudja módosítani a forgatókönyvet, hogy bármiféle érték jelenik meg. Mert például, ha akarod, hogy három tizedes pontossággal jelenik meg a csípés ... csak a parancsfájlt az alábbiak szerint ...

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

Értékelés érték frissítése:
Én havent zavarta írásban semmilyen AJAX script frissítésével Ratings érték, mert tudom, tapasztalom, hogy nem mindig van meg kívánja frissíteni a VÉLEMÉNYE, amint a felhasználó árak valamit. Ön szabadon tehetsz, amit akarsz, a névleges érték, frissítse az AJAX és elküldése, vagy beállítása egy rejtett űrlapmező értékét, be kell nyújtani a teljes forma, stb

updateRating funkció (id, minősítés) {
/ / Alert (id + "," + minősítés);
/ / Tegyél meg bármit, a szavazatokat
}

Van funkciója a javascript úgynevezett "updateRating". Ez a funkció átment az azonosító az értékelés Div, azonosítani, hogy melyik értékelés (ha ennél több, hogy az egyik értékelés az oldalon) frissült, és az értéke a minősítés [updateRating (id, minősítés)]. Lehet választani, amire csak akarja ezekkel az értékekkel, mint korábban említettem.

Értékelés Kép: Csillagok, szívek, bárok vagy bármi tetszik
A minősítés megváltoztatása, hogy a fenti típusok (csillag, szív stb) nagyon egyszerű. Csak készíts egy képet, hasonlóan a biztosított, és dobja be! Ne feledje, ha megváltoztatja a nevét, a kép, nem teszik a szükséges módosításokat a CSS fájlban, lásd alább.

. Moostar {margin: 0px; padding: 0px; overflow: hidden; szélesség: 84px; magasság: 20px; float: left; background: url ('stars.gif') repeat-x;}
. Moostar span {float: left; margin: 0px; padding: 0px; display: block; szélesség: 84px; magasság: 20px; text-decoration: none; text-indent:-9000px; z-index: 20;}
. Moostar. Curr {background: url ('stars.gif') engedélyezte 25px;}

A legtöbb értékelés widgetek használata csillag és fél csillag az egeret a kép események minden csillag. Moo Értékelések használ egy egyszerű sprite képet, háttérképet, hogy elérjék a kívánt vizuális hatás nagyon alacsony rezsi.

Követelmények: 1,2 Mootools
Letöltés Mootols Star Rating Script (Letöltve 718 alkalommal)

Én évek óta keresett egy dupla csuklós csúszka (slider, két gomb, minimum és maximum) segítségével Mootools. Bár, Találtam egy pár jól sikerült dupla csúszka beszorult a Mootools fórum Az egyetlen probléma az volt, hogy mindezek a csúszkák látta, hogy a kiválasztott tartományjelzővel. Végre! Úgy döntöttem, hogy hozzon létre saját. Nos! Én nem használja az eredeti kódot, és módosítsa úgy, hogy van egy csúszka háttér jelzi a kiválasztott tartomány vizuálisan, mint én az alábbi példát. A KÉK területeket jelzi tartományban választott érték.

2.2 verzió megtekintése Demo | Letöltés Mootools Dupla csuklós Slider 2.2 verzió (letöltés 11722 alkalommal)

Akkor nagyon könnyen változtatni a kinézetét és hangulatát tartományban mutató (kék a fenti példa), csúszka gomb, a csúszka pálya módosításával slider.css szükség.

Ne dobj meg egy megjegyzést, ha hasznosnak találják.

Ha az egyik ilyen fickók (mint én), aki gyakran ellenőrzi a CSS a HTML oldal jól tette, hogy kap ihletet, vagy bármi, akkor lehet, hogy észrevette, hogy az általunk használt faux Positioning (mint már említettem az én korábbi cikkben vagyunk Abszolút pozicionálás segítségével Faux: ragyogó CCS elrendezés )

Mi nem valami jó munkát a sablon, ezért gondoltam, hogy kedvesek megosztani .... letöltése WordPress Theme (letöltve 196 alkalommal)