Ga izražava

Uz razne deformacije vani, mnogi za Mootools kao dobro, ja sam ipak odlučio napisati svoju carousel klase, za nekih dobrih razloga
1. Htio stranične značajku (da bi mogli skočiti određeni slajd / STEP u vrtuljak).
2. Htio sloboda s plasman na lijeve i desne tipke / Linkovi, gdje god mi se sviđa.
3. Više kontrole nad Slide koraka.

Sam uspio stvoriti novu Vrtuljak, s gore navedenim značajkama ... kao ispod ... Slobodno predložiti bilo kakve izmjene te će zahtijevati!

Moj primjer izgleda ovako ... [ View Demo ]

Pogledajte demo se | Preuzimanje Mootools Vrtuljak s stranične Version 1.0 (Downloaded 1986 puta)

1. Vrtuljak Paging

Možete jednostavno dodati stranične na vrtuljak, jednostavno postavljanjem stranične zastavu, koja je prošle parater prošlo dok stvara instancu MooCarousel na TRUE (želite stranične) ili false (donot žele stranične).

var carousel1 = new MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright', c_ns, c_sss, true); / / ns = broj slajdova, SSS = tobogan veličina koraka

I ofcourse možete promijeniti izgled-n-osjećati od tih stranične achors kao što molim mijenjanjem svoje CSS.

. Carousel_paging {text-align: right; margin: 5px 10px 0 0;}
. Carousel_paging struja, carousel_paging stranica {prikaz: none; širina:... 15px; visina: 15px; line-height: 15px; text-align: središte; display: block; plovak: lijevo, background: # D8D8EB, marža: 0 1px 0 0; text-decoration: none;}

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

Dobro! postoji mali problem ipak, stranične sidra ako je skup, onda će se uvijek nastaje nakon carousel komponente. Htio sam da bude dinamičan kao dobro, ali onda samo da bi scenarij za puše iz proporcija, odlučio sam da ga preskočiti.
Ali znaš malo Javascript, možete jednostavno mijenjati kod generacije stranične u MooCarousel klase molimo vaše potrebe.

2. Prilagodba na lijevo i desno ikone

Možete promijeniti položaj, slike ili bilo displat imovine od lijeve i desne tipke jednostavno igranje okolo sa CSS-om. biti u mogućnosti mijenjati položaje u Lijevo i Desno buttoms je stvarni razlog za mene na desno moj naše carousel klase.
Budući da je ovo MooCarousel klasa, prihvaća id je od ovih gumba, zapravo možete staviti ove gumbe bilo gdje na stranici, molim Vas, ... ako to ne moraju biti u hijerarhiji elemenata, kao u mom primjeru.

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; položaj: relativni, širina: 23px; visina: 20px; plovak: lijevo, pokazivač: pointer;}

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

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

3. Prilagodba Slide koraka

Što mi znači MOJE Prilagodba KORACIMA slajda?
Većina deformacije gurnite pun vidljivog prozora. Dakle, reći da je imao četiri stavke (kao u mom uzorku gore), to će slajd sve četiri stavke. S ovim carousel komponente, možete proći broj slajdova i korak veličine po vašem izboru.

var carousel1 = new MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright', c_ns, c_sss, true);
c_ns = broj slajdova, c_sss = tobogan veličina koraka

Također, u mom example1 sam calcuted veličinu klizni korak, temelji se na logici gdje je, znam broj predmeta, širinu na svaku stavku i marže koje su dane nakon svake stavke u mojoj CSS.

/ * Za bančenje 1 * /

var c1_w = 92 / / bančenje predmeta Širina

var c1_n = 10 / / Ukupan broj predmeta odnos prema bančenje

var c1_pp = 4 / / Broj odnos prema bančenje točke perpage

var c1_marginFactor = 51;

var c1_sss = c1_w * c1_pp / / SSS = tobogan veličina koraka

var c1_ns parseInt = (((c1_w * c1_n) / c1_sss) + 0,5); / / ns = broj slajdova

c1_sss + = c1_marginFactor / / SSS = tobogan veličina koraka, 51 na marginama

Zahtjevi: Mootools 1.2

Pogledajte demo se | Preuzimanje Mootools Vrtuljak s stranične Version 1.0 (Downloaded 1986 puta)

MooRating je jednostavan (križ preglednik, naravno, jer se koristi moć MooTools knjižnice), lagan i odličan Mootools ocjena temelji rješenje. Nije nazvao kao "kategorizaciji zvjezdicama", jednostavno zato što Ocjena slika bi mogla biti kao što ste izabrali (Ja sam pod uvjetom Provjerite, barovi i srca s download, ali možete napraviti svoj vlastiti izbor i samo je kap u).

Kako to izgleda ovako:

	Mootools Ocjena različitim slikama Vidi Demo
	Mootools ocjena s Postotak vrijednosti Vidi Demo
	Mootools ocjena s djelomičnim vrijednostima Vidi Demo

Preuzmite Mootols Broj zvjezdica Skripta (Downloaded 716 puta)

Ocjena podaci: cijeli broj, decimalni ili postotak
Trenutno skripta je dizajniran za prikaz ocjena podatke kao cjelovite vrijednosti (1,2,3,4,5), u decimale (1,24, 3,45 i sl.) ili u postocima (12%, 55% itd.). Izbor za prikaz podataka u bilo kojem od spomenutih formata može se postaviti jednostavno promjenom nekih vrijednosti unutar zastavu JavaScript (moorating.js)
U osnovi postoje dvije e dvije zastave igrati sa, za prikazivanje vrijednosti u formatu po vašem izboru ...

var inpercent = false; / / Postavite ovu zastavu na true, ako vam je potrebna postotak vrijednosti koji će biti prikazani
var isFractional = false / / Set to istina, ako želite nepotpune vrijednosti kao što su 1,24 i 1,25 i 4,56 umjesto 1,2 ... 5

A ja ne mislim da je bilo potrebno objašnjenje za to. Osim toga. Skripta je vrlo jednostavna. Ako znate malo javascripting, možete modificirati skriptu da biste dobili bilo kakve vrijednosti prikazane. Jer npr. ako biste željeli tri decimalna mjesta koji će biti prikazani ... samo ugađanje skriptu kao ispod ...

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

Ažuriranje Ocjena vrijednost:
Ja luka smeta pisanje bilo kakvih AJAX skripte za ažuriranje ocjene vrijednost, jer znam da iz mog iskustva da NIJE UVIJEK se ne namjerava ažurirati Ocjena čim nešto korisničkom stope. Vi ste slobodni raditi što god želite s nazivnom vrijednosti, Ažurirajte koristeći AJAX ili ga poslati ili Podesite skrivene vrijednost polje obrasca, koje se podnosi s cijelim obliku itd.

Funkcija updateRating (id, ocjena) {
/ / Alert (id + "" + ocjena);
/ / Što god SA rating
}

Tu je funkcija u JavaScriptu pod nazivom "updateRating". Ova funkcija je prošao u ID Ocjena diviziju, identificirati kako bi se što ocjena (ako postoji više od jedne ocjene na stranici) je ažuriran i vrijednost ocjena [updateRating (id, rating)]. Možete odabrati ono što želite s tim vrijednostima, kao što sam spomenuo ranije.

Ocjena Slika: zvjezdice, srca, barovi, ili bilo što, molim Vas
Promjena ocjena za bilo koji od navedenih vrsta (zvjezdice, srca, itd.) je vrlo jednostavan. Dovoljno je stvoriti sliku sličan onome predviđenom i ispustite ga u. Zapamtite, ako ste promijenili ime slike, napravite potrebne promjene u CSS datoteke, pogledajte u nastavku.

. Moostar {margin: 0px; padding: 0px; overflow: skriveno, širina: 84px; visina: 20px; plovak: lijevo, background: url ('stars.gif') ponavljam-x;}
. Moostar span {plovak: lijevo; margin: 0px; padding: 0px; display: block; širina: 84px; visina: 20px; text-decoration: none; teksta alineje:-9000px; z-index: 20;}
.. Moostar valuta {background: url ('stars.gif') lijevo 25px;}

Većina ocjene dodaci koristiti zvijezda i pola zvjezdice slike s mišem preko događaja na svakoj zvijezdi. Moo Ocjene koristi jednostavan Sprite sliku kao pozadinsku sliku za postizanje potrebne vizualne efekte s vrlo niskom pretek.

Zahtjevi: Mootools 1.2
Preuzmite Mootols Broj zvjezdica Skripta (Downloaded 716 puta)

Sam bio u potrazi za dvokrevetnu zabodena klizač (slider s dvije ručice, minimalne i maksimalne) koristeći mootools. Iako, ja sam naći nekoliko dobro učinio dvostruko zabodena klizač u mootools forumu, jedini problem je da sve to klizače utisak imaju odabranog raspona marker. Konačno! Odlučio sam napraviti moj vlastiti. Dobro! Ja sam koristiti izvorni kod i mijenjati imati klizača pozadinu koja je naznačeno raspon odabrane vizualno, kao u mom primjeru u nastavku. Plavi područja označava raspon vrijednosti odabrani.

Prikaži verziju 2.2 Demo | Preuzimanje Mootools Dvokrevetna Pinned Slider inačice 2.2 (Downloaded 11587 puta)

Možete vrlo lako promijeniti izgled i dojam raspon pokazatelja (u plavo u gornjem primjeru), klizač tipku, klizač staze mijenjanjem slider.css prema potrebi.

Ne ispadne mi komentar ako vam je koristan.

Prije nego što smo morali nositi sa CSS-om za stvaranje naše izgleda stranice, poravnavanje neki sadržaj unutar ćelije tablice činilo samo dječja igra. Jednostavno postavite "poravnati" ili "valign" vlasništvo stolom za poravnanje po vašem izboru, komad torte!
S CSS rasporedima, iako imamo "vertikalna-align" svojstvo elemenata, to ne činiti se biti kao jednostavan kao "poravnavanje" ili "valign svojstva". Da bi se više specifiic "okomiti-align" nikad ne izgleda kao da se riješi bilo koji od vaših problema, pogotovo ako se napisati komad cross-preglednik CSS.

Bez korištenja HTML tablicama, Problem sa središtem na objektu, bilo da je slika ili neki tekst unutar sadrže podjele, je vjerojatno bio svaki UI / CSS developera noćna mora u nekom trenutku. Ovaj problem se dodatno extrapolates svoje brige usklađivanja, ako se objekt u središtu je dinamičan u prirodi, tj. kada njegova visina je promjenjiva (nepoznata visina).

Iako ne postoji poznati ravno naprijed rješenje koje će raditi preko raspon preglednicima moramo baviti, rješenje da sam pokušao doći do čini se da rade u nekoliko preglednicima da sam ga pokušao u (IE6, IE 7 , FF).

RJEŠENJE:
U preglednicima kao što su Mozilla, Opera i Safari, čudno ponašaju "okomiti-align" imovina može dovesti k pameti, jednostavno postavljanjem "pokazivati" svojstvo sadrže podjele na "stol-stanice" (display: table-cell) .

Problem i dalje ostaje s obitelji IE preglednika, koji je, još uvijek ne čini se da razumjeti što sa "Tablica stanica" imovine i neznanju kao što su oni, oni su samo ga ignorirati. Rješenje dano u nastavku, iako jednostavne, oglasi nekoliko više DOM elemenata u HTML kako bi se stvari događaju.

CSS i HTML izgleda ovako
.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/> Views: 3456 </ div>
</ Div>
</ Div>

Rezultat izgleda ovako: -

prikaz demo ovdje se | download source Files (Downloaded 451 puta)

TOP Poravnaj 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/> stajališta: 1234 </ div>
</ Div>
</ Div>

Rezultat izgleda ovako: -

DONJA Poravnaj 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/> stajališta: 1234 </ div>
</ Div>
</ Div>

Rezultat izgleda ovako: -

prikaz demo ovdje | Preuzmite ovdje

Činiti se poput dobi, budući da sam pokušava pronaći razumno rješenje ovog problema poravnanje. Ali sada s ovim rješenjem, osjećam se kao kod malo mira.

Uz nadu da će jednog dana

• vertikalnom usklađivanje imovine u CSS će raditi kao da se u ćeliji tablice, bez da tuku čak oko grma
• Barem, postavljanje margina-top: Auto-bottom margin: auto, dat će isti rezultat kao što je s margina-lijevi i desni rub postavljeni na auto
• Ratovi preglednik će biti više od jednog dana.
• Tu će se samo jedan browser za sve.

Preuzmite CSS and HTML iz gornjeg rješenja ovdje (Downloaded 451 puta) .. za razumljivosti, CSS nije optimizirana

PS: I usput, to su sličice nekih slika sam kliknuo ...

Nije da postoji samo nekoliko Lightbox je da možete pronaći kada google. Problem s većinom od lightboxes koje sam našao je da su svi oni kao da koristite jedan ili drugi težinom kao JavaScript okvire jQuery, Prototype i MOOTOOLS i voli. Oni su svi cool i swanky tražite. No, ako je vaš zahtjev "Ali ja želim jednostavan i lagani Lightbox skriptu za moje stranice", onda ovdje je;

Neki lijepo značajke ovog Lightbox

1. Vrlo lagan
   . 4KB skripti kada pakirane (8 KB nespreman)
   b. 2 kb CSS
   c. Nekoliko redaka HTML-a za Lightbox kontejner
2. Jednostavan za razumijevanje i provedbu
3. Može imati više Lightboxes na istoj stranici.
4. Isto Lightbox kontejner se koristi za pokazati, drugačiji sadržaj (koji se zasebno uključeni skrivenih odjeljaka po stranici), ovisno na link / mogućnost da se kliknuli.
5. Automatski centri, uzimajući u obzir sve čimbenike kao što su, visine i širine prozora (Razlučivost zaslona), stranica dođite iznos i visina sadržaja Lightbox
6. Ispitano u IE 7 i ff

Pregled Demo |
Preuzmite Lightbox Izvor Zip (Downloaded 1797 puta)

jo.js i jo_pack.js [pakiran verzija] - jednostavan set JavaScript OBJEKTE [JO], koji sadrži element, prozor i dokumenata pozicioniranja skripte. Možete otvoriti JO.JS ako želite da biste dobili vaše ruke prljave s nekim naprednim Javascripting, stvarajući apstraktne funkcije, koja se širi elemenata svojstva i takve. Ako niste previše u Javascripting, ostavite ga na miru.

lightbox.js, lightbox_pack.js [upakiran verzija] - Sadrže svjetlo skripte okvira upravitelja. Ako ste stranica dizajner, i odgovoran je s implementacijom u Lightbox na stranici, morate razumjeti LightBoxManager. LightBoxManager u osnovi sastoji od samo dvije funkcije showLightBox i closeLightBox.

lightbox.css: - Ako znate CSS, možete se poigrati s lightbox.css prilagoditi pogled-n-osjećati lightbox.css

index.html: Uzorak provedba Lightbox s dva različita sadržaja

lb_underlay_bkg.png: - To je svjetlo / slični transparentni prikaz koji se koristi pozadinu za Lightbox podloge [podloge sloj ispod lighbox, koji sprečava korisnik iz kliknete bilo koji drugi subjekt na stranici, a Lightbox je otvoren]. Možete koristiti bilo koju sliku ili čak solid boja za tu svrhu, ovisno o dizajnu stranice i zahtjev.

icon_lb_close.gif: - slika za blisku Lightbox ručkom na gornjem desnom kutu light box. Možete koristiti bilo koju sliku po dizajnu

Pregled Demo |
Preuzmite Lightbox Izvor Zip (Downloaded 1797 puta)

Molimo Vas da nas imaju svoje komentare i povratne informacije ...