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 1988 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 1988 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 11596 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.

Mielőtt meg kellett küzdenie a CSS, hogy hozzon létre oldalelrendezéseket, összehangolva az egyes tartalmak belül egy táblázat cella tűnt csak gyerekjáték. Egyszerűen állítsa be az "align" vagy "valign" tulajdonság a tábla, hogy az összehangolás az Ön által kiválasztott, gyerekjáték!
A CSS elrendezés, bár van "vertical-align" tulajdonság az elem, nem tűnik olyan egyszerűnek, mint az "align" vagy "valign" tulajdonságok. Ahhoz, hogy több specifiic a "vertical-align:" Soha nem úgy tűnik, hogy megoldja minden gondját, különösen akkor, ha van írni egy darab cross-browser CSS.

Használata nélkül a HTML-táblázatok, a probléma az összpontosító tárgy, legyen az kép vagy valamilyen szöveget tartalmazó részlege belül, valószínűleg azóta minden UI / CSS fejlesztők rémálma egy bizonyos ponton. Ez a probléma további kivetítve gondjait történő összehangolása, ha az objektumot középre dinamikus jellegű, vagyis ha a magassága változó (ismeretlen magassága).

Bár nincs ismert megoldás, egyenesen előre, hogy fog működni az egész tartományban a böngészők meg kell foglalkozni, a megoldás, hogy én próbáltam megérkezni úgy tűnik, hogy működik a néhány böngészők Megpróbáltam azt (IE6, IE 7 , FF).

MEGOLDÁS:
A böngészők, mint a Mozilla, Opera és a Safari, a furcsa viselkedő "vertical-align" tulajdonság lehet hozni az érzékek, egyszerűen állítsa a "Display" tulajdona tartalmazó részleg "table-cell" (display: table-cell) .

A probléma még mindig az IE böngészők családja, aki még nem érti, mit a "table-cell" tulajdon és tudatlan, mint ők, akkor ne törődj vele. A megoldás az alábbiakban szerepel, bár egyszerű, hirdetések még néhány DOM elemet a HTML, hogy a dolgok történnek.

A CSS és HTML néz ki
.outer_container {
display: table;
text-align:center;
height: 140px;
width:140px;
position: relative;
overflow: hidden;
float:left;
margin:0px 10px 0px 0px;
}
.obj_container {
display: table-cell;
vertical-align: middle;
#position: absolute;
#top: 50%;
#left:50%;
}
.obj{
#position: relative;
#top: -50%;
#left:-50%;
margin:0px auto 0px auto;
}

HTML: -
<div class="outer_container">
<div class="obj_container">
<div class="obj"> <img src="image1.jpg"/> <br/> nézetek: 3456 </ div>
</ Div>
</ Div>

Az eredmény így néz ki: -

megtekintéséhez a demó | Letöltés Source Files (Letöltve 451 alkalommal)

TOP igazítás CSS
.obj_container_top {
display: table-cell;
vertical-align: top;
#position: absolute;
#top: 0%;
#left:50%;
}
.obj_top{
#position: relative;
#top: 0%;
#left:-50%;
margin:5px auto 0px auto;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#cccccc;
}

HTML: -
<div class="outer_container">
<div class="obj_container_top">
<div class="obj_top"> <img src="image1.jpg"/> <br/> nézetek: 1234 </ div>
</ Div>
</ Div>

Az eredmény így néz ki: -

ALSÓ igazítás CSS
.obj_container_bottom {
display: table-cell;
vertical-align: bottom;
#position: absolute;
#bottom: 0%;
#left:50%;
}
.obj_bottom {
#position: relative;
#bottom: 0%;
#left:-50%;
margin:5px auto 0px auto;
}
HTML: -
<div class="outer_container">
<div class="obj_container_bottom">
<div class="obj_bottom"> <img src="image1.jpg"/> <br/> nézetek: 1234 </ div>
</ Div>
</ Div>

Az eredmény így néz ki: -

megtekintéséhez a demó | Letöltés itt

Úgy tűnik, korok, mivel én kerestem egy ésszerű megoldást erre a beállítási hiba. De most ezzel a megoldással, úgy érzem, a békesség.

A remény, hogy egyszer majd

• függőleges igazítás tulajdonság a CSS-ben fog működni, mint ez a tábla sejt belsejébe, anélkül, hogy sokat verte az egész bokor
• Legalábbis, amelyben margin-top: auto és margin-bottom: auto, ad ugyanolyan eredmény, mint a margin-left és margin-right beállítása Auto
• A böngésző háborúk vége lesz egy napon.
• Ott majd csak egy böngészőben mindenki számára.

Töltse le a CSS és HTML a fenti megoldás van (Letöltve 451 alkalommal) .. az érthetőség, a CSS nem optimalizáltuk

PS: És egyébként is, ezek a miniatűrök néhány kép már kattintott ...

Nem létezik, hogy csak néhány azon LightBox, hogy megtalálja, ha google. A kérdés a legtöbb albumok találtam az volt, hogy minden úgy tűnt, hogy az egyik vagy a másik nagy súlyú JAVASCRIPT keretek, mint a jQuery, Prototype, MooTools és a szeret. Ezek mind hűvös és hencegő keres. De ha a követelmény, hogy "de én szeretnék egy egyszerű és könnyű LightBox SCRIPT oldalam", akkor itt van;

Néhány szép funkciói adni

1. Nagyon könnyű
   egy. 4kB a Scripts amikor a csomagolt (8 kb csomagolatlan)
   b. 2 KB CSS
   c. Néhány sornyi HTML adni a tartály
2. Egyszerű megérteni és végrehajtani
3. Lehet több albumok ugyanazon az oldalon.
4. Ugyanez adni konténer megjelenítésére használják, különböző tartalmak (ami külön tartalmazza a rejtett megosztottság az oldalon), attól függően, hogy a link / opció kattint.
5. Automatikusan középre magát, figyelembe véve minden olyan tényezőt, mint például ablak magassága és szélessége (képernyő felbontás), lapozzunk oldal összeg és a magassága tartalmát a albumba
6. Tesztelve IE 7 és FF

Demo megtekintése |
Töltse Lightbox Forrás Zip (Letöltve 1797 alkalommal)

jo.js, jo_pack.js [csomagolt verzió]: - egy egyszerű JavaScript objektumok [JO], amely elem, ablak-és dokumentum-helymeghatározó szkripteket. Meg tudja nyitni JO.JS ha szeretné kapni a kezét piszkos néhány fejlett Javascripting, ami absztrakt funkciók kiterjesztése és az ilyen elem tulajdonságait. Ha nem túl sokat Javascripting, Hagyd békén.

lightbox.js, lightbox_pack.js [csomagolt verzió]: - nem tartalmaz világító doboz szkriptjeire. Ha az oldal tervezője, felelős a végrehajtó adni az oldalon, meg kell értened a LightBoxManager. LightBoxManager alapvetően csak két funkciót tartalmaz, és showLightBox closeLightBox.

lightbox.css: - Ha tudja, CSS, játszhatsz körül lightbox.css szabni a look-n-érzi lightbox.css

index.html: Példa végrehajtása adni két különböző tartalom

lb_underlay_bkg.png: - Ez világos / átlátszó kép Simi, hogy használják a hátteret adni alátét [alátét az a réteg alatt lighbox, amely megakadályozza, hogy a felhasználó rákattint bármely más szervezet az oldalon, míg a nyitott adni]. Használhatja bármelyik képet, vagy akár egy egyszínű erre a célra, attól függően, hogy az oldal tervezés és a követelmény.

icon_lb_close.gif: - A kép közel adni fogantyút a jobb felső világító doboz. Használhatja minden képet mintánként

Demo megtekintése |
Töltse Lightbox Forrás Zip (Letöltve 1797 alkalommal)

Kérjük, ossza meg velünk, hogy meg észrevételeit és visszajelzéseit ...