Vyjadrenie IT

S rôznymi kolotoče vonku, veľa pre MooTools tiež, stále sa rozhodol napísať vlastnú Carousel triedy, pre niektoré z dobrých dôvodov
1. Chcel stránkovací funkcie (mohli skočiť konkrétny snímok / krok v karuselu).
2. Chceli slobodu, umiestnenie na ľavý a pravý tlačidlá či odkazy, kde vôbec sa mi zapáči.
3. Väčšiu kontrolu nad Slide schodov.

Ja sa podarilo vytvoriť nový Carousel, s vyššie uvedenými funkciami ... ako je uvedené nižšie ... Nebojte sa navrhnúť nejaké zmeny by ste vyžadovať!

Môj Príklad vyzerá takto ... [ View Demo ]

Zobraziť Demo záložky | Stiahnuť MooTools Carousel S stránkovacieho verzia 1.0 (stiahnuté 1980 krát)

1. Kolotoč Paging

Môžete ľahko pridať stránkovania do kolotoča, jednoducho nastavením stránkovací vlajku, čo je posledný parater prešiel pri vytváraní inštancie MooCarousel na hodnotu true (chcete stránkovací) alebo false (donot chce stránkovania).

var carousel1 = new MooCarousel ("carousel1_wrapper ',' carousel1_items_container ',' carousel1_moveleft ',' carousel1_moveright" c_ns, c_sss, true); / / ns = počet snímok, sss = snímok veľkosť kroku

A samozrejme môžete zmeniť vzhľad-n-štýl týchto vyhľadávacích achors, ako je libo úpravou ich CSS.

. Carousel_paging {text-align: právo; margin: 5px 10px 0 0;}
. Carousel_paging prúd, carousel_paging stránku {outline: none; šírka: týždeň. 15px, výška: 15px; line-height: 15px; text-align: centrum; display: block; float: left; pozadia: # D8D8EB; margin: 0 1px 0 0; text-decoration: none;}

. Carousel_paging: hover, carousel_paging prúd {background: # 4D4D9B, color: # FFFFFF;} ..

No! tam je malý problém keď, ak je nastavená, stránkovací kotvy potom to dostane generovaný vždy po Carousel komponenty. Chcel som, aby to dynamický tiež, ale potom už len, aby scenár k fúkanie rozmerov, rozhodol som sa ju preskočiť.
Ale viete, trochu Javascript, môžete ľahko upraviť stránkovací generácie kód v MooCarousel triede potešiť svoje potreby.

2. Prispôsobenie ľavý a pravý ikony

Môžete zmeniť umiestnenie, obrázky ani disple majetok z ľavého a pravého tlačidla jednoducho tým, že hranie sa s CSS. mať možnosť zmeniť umiestnenie medzi ľavým a pravým Privolávacie bol skutočný dôvod, aby som na pravú mojej našej Carousel triedy.
Vzhľadom k tomu, MooCarousel triedy, prijme id je z týchto tlačidiel, môžete skutočne umiestniť tieto tlačidlá kdekoľvek na stránke, prosím ... to nemusí byť v hierarchii prvkov, ako v mojom príklade.

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; pozície: relatívna, šírka: 23px; výška: 20px; float: left; cursor: pointer;}

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

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

3. Prispôsobenie snímok kroky

Čo tým myslím MOJE Prispôsobenie snímok kroky?
Väčšina Kolotoč posuňte plne s z viditeľného okna. Takže povedať, že mal štyri položky (ako v mojom vzorke vyššie), bude to kĺzať všetky štyri položky. S týmto Carousel Component, miniete niekoľko snímok a veľkosť kroku podľa vášho výberu.

var carousel1 = new MooCarousel ("carousel1_wrapper ',' carousel1_items_container ',' carousel1_moveleft ',' carousel1_moveright" c_ns, c_sss, true);
c_ns = počet snímok, c_sss = snímok veľkosť kroku

Aj v mojom example1 som calcuted prezentáciu veľkosť kroku, založený na logike kde, viem, že počet položiek, šírka na každej položky a marží, ktoré dali za každou položkou v mojom CSS.

/ * Pre Pitka 1 * /

var c1_w = 92 / / Pitka položky Šírka

var c1_n = 10 / / Celkový počet položiek porovnávané Pitka

var c1_pp = 4 / / Počet porovnávanej perpage Pitka položky

var c1_marginFactor = 51;

var c1_sss = c1_w * c1_pp / / sss = snímok veľkosť kroku

var c1_ns = parseInt (((c1_w * c1_n) / c1_sss) + 0.5) / / ns = počet snímok

c1_sss + = c1_marginFactor, / / ​​sss = snímok veľkosť kroku, 51 pre okraje

Požiadavky: MooTools 1.2

Zobraziť Demo záložky | Stiahnuť MooTools Carousel S stránkovacieho verzia 1.0 (stiahnuté 1980 krát)

MooRating je jednoduchý (cross prehliadač, samozrejme, pretože využíva sily knižnice MooTools), ľahké a vynikajúce MooTools podľa hodnotenia riešenia. To nie je pomenovaný ako "hviezdičiek", jednoducho preto, že by hodnotenie obrázok, ako si vybrať (ja som za predpokladu, hviezdičky, bary a srdce na stiahnutie, ale môžete vytvoriť vlastnú paletu a nechaj ho).

Ako to vyzerá takto:

	MooTools hodnotenie s rôznymi obrázkami Zobraziť ukážku
	MooTools hodnotenie s percentuálne hodnoty Zobraziť ukážku
	MooTools hodnotenie s hodnotami nepatrné Zobraziť ukážku

Stiahnuť Mootols é Script (Stiahnuté 716 krát)

Hodnotenie údaje: celé číslo, desatinné alebo percento
V súčasnej dobe skript je navrhnutý tak, aby ratingové zobraziť údaje ako celok hodnôt (1,2,3,4,5), v desatinné miesta (1,24, 3,45 atď), alebo v percentách (12%, 55% atď.) Voľba pre zobrazenie dát v jednom z uvedených formátov je možné nastaviť jednoducho tým, že sa mení niektoré vlajky hodnôt v JavaScripte (moorating.js)
V zásade existujú dva e dve vlajky na hranie, pre zobrazenie hodnoty vo formáte podľa vášho výberu ...

var inpercent = false; / / Nastavenie tohto príznaku na hodnotu true, ak potrebujete percentuálne hodnoty, ktoré sa zobrazí
var isFractional = false / / Nastavte na hodnotu true, ak chcete nepatrnej hodnoty, ako sú 1,24, 1,25 a 4,56, skôr než 1,2 ... 5

I dont myslím, že je potrebné nejaké vysvetlenie pre to. Okrem toho. Skript je veľmi jednoduchý. Ak viete, trochu javascripting, môžete upraviť skript dostať akúkoľvek hodnotu zobrazenú. Pre napr ak by ste chceli tri desatinné miesta majú byť zobrazené, ... proste poupraviť skript nižšie ...

if (isFractional) {if (x <= 5 | | x> = 0) moostartval [i] = innerHTML FormatNumber (x, 3);.} / / 2 sa mení na 3
else {moostartval [i] = innerHTML Math.round (x).;

Aktualizácia Hodnotenie hodnota:
I havent obťažoval písať nejaké AJAX skripty pre aktualizáciu ratingov hodnotu, pretože viem z vlastnej skúsenosti, že nie vždy sa to v úmysle aktualizovať RATING akonáhle užívateľ sadzieb niečo. Môžete si robiť, čo chcete s menovitou hodnotou, aktualizovať ho pomocou AJAX alebo ho nastaviť alebo skryté pole formulára hodnotu, ktorá má byť predložená s celou formou atď

Funkcia updateRating (id, hodnotenie) {
/ / Alert (id + "," + hodnotenie);
/ / Rob si, čo s hodnotením
}

K dispozícii je funkcia v javascriptu názvom "updateRating". Táto funkcia sa uzniesol na identifikátor Hodnotenie Div, zistiť, aké hodnotenie (ak existuje viac ako jedna hodnotenie na stránke) bol aktualizovaný a hodnota ratingu [updateRating (id, hodnotenie)]. Dalo by sa rozhodnúť, čo chcete s týmito hodnotami, ako som už spomenul.

Hodnotenie Obrázok: hviezdy, srdce, bary alebo niečo prosím
Zmena hodnotenia na niektorú z vyššie uvedených typov (hviezdy, srdce atď) je veľmi jednoduché. Stačí vytvoriť obraz podobný tomu, ak jeden a umiestnite ho dovnútra Pamätajte, že ak zmeníte názov obrazu, sa vykonať potrebné zmeny v súbore CSS, viď nižšie.

. Moostar {margin: 0px; padding: 0px; overflow: hidden; šírka: 84px; výška: 20px; float: left; background: url ("stars.gif") repeat-x;}
. Moostar span {float: left; margin: 0px; padding: 0px; display: block; šírka: 84px; výška: 20px; text-decoration: none; text-indent:-9000px, z-index: 20;}
.. Moostar akt. {Background: url ("stars.gif") odišiel 25px;}

Väčšina hodnotenie widgety používať hviezdu a pol hviezdičkami obrazy s myšou nad udalosťami na každej hviezdy. Moo hodnotenie používa jednoduchý škriatka ako obrázok na pozadí, aby sa dosiahla požadovaná vizuálne efekty s veľmi nízkou záťažou.

Požiadavky: MooTools 1.2
Stiahnuť Mootols é Script (Stiahnuté 716 krát)

Som hľadal dvojaký pripnutý Posúvač (jazdec s dvomi gombíkmi, minimálny a maximálny) pomocou MooTools. Aj keď, našiel som pár dobre odvedenú dvojitý jazdec pripnutý na fóre MooTools, jediný problém bol, že všetky tieto posuvníky dint sa vybrané dosahu. Konečne! Som sa rozhodol vytvoriť svoj vlastný. No! Som použiť pôvodný kód a upraviť ju mať jazdec pozadí, ktoré je uvedené rozmedzie vybrané vizuálne, ako v mojom príklade. Modré oblasti udáva rozsah hodnôt zvolili.

Zobraziť Demo verzia 2.2 | Download MooTools Double Čapové a kolíkové Slider verzia 2.2 (stiahnuté 11507 krát)

Môžete veľmi ľahko zmeniť vzhľad a dojem z radu ukazovatele (modro vo vyššie uvedenom príklade), slider gombík, posuvník trať zmenou slider.css podľa potreby.

Páči sa napíšte mi komentár, ak vám to užitočné.

Než sme sa museli vysporiadať s CSS vytvoriť naše rozloženie stránky, zarovnanie nejaký obsah vnútri bunky tabuľky zdalo Proste hračkou. Stačí zadať "zladiť" alebo "valign" vlastnosť tabuľky majú zarovnanie podľa vášho výberu, kúsok torty!
S rozvrhnutie CSS, keď máme "vertical-align" vlastnosť prvkov, sa nezdá byť tak jednoduché, ako "zladiť" alebo "valign" vlastností. Chcete byť viac konkrétny "vertical-align" nikdy sa zdá k riešeniu niektorý z vašich problémov, najmä ak sú napísať kus cross-browser CSS.

Bez použitia HTML tabuliek, problém sa sústrediť na objekte, či už je to nejaký obrázok alebo text v obsahujúci divízie, bol pravdepodobne každý UI / CSS vývojári nočná mora, na nejakom mieste. Tento problém ďalej extrapoluje svoje starosti v prispôsobení, ak je objekt, ktorý sa uprostred je dynamický charakter, tj keď jeho výška je premenlivá (neznáme výška).

Hoci neexistuje žiadna známa priamočiare riešenie, ktoré bude pracovať v celej rade prehliadačov, ktoré musíme riešiť, riešenie, ktoré som sa snažil prísť k sa zdá pracovať v niekoľkých prehliadačoch, ktoré som sa snažil ho (IE6, IE 7 , FF).

RIEŠENIE:
V prehliadačoch, ako je Mozilla, Opera a Safari divne chová "vertical-align" majetok môže byť podaná k rozumu, jednoducho nastavením "display" vlastnosť obsahujúce divízie "stolové bunky" (display: table-cell) .

Problémom stále zostáva s IE rodiny prehliadačov, ktorý, ale nezdá sa, že pochopili, čo majú s "table-cell" majetku a nevedomým, ako sú, jednoducho ignorovať. Riešenie uvedené nižšie, hoci jednoduchý, inzeráty niekoľkých viac DOM elementy do HTML robiť veci sa stávajú.

CSS a HTML vyzerá takto
.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/> zobrazení: 3456 </ div>
</ Div>
</ Div>

Výsledok vyzerá takto: -

Pozrite sa na demo tu záložky | na stiahnutie Zdrojové súbory (stiahnuté 448 krát)

TOP Zarovnanie 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/> zobrazení: 1234 </ div>
</ Div>
</ Div>

Výsledok vyzerá takto: -

SPODNÁ Zarovnanie 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/> zobrazení: 1234 </ div>
</ Div>
</ Div>

Výsledok vyzerá takto: -

Pozrite sa na demo tu | Na stiahnutie tu

Vyzerá to, že starne, pretože som sa snažil nájsť rozumné riešenie tohto problému zarovnanie. Ale teraz s týmto riešením, sa cítim trochu pokoja.

S nádejou, že jedného dňa

• Vertikálne zarovnanie CSS majetok bude fungovať podobne ako to robí vo vnútri bunky tabuľky, bez toho aby museli poraziť oveľa okolo horúcej kaše
• Aspoň, nastavenie margin-top: auto a margin-bottom: auto, dá rovnaký výsledok ako pri margin-left a margin-right nastavený na automatické
• Vojne prehliadačov bude po nejaký deň.
• K dispozícii bude len jeden prehliadač pre všetkých.

Stiahnite si CSS a HTML vyššie uvedené riešenie tu (stiahnuté 448 krát) .. na zrozumiteľnosti, je CSS nie je optimalizovaná

PS: A mimochodom, to sú náhľady niektorých obrázkov som klikli ...

Nie že by to sú len niektoré Lightbox je, že môžete nájsť, keď Google. Problém s väčšinou lightboxu, že som zistil, bolo, že sa všetko zdalo sa použiť jeden alebo inej ťažkej váhy rámcov JavaScriptu ako jQuery, Prototype MooTools a rád. Všetci sú cool a elegantný hľadáte. Ale Pokiaľ váš požiadavku "Ale ja chcem, jednoduchý a ĽAHKÝ lightbox SCRIPT svojich webových stránok", potom tu je;

Niektoré pekné črty tohto Obľúbených

1. Veľmi ľahká
   . 4 kB skriptov pri balení (8 kB bez obalu)
   b. 2 kb CSS
   c. Pár riadkov HTML pre lightboxu kontajnera
2. Jednoduché pochopiť a realizovať
3. Môže mať viac lightbox na rovnakej stránke.
4. Rovnaký Obľúbených kontajner sa používa na zobrazenie, iný obsah, ktorý je zahrnutý ako samostatne skrytých oddielov na stránke) v závislosti na odkaz / option, ktorý je klikli.
5. Automaticky sa centra, pričom do úvahy všetky faktory, ako sú okná výšky a šírky (rozlíšenie monitora), str vyhľadajte množstvo a na výšku obsahu Obľúbených
6. Testované v IE 7 a FF

Zobraziť Demo |
Stiahnuť Lightbox Zdroj Zip (Stiahnuté 1791 krát)

jo.js a jo_pack.js [zabalené verzia]: - jednoduchý súbor JavaScript OBJEKTOV [JO], ktorý obsahuje prvok, okná a skripty dokumentov polohy. Môžete otvoriť JO.JS, ak chcete, aby vaše špinavé ruky s nejakým pokročilým Javascripting, vytvárať abstraktné funkcie, rozšírenie prvkov vlastnosti a podobne. Ak nemáte príliš v Javascripting, nechá to byť.

lightbox.js, lightbox_pack.js [zbalil verzia] - Obsahuje ľahké skripty okne Správca. Ak ste návrhár stránky, taktiež zodpovedá s vykonávaním lightbox na stránke, musíte pochopiť LightBoxManager. LightBoxManager podstate obsahuje len dve funkcie showLightBox a closeLightBox.

lightbox.css: - Ak viete, CSS, môžete sa pohrať s lightbox.css upraviť vzhľad-n-cítiť lightbox.css

index.html: Ukážka implementácie Obľúbených s dvoma rôznym obsahom

lb_underlay_bkg.png: - To je svetlo / simi transparentný obraz, ktorý sa používa ako podklad pre podloženie lightboxu [podložka sa vrstva pod lighbox, ktorá zabraňuje užívateľovi kliknutím na akýkoľvek iný subjekt na stránke, zatiaľ čo Schránka je otvorená]. Môžete použiť ľubovoľný obrázok, alebo dokonca plná farba pre tento účel, v závislosti na vzhľad stránky a požiadavky.

icon_lb_close.gif: - obrázok pre EL páky na pravej hornej časti svetelného poľa. Možno použiť akýkoľvek obrázok podľa návrhu

Zobraziť Demo |
Stiahnuť Lightbox Zdroj Zip (Stiahnuté 1791 krát)

Prosím, dajte nám majú svoje pripomienky a reakcie ...

Ak ste jeden z tých chalanov (ako ja), ktorí často kontrolovať CSS dobre vykonanej stránky HTML sa inšpirovať, alebo čo, a potom ste si možno všimli, že sme použili Faux polohy (ako už bolo povedané v mojom skoršom článku sme faux pomocou absolútnej polohy: Brilantná CCS Layout )

Urobili sme dobrú prácu na tejto šablóne, takže si myslel, že by pekné zdieľať .... Stiahnite si túto tému WordPress (stiahnuté 195 krát)