Uttrykke IT

Med en rekke Karuseller der ute, mange for MooTools også, jeg fortsatt besluttet å skrive min egen Carousel klasse, for noen gode grunner
1. Ønsket en personsøker funksjon (for å kunne hoppe et bestemt lysbilde / trinn i karusellen).
2. Ønsket frihet med plassering av Venstre og Høyre / linker, der jeg noen gang vil.
3. Mer kontroll over Slide trinn.

Jeg klarte å lage en ny Carousel, med de ovennevnte funksjoner ... som under ... gjerne foreslå noen endringer du måtte trenge!

Mitt eksempel ser slik ut ... [ Se demo ]

Se demo | Last ned MooTools karusell med Paging Version 1.0 (Nedlastet 1998 ganger)

1. Carousel Personsøker

Du kan enkelt legge til personsøker til karusellen din, ganske enkelt ved å sette paging flagg, som er siste parater passerte mens du oppretter forekomsten av MooCarousel til sann (ønske paging) eller falsk (donot ønsker paging).

Var carousel1 = ny MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright', c_ns, c_sss, true); / / ns = antall lysbilder, sss = lysbilde steg størrelse

Og selvsagt kan du endre utseende-n-følelse av disse personsøk achors som du vil ved å endre deres CSS.

. Carousel_paging {text-align: right; margin: 5px 10px 0 0;}
. Carousel_paging gjeldende, carousel_paging side {skisse: none; bredde:... 15px; høyde: 15px; linje-høyde: 15px; text-align: center; display: block; float: left; bakgrunn: # D8D8EB; margin: 0 1px 0 0; text-decoration: none;}

. Carousel_paging a: hover, carousel_paging nåværende {background: # 4D4D9B; color: # FFFFFF;}..

Vel! det er en liten sak om, sidevekslingen ankere hvis sett, så vil det bli generert alltid etter Carousel komponenten. Jeg ønsket å gjøre det dynamisk også, men da bare for å holde Script for å blåse ut av proporsjoner, bestemte jeg meg for å hoppe over det.
Men du vet litt Javascript, kan du lett endre sidevekslingsfilen generasjon koden i MooCarousel klassen å behage dine behov.

2. Tilpasse Venstre & Høyre Ikoner

Du kan endre plasseringen, bilder eller noen displat eiendom på venstre og høyre knapp bare ved å spille rundt med CSS. å kunne endre plasseringer av Venstre og Høyre buttoms var selve grunnen for meg til høyre for meg vår Carousel Class.
Siden dette MooCarousel klasse, aksepterer id er av disse knappene, kan du faktisk plassere disse knappene hvor som helst på siden, hvis du ber ... det trenger ikke å være i element hierarkiet, som i mitt eksempel.

Var carousel1 = ny 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; stilling: relative; bredde: 23px; høyde: 20px; float: left; markøren: pekeren;}

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

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

3. Tilpasse Slide Steps

Hva mener jeg Brukerdefinere SLIDE trinn?
De fleste Karuseller skyv fulle med av det synlige vinduet. Så sier du hadde fire elementer (som i mitt eksempelet ovenfor), vil den skyve alle de fire elementene. Med denne Carousel Component, passerer du antall lysbilder og steg størrelsen du ønsker.

Var carousel1 = ny MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright', c_ns, c_sss, true);
c_ns = antall lysbilder, c_sss = lysbilde steg størrelse

Også i mittnavn1 min har jeg calcuted raset trinnet størrelse, basert på logikk der, vet jeg antall elementer, bredde på hvert element, og marginene som har gitt etter hvert element i CSS min.

/ * For Carousal 1 * /

Var c1_w = 92; / / Carousal element Bredde

Var c1_n = 10; / / Antall sammenligning Carousal Elementer

Var c1_pp = 4 / / Antall sammenligning Carousal Elementer perpage

Var c1_marginFactor = 51;

Var c1_sss = c1_w * c1_pp; / / sss = lysbilde steg størrelse

Var c1_ns = parseInt (((c1_w * c1_n) / c1_sss) + 0,5); / / NS = antall lysbilder

c1_sss + = c1_marginFactor; / / sss = lysbilde skritt størrelse, 51 for marginer

Krav: MooTools 1.2

Se demo | Last ned MooTools karusell med Paging Version 1.0 (Nedlastet 1998 ganger)

MooRating er en enkel (kryss nettleser, selvfølgelig som den bruker makten til MooTools biblioteket), lette og utmerket MooTools basert vurdering løsning. Det er ikke betegnet som "Star Rating", ganske enkelt fordi kunne vurdering bildet være som du velger (jeg har gitt Stjerner, barer og hjerter med nedlastingen, men du kan lage din egen variasjon og bare slippe den i).

Hvordan det ser ut som:

	MooTools Rangering med forskjellige bilder Se demo
	MooTools Rangering med Prosentverdiene Se demo
	MooTools Rangering med brøkverdier Se demo

Last ned Mootols Stjerner Script (Nedlastet 718 ganger)

Rangering data: Heltall, Desimal eller prosentvis
Foreløpig skriptet er laget for å vise de reisende data som hele verdier (1,2,3,4,5), i desimaler (1,24, 3,45 etc) eller i prosenter (12%, 55% osv). Valget å vise data i noen av de nevnte formatene kan settes ganske enkelt ved å endre noen flagg verdier innenfor JavaScript (moorating.js)
I utgangspunktet er det to e to flagg å spille med, for å vise verdier i det formatet du ønsker ...

Var inpercent = false; / / Sett denne flagg til true, hvis du trenger prosentpoeng verdier som skal vises
Var isFractional = false / / Sett denne til true, hvis du ønsker brøkverdier som 1,24, 1,25, 4,56 snarere enn 1,2 ... 5

Og jeg tror ikke det er noen forklaring kreves for dette. Videre. Manuset er svært enkel. Hvis du vet litt javascripting, kan du endre skriptet til å få noen form for verdi vises. For eksempel hvis du ville ha tre desimaler som skal vises ... bare finpusse manuset som under ...

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

Oppdatering Rangering Value:
Jeg har ikke gidder skrive noen AJAX skript for å oppdatere Ratings verdi, fordi jeg vet fra min erfaring at ikke alltid gjør det til hensikt å oppdatere RATING så snart brukeren priser noe. Du er fri til å gjøre hva du vil med den nominelle verdien, oppdaterer du den ved hjelp av AJAX eller Send det eller ligger en skjult skjemafelt verdi, som skal leveres med hele skjemaet etc.

funksjon updateRating (id, rating) {
/ / Alert (id + "," + rating);
/ / Gjør alt MED RATING
}

Det er funksjon i javascript som heter "updateRating". Denne funksjonen har blitt passert IDen til vurdering div, å identifisere om hvilke karakterer (hvis det er mer at man stemmer på siden) ble oppdatert, og verdien av rettigheten [updateRating (id, rating)]. Du kan velge å hva du vil med disse verdiene, som jeg nevnte tidligere.

Rating Bilde: Stjerner, Hjerter, barer eller noe du vil
Endre karakter til noen av de ovennevnte typer (stjerner, hjerter osv.) er veldig enkel. Bare opprett et bilde som ligner på en forutsatt og slipp den i. Husk, hvis du endrer navnet på bildet, gjør nødvendige endringer i CSS-filen, se nedenfor.

. Moostar {margin: 0px; padding: 0px; overflow: hidden; bredde: 84px; høyde: 20px; float: left; bakgrunn: url ('stars.gif') repeat-x;}
. Moostar span {float: left; margin: 0px; padding: 0px; display: block; bredde: 84px; høyde: 20px; text-decoration: none; tekst-innrykk:-9000px; z-index: 20;}
.. Moostar curr {background: url ('stars.gif') forlot 25px;}

De fleste rangeringer widgets bruke stjerne og halv-stjerners bilder med musen over arrangementer på hver stjerne. Moo Ratings bruker en enkel sprite bildet som et bakgrunnsbilde for å oppnå de nødvendige visuelle effekter med en svært lav overhead.

Krav: MooTools 1.2
Last ned Mootols Stjerner Script (Nedlastet 718 ganger)

Jeg hadde vært på utkikk etter en dobbel fastklemt skyveknapp (stolpe med to knotter, minimum og maksimum) bruker MooTools. Selv gjorde jeg finne noen godt gjort dobbelt festet glidebryteren i MooTools forumet, var det eneste problemet at alle disse gliderne dint har det merkede området markør. Endelig! Jeg bestemte meg for å lage min egen. Vel! Jeg gjorde bruke den opprinnelige koden og endre det å ha en skyveknapp bakgrunn som indikerte intervallet valgt visuelt, som i mitt eksempel nedenfor. De blå områdene viser omfanget av verdi valgt.

Vis Versjon 2.2 Demo | Last ned MooTools Double Flyttet Slider Version 2.2 (Nedlastet 11847 ganger)

Du kan veldig enkelt endre utseendet området indikatoren (i blått i eksempelet ovenfor), glidebryteren knotten, glidebryteren spor ved å endre slider.css etter behov.

Du må slippe meg en kommentar hvis du finner det nyttig.

Før vi måtte håndtere CSS for å lage våre sideoppsett, samkjøre noe av innholdet i en tabellcelle virket bare som en lek. Bare still inn på "align" eller "valign" eiendom på bordet for å få plasseringen av ditt valg, stykke kake!
Med CSS-layouter, selv om vi har "vertikal-align" eiendom for elementene, ser det ikke ut til å være så enkelt som "align" eller "valign" egenskaper. For å være mer specifiic den "vertikal-align" aldri ser ut til å løse noen av dine problemer, spesielt hvis er skrive et stykke for kryss-nettleser CSS.

Uten bruk av HTML-tabeller, problemet med sentrering på objekt, det være seg et bilde eller tekst i en inneholder divisjon, har trolig vært hver UI / CSS utviklere mareritt på enkelte punkt. Dette problemet fremskriver ytterligere bekymringer å samkjøre, hvis objektet som skal sentreres er dynamisk i sin natur, dvs. når høyden er variabel (ukjent høyde).

Selv om det er ingen kjent rett frem løsning som ville fungere på tvers av nettlesere vi har å forholde seg til, den løsningen som jeg har forsøkt å komme fram til synes å arbeide i de få nettlesere som jeg har prøvd det i (IE6, IE 7 , FF).

LØSNING:
I nettlesere som Mozilla, Opera og Safari, Den merkelige oppfører "vertikal-align" eiendom kan bringes til sine sanser, bare ved å sette "display" egenskapen til beholdersiden divisjon til "table-cell" (display: table-cell) .

Problemet er fortsatt med IE familie av nettlesere, som vet ennå ikke synes å forstå hva som skal med "table-cell" eiendom og uvitende som de er, de bare ignorere det. Løsningen gitt nedenfor, men enkle, annonser noen flere DOM elementer til HTML for å få ting til å skje.

CSS og HTML ser slik ut
.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/> visninger: 3456 </ div>
</ Div>
</ Div>

Resultatet ser slik ut: -

se demo her | Last ned kildefiler (lastet ned 452 ganger)

TOP Juster 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/> visninger: 1234 </ div>
</ Div>
</ Div>

Resultatet ser slik ut: -

BOTTOM Juster 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/> visninger: 1234 </ div>
</ Div>
</ Div>

Resultatet ser slik ut: -

se demo her | Last ned her

Virker som aldre, siden jeg prøvde å finne en fornuftig løsning på dette problemet justering. Men nå med denne løsningen, føler jeg på litt fred.

Med et håp om at en dag

• vertikal justering eiendom i CSS vil fungere som den gjør i en tabellcelle, UTEN å måtte slå mye rundt grøten
• Minst, sette margin-top: auto og margin-bottom: auto, vil gi som samme resultat som med margin-venstre og marginen til høyre satt til auto
• De Nettleser kriger vil være over en dag.
• Det vil bare én nettleser for ALLE.

Last ned CSS og HTML av ovennevnte løsning her (Nedlastet 452 ganger) .. for forståelighet, er CSS ikke blitt optimalisert

PS: Og forresten, de er miniatyrbilder av noen bilder jeg har klikket ...

Ikke at det er kun noen få lysbordet er at du kan finne når du google. Problemet med de fleste av lysbokser som jeg fant var at de alle syntes å bruke den ene eller den andre tunge JavaScript-rammeverk som jQuery, Prototype, MooTools og det liker. De er alle kule og snobbete ser. Men hvis kravet er "men jeg ønsker en enkel og lett lysbordet SCRIPT for nettstedet mitt", så her er det;

Noen fine funksjoner på denne lightbox

1. Veldig lett
   en. 4KB av skript når pakket (8 kb utpakket)
   b.. 2 kb av CSS
   c.. Få linjer med HTML for lightbox container
2. Enkelt å forstå og implementere
3. Kan ha flere lysbokser på samme side.
4. Det samme lightbox container brukes til å vise, forskjellig innhold (som er separat inkludert som skjulte divisjoner i siden), avhengig av link / alternativet som er klikket.
5. Automatisk sentrerer seg, tatt i betraktning alle faktorer som, Window høyde og bredde (skjermoppløsning), side bla beløp og høyden på innholdet i lightbox
6. Testet i IE 7 og FF

Se demo |
Last Lightbox Kilde Zip (Nedlastet 1807 ganger)

jo.js og jo_pack.js [pakket versjon]: - et enkelt sett av JavaScript OBJECTS [JO], som inneholder element, vindu og dokumentere posisjonering skript. Du kan åpne JO.JS hvis du ønsker å få hendene skitne med litt avansert Javascripting, lage abstrakte funksjoner, som strekker element egenskaper og slikt. Hvis du ikke for mye i Javascripting, la det være.

lightbox.js, lightbox_pack.js [pakket versjon]: - Inneholde lysboks leder skript. Hvis du er side designer, også ansvarlig med å implementere lightbox på siden, må du forstå LightBoxManager. LightBoxManager inneholder i utgangspunktet bare to funksjoner showLightBox og closeLightBox.

lightbox.css: - Hvis du vet CSS, kan du leke deg med lightbox.css å tilpasse utseendet-n-føle lightbox.css

index.html: Eksempel gjennomføring av lightbox med to forskjellig innhold

lb_underlay_bkg.png: - Dette er light / Simi gjennomsiktig bilde som brukes bakgrunnen for lightbox underlag [Underlag er laget under lighbox, som hindrer brukeren i å klikke på en annen enhet på siden, mens lightbox er åpen]. Du kan bruke et bilde eller en farge for dette formålet, avhengig av siden design og kravet.

icon_lb_close.gif: - Bildet for tett lightbox håndtak øverst til høyre i lyskasse. Kan bruke et bilde som per design

Se demo |
Last Lightbox Kilde Zip (Nedlastet 1807 ganger)

Vennligst la oss få kommentarer og tilbakemeldinger ...

Hvis du er en av de gutta (som meg), som ofte sjekke CSS for godt laget HTML-siden, for å bli inspirert eller hva, så du kanskje har lagt merke til at vi har brukt Faux Positioning (som allerede nevnt i min tidligere artikkel Vi er bruker Faux absolutt posisjonering: A Brilliant CCS Layout )

Vi gjorde noen god jobb på denne malen, så tenkte det ville hyggelig å dele det .... Last ned denne WordPress Theme (lastet ned 197 ganger)