Ki ga izraža

Z različnimi vrtiljaki tam, veliko za Mootools tudi, jaz še vedno se odločil napisati svoj razred vrtiljak, nekaj dobrih razlogov
1. Želeli ostranjevalne funkcijo (da bi lahko skočil določen diapozitiv / korak v vrtiljaku).
2. Želel svobodo s postavitvijo na levi in desni gumb / povezavami, kjer sem kdaj prosim.
3. Večji nadzor nad Slide korakih.

Nisem uspel ustvariti nov vrtiljak, z zgoraj navedenimi značilnostmi, kot spodaj ... ... Prosto za nasvet za spremembe, ki bi jih potrebujejo!

Moja Primer izgleda takole ... [ View Demo ]

Poglej Demo plinov v Download Mootools Carousel z ostranjevanjem Version 1.0 (Downloaded 1999 krat)

1. Vrtiljak Paging

Z lahkoto lahko dodate ostranjevanje na vaš vrtiljaku, enostavno z nastavitvijo ostranjevalne zastavo, ki je zadnja parater opravil pri ustvarjanju primerek MooCarousel v res želimo (paging) ali napačne (donot želijo paging).

var carousel1 = new MooCarousel ("carousel1_wrapper ',' carousel1_items_container", "carousel1_moveleft", "carousel1_moveright", c_ns, c_sss, true); / / ns = število diapozitivov, sss = slide korak Velikost

Seveda pa lahko spreminjate videz-n-občutek teh osebnega klica achors, kot ste si ga spremenila njihovo CSS.

. Carousel_paging {text-align: right; margin: 5px 10px 0 0;}
. Carousel_paging tok, carousel_paging stran {oris: none; širina:... 15px; višina: 15px; line-višina: 15px; text-align: center; zaslon: block; float: left; background: # D8D8EB; margin: 0 1px 0 0; text-decoration: none;}

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

No! je majhen problem, čeprav, ostranjevalne sidra Če nastavljeno, bo potem dobil vedno ustvari po Carousel komponente. Hotela sem, da bi bilo dinamično, kot tudi, potem pa samo, da scenarij za pihanje iz deležev, sem se odločil, da ga preskočite.
Ampak veste, malo Javascript, bi lahko zlahka spremeniti kodo ostranjevalne generacije v MooCarousel razredu prosim vaše potrebe.

2. Prilagajanje na levo in desno ikona

Spremenite lahko postavitev, slike ali katero koli displat lastnino o levi in ​​desni gumb preprosto igranje okrog s CSS. da bi lahko spremenili umestitve na levi in ​​desno buttoms je dejanski razlog za mene, da mi pravi naš Carousel razreda.
Ker je to MooCarousel razred, sprejme id je od teh gumbov, lahko dejansko dati te gumbe, kjerkoli na strani, prosim ... da ni treba biti v elementu hierarhije, kot v mojem primeru.

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; lega: relativna, širina: 23px; višina: 20px; float: left; kazalec: kazalec;}

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

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

3. Prilagajanje Slide koraki

Kaj imam v mislih MOJE Prilagajanje KORAKE SLIDE?
Večina vrtiljakov potisnite poln vidnega okna. Torej, da ste imeli štiri predmete (kot v mojem vzorcu zgoraj), bo potisnite vse štiri elemente. S tem Carousel komponente, boste mimo številnih diapozitivov in korak velikost po vaši izbiri.

var carousel1 = new MooCarousel ("carousel1_wrapper ',' carousel1_items_container", "carousel1_moveleft", "carousel1_moveright", c_ns, c_sss, true);
c_ns = število diapozitivov, c_sss = slide korak Velikost

Tudi v mojem example1 sem calcuted velikost zaporedja korakov, ki temelji na logiki, kjer je, vem, da število elementov, širino za vsako postavko in robove, ki so podane po posameznih postavkah v mojem CSS.

/ * Za Bančenje 1 * /

var c1_w = 92; / / Bančenje točka Širina

var c1_n = 10 / / Skupno število postavk komparaciji Bančenje

var c1_pp = 4 / / Število primerjavo so perpage Bančenje Items

var c1_marginFactor = 51;

var c1_sss = c1_w * c1_pp; / / sss = slide korak Velikost

c1_ns var = parseInt (((c1_w * c1_n) / c1_sss) + 0,5); / / ns = število diapozitivov

c1_sss + = c1_marginFactor; / / sss = slide korak velikost, 51 za marže

Zahteve: Mootools 1.2

Poglej Demo plinov v Download Mootools Carousel z ostranjevanjem Version 1.0 (Downloaded 1999 krat)

MooRating je preprost (navzkrižno brskalnik, seveda, kot ga uporablja moč knjižnice MooTools), lahki in odlično Mootools temelji rating rešitev. To ni označilo kot "zvezdic", preprosto zato, ker bi lahko ocena slika je kot ste jih izbrali (sem iz Stars, barov in srca s prenosom, vendar lahko ustvarite svojo paleto in šele spusti v).

Kako to izgleda nekako takole:

	Ocena Mootools z različnimi podobami Poglej Demo
	Ocena Mootools z odstotkom vrednosti Poglej Demo
	Ocena Mootools z delno vrednosti Poglej Demo

Prenos Mootols Zvezdic Script (Downloaded 721 krat)

Ocena podatki: celo število, Decimal ali odstotek
Trenutno je scenarij zasnovan tako, da prikazujejo bonitetne podatke kot celoto vrednot (1,2,3,4,5), v decimalk (1,24, 3,45, itd) ali v odstotkih (12%, 55% itd.) Izbira za prikaz podatkov v katero od omenjenih oblik se lahko preprosto nastavite tako, da spremenite nekaj zastavo vrednot v JavaScript (moorating.js)
V osnovi obstajata dve e dve zastavi, da igrajo z, za prikaz vrednosti v obliki po vaši izbiri ...

var inpercent = false; / / nastavite zastavo na true, če potrebujete odstotne vrednosti, ki se prikaže
var isFractional = false / / Nastavite na true, če želite deljenim vrednote, kot 1,24 in 1,25 in 4,56 in ne 1,2 ... 5

In dont mislim, da obstaja razlaga za to potrebna. Še več. Scenarij je zelo preprosta. Če veste, malo javascripting, lahko spremenite skript, da bi dobili kakršno koli prikazano vrednost. Na primer, če si hotel tri decimalna mesta naj bodo prikazane ... samo poteg scenarij, kot je spodaj ...

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

Posodabljanje Ocena vrednosti:
Jaz pristanišče moti pisanje vse AJAX skripte za posodabljanje ocen vrednosti, ker vem iz mojih izkušenj, da ni vedno vse namerava posodobiti bonitetno oceno takoj, ko je nekaj uporabnika stopnje. Vam je storiti karkoli hočeš z nazivno vrednostjo, Update, da z uporabo AJAX in ga predloži ali Set skrito vrednost polje obrazca, ki se predloži s celotno obliko itd

Funkcija updateRating (id, ocena) {
/ / Alert (id + "," + ocena);
/ / Za vsako ceno z ocenjevanjem
}

Obstaja funkcija v javascript, imenovano "updateRating". Ta funkcija je opravil ID za Ocena div, ugotoviti, kateri ocene (če obstaja več kot ena ocene na strani) je bil posodobljen in vrednost rating [updateRating (id, ocena)]. Lahko se odločite za karkoli hočeš s temi vrednostmi, kot sem že prej omenil.

Ocena slike: zvezde, srce, palice ali kaj, prosim
Spreminjanje ocene za katero koli od zgoraj navedenih vrst (zvezde, srca itd) je zelo preprosta. Samo ustvariti sliko, ki je podoben tistemu in ga spusti noter Ne pozabite, če ste spremenili ime slike, ne da potrebne spremembe v datoteki CSS, glej spodaj.

. Moostar {margin: 0px; padding: 0px; overflow: hidden; širina: 84px; višina: 20px; float: left; background: url ("stars.gif) ponavljajočih x;}
. Moostar span {float: left; margin: 0px; padding: 0px; zaslon: blok, širina: 84px; višina: 20px; text-decoration: none; text-alinea:-9000px; z-indeks: 20;}
. Moostar curr {background: url ("stars.gif) levo 25px;}.

Večina pripomočki ocene uporabite zvezdico in pol zvezdicami slike z miško nad dogodki na vsako zvezdo. Moo Ratings uporablja preprost Sprite slike kot ozadje za dosego zahtevane vizualne učinke z zelo nizko režijske stroške.

Zahteve: Mootools 1.2
Prenos Mootols Zvezdic Script (Downloaded 721 krat)

Sem iskal za brezplačno zabodena drsnika (drsnik z dvema gumbi, najkrajši in najdaljši) z uporabo mootools. Čeprav, sem našel nekaj dobro opravljeno dvojno zabodena drsnik na forumu mootools, samo problem je bil, da so vsi ti drsniki Trud je izbrano marker. Končno! Odločil sem se, da ustvarite svoj lasten. No! Jaz sem uporabo izvirno kodo in jo spremeniti, da imajo drsnik ozadje, ki je navedeno območje izbran vizualno, tako kot v mojem primeru spodaj. V BLUE področja kaže obseg vrednosti izbrane.

Poglej Različica 2.2 Demo | Download Mootools Double Lepljivek drsnik različice 2.2 (Downloaded 11880 krat)

Enostavno lahko spremenite videz in občutek območju kazalca (v modri v zgornjem primeru), drsnik gumb se drsnik progo s spreminjanjem slider.css kot je potrebno.

Ne spusti me komentar če se vam zdi, da je koristno.

Preden smo se morali ukvarjati z CSS, da ustvarite svoje postavitve strani, uskladi nekaj vsebine znotraj celice tabele zdelo Preprosto otroška igra. Preprosto nastavite "uskladiti" ali "valign" premoženje v tabeli, da imajo s poravnavo po vaši izbiri, kos torte!
Pri postavitvah CSS, čeprav imamo "navpično poravnati" premoženje za elemente, se ne zdi, da je tako enostavno, kot "uskladiti" ali "valign" lastnostmi. Če želite biti bolj specifiic "navpično poravnati" nikoli ne zdi, da reši vse vaše težave, še posebej, če so napisali kos CSS navzkrižno brskalnika.

Brez uporabe HTML tabel, problem centriranje na objektu, naj bo to slika ali del besedila, ki vsebuje v oddelku, je verjetno že vsak UI / CSS razvijalci nočna mora na neki točki. Ta problem še extrapolates na skrbi za poravnavo, če je predmet, ki se centered je dinamičen v naravi, to je, če je njegova višina je spremenljiva (neznano višina).

Čeprav ni znano, naravnost naprej rešitev, ki bi deloval po različnih brskalnikih, jih moramo obravnavati, je rešitev, da sem poskušal priti do ne zdi, da dela v nekaj brskalnikov, ki sem jo poskušala v (IE6, IE 7 , FF).

REŠITEV:
V brskalnikih, kot so Mozilla, ki Opera in Safari, ki čudno obnaša "navpično poravnati" premoženje je mogoče vložiti na svoje čute, le z nastavitvijo "Display" last vsebujejo delitev na "namizni celice" (zaslon: table-cell) .

Problem še vedno ostaja v IE družine brskalnikov, ki še ne zdi, da jasno, kaj morajo s "tabela celic" premoženje in ne poznajo, saj so, samo prezreti. Rešitev je navedeno spodaj, čeprav preprostih, oglasov nekaj več elementov DOM v vašem HTML, da bi se stvari zgodijo.

CSS in HTML izgleda takole
.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/> ogledov: 3456 </ p>
</ P>
</ P>

Rezultat izgleda takole: -

ogled demo tukaj plinov v prenosu izvorne datoteke (Downloaded 453 krat)

TOP Poravnava 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/> pogledov: 1234 </ p>
</ P>
</ P>

Rezultat izgleda takole: -

BOTTOM Poravnava 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/> pogledov: 1234 </ p>
</ P>
</ P>

Rezultat izgleda takole: -

ogled demo tukaj | Download tukaj

Izgleda, starosti, ker sem poskušal najti razumno rešitev za ta problem usklajevanja. Ampak sedaj s to rešitvijo, počutim se malo na miru.

Z upanjem, da nekega dne

• navpična poravnava, premoženje, CSS bo delovala tako kot to počne znotraj celice tabele, ne da bi veliko v bližini grmovja
• Najmanj, v katerem margin-top: avto in margin-bottom: avto bo, da je enak rezultat kot pri margin-left in margin-right nastavljeno na avto
• V brskalnika vojne bodo čez nekaj dan.
• Na voljo bo samo en brskalnik za VSE.

Prenesite CSS in HTML zgornje rešitve tukaj (Downloaded 453 krat) .. za razumljivosti, je CSS ni optimizirana

PS: In mimogrede, to so sličice nekaj slik ki sem jih kliknili ...

Saj ne, da obstaja le malo Lightbox-jev, ki jih lahko najdete, ko google. Vprašanje z večino lightboxes da sem našel je bilo, da vse je zdelo, da uporabljajo eno ali drugih težkih okvire JavaScript teže, kot so jQuery, prototip, MOOTOOLS in podobno. Vsi so kul in šopirjenje videti. Toda, če vaša zahteva je, "A rad preprosto in Lahka pošta scenarij svojem mestu", potem je tukaj;

Nekaj ​​lepih lastnosti tega Lightbox

1. Zelo lahka
   a. 4KB skriptov, ko pakirane (8 kb razpakirati)
   b. 2 kb CSS
   c. Nekaj ​​vrstic HTML za posodo pošta
2. Enostavno razumeti in izvajati
3. Imajo lahko več Lightboxes na isti strani.
4. Enako Lightbox Posoda se uporablja za prikaz, drugačno vsebino, ki je vključena kot ločeno skrite delitve na stran), odvisno od povezave / opcije, ki je kliknil.
5. Samodejno centrov, ob upoštevanju vseh dejavnikov, kot so, višino in širino Window (ločljivost zaslona), stran se pomaknite znesek, višina vsebine Lightbox
6. Testiran v IE 7 in FF

Poglej Demo |
Prenesite Lightbox Vir Zip (Downloaded 1810 krat)

jo.js in jo_pack.js [pakirani version]: - preprosto množica objektov JavaScript [UL], ki vsebuje elementov, ki okno in skripte položaja dokumentov. Odprete lahko JO.JS, če želite, da bi dobili vaše roke umazane z nekaj Napredno Javascripting, ustvarjanje abstraktnih nalog, razširitev lastnosti elementov in take. Če ni preveč v Javascripting, ga pusti pri miru.

lightbox.js, lightbox_pack.js [zapakirane version]: - Vsebuje svetlobne skripte upraviteljev polje. Če ste stran oblikovalec, odgovoren tudi z izvajanjem osebni album na strani, morate razumeti LightBoxManager. LightBoxManager v bistvu vsebuje le dve funkciji showLightBox in closeLightBox.

lightbox.css: - če veste, CSS, lahko igral s lightbox.css, da prilagodite videz-n-počutili lightbox.css

index.html: Vzorec izvajanje Lightbox z dveh različnih vsebin

lb_underlay_bkg.png: - To je lahka / podob pregledno sliko, ki se uporablja ozadje za podlogo pošta [podlogo plast pod lighbox, ki preprečuje uporabniku, s klikom na katero koli drugo osebo, na strani, medtem ko je odprt Lightbox]. Uporabite lahko katero koli sliko ali celo trdne barve za ta namen, odvisno od strani oblikovanja in zahteve.

icon_lb_close.gif: - slike za tesno ročaj pošta v zgornjem desnem kotu svetlobe polje. Lahko uporabite katero koli sliko, kot vsak model

Poglej Demo |
Prenesite Lightbox Vir Zip (Downloaded 1810 krat)

Prosimo vas, da nam je vaše komentarje in povratne informacije ...