Udtrykke det

Med en bred vifte af Karruseller derude, mange for Mootools så godt, alligevel besluttede jeg at skrive min egen Carousel klasse, for nogle gode grunde
1. Ønskede et paging funktion (for at kunne springe en bestemt lysbillede / trin i karrusellen).
2. Wanted frihed med placering af Knapperne Venstre og Højre / links, hvor nogensinde jeg venligst.
3. Mere kontrol over Slide Steps.

Det lykkedes mig at oprette en ny Karrusel, med de ovenstående funktioner ... som nedenfor ... Du er velkommen til at foreslå eventuelle ændringer du ville kræve!

Mit eksempel ser sådan her ud ... [ View Demo ]

Se demo | Hent Mootools Karrusel med Paging Version 1.0 (Downloaded 1983 gange)

1. Carousel Paging

Du kan nemt tilføje paging til din karrusel, blot ved at sætte personsøgning flag, som er sidste parater passerede samtidig skabe forekomst af MooCarousel til sand (ønsker paging) eller falsk (donot ønsker paging).

var carousel1 = new MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright', c_ns, c_sss, true); / / ns = antallet af dias, SSS = slide skridt størrelse

Og selvfølgelig kan du ændre udseende-n-feel af disse paging achors som du ønsker ved at ændre deres CSS.

. Carousel_paging {text-align: højre, margin: 5px 10px 0 0;}
. Carousel_paging strøm, carousel_paging side {omrids: none; bredde:... 15px; højde: 15px; line-height: 15px; tekst-align: center; display: block; float: left; baggrund: # D8D8EB; margin: 0 1px 0 0; text-decoration: none;}

. Carousel_paging a: hover, carousel_paging nuværende {background: # 4D4D9B; color: # ffffff;}..

Nå! Der er et lille problem dog, at personsøgning ankre hvis indstillet, så det vil blive genereret altid efter Carousel komponent. Jeg ønskede at gøre det dynamisk så godt, men så bare at holde Script til at blæse ud af proportioner, besluttede jeg mig for at springe den over.
Men du kender en lille Javascript, kan du nemt ændre paging generation koden i MooCarousel klassen at behage dine behov.

2. Tilpasning af venstre og højre Ikoner

Du kan ændre placeringen, billeder eller enhver displat ejet af de Knapperne Venstre og Højre simpelthen ved at spille rundt med CSS. at være i stand til at ændre placeringer af venstre og højre knapper nede var den egentlige årsag for mig at rette mit vores Carousel klasse.
Da dette MooCarousel klasse, accepterer id er af disse knapper, kan du faktisk placere disse knapper overalt på siden, hvis du har lyst ... det behøver ikke at være i elementet hierarki, som i mit eksempel.

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; position: relative; bredde: 23px; højde: 20px; float: left; markøren: pointer;}

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

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

3. Tilpasning Slide Steps

Hvad mener jeg MINE Tilpasning SLIDE Steps?
De fleste Karruseller skub fulde med af det synlige vindue. Så siger du havde fire elementer (som i min eksemplet ovenfor), vil den glide alle de fire elementer. Med denne Carousel Komponent, passerer du antallet af dias og trinstørrelsen efter eget valg.

var carousel1 = new MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright', c_ns, c_sss, true);
c_ns = antallet af dias, c_sss = slide skridt størrelse

Også i min Eksempel1 jeg har calcuted slide skridt størrelse, baseret på logik, hvor jeg kender antallet af elementer, bredde på hvert punkt, og de marginer, der har givet efter hvert emne i min CSS.

/ * For Carousal 1 * /

var c1_w = 92; / / Carousal Item Bredde

var c1_n = 10; / / Antal af Sammenligningscykel Carousal varer

var c1_pp = 4 / / Antal Sammenligningscykel Carousal elementer perpage

var c1_marginFactor = 51;

var c1_sss = c1_w * c1_pp; / / sss = slide skridt størrelse

var c1_ns = parseInt (((c1_w * c1_n) / c1_sss) + 0,5) / / ns = antallet af dias

c1_sss + = c1_marginFactor; / / sss = slide skridt størrelse 51 for margener

Krav: Mootools 1.2

Se demo | Hent Mootools Karrusel med Paging Version 1.0 (Downloaded 1983 gange)

MooRating er en simpel (cross browser, selvfølgelig, som det anvender den magt Mootools biblioteket), lette og fremragende Mootools baseret bedømmelse løsning. Det er ikke betegnes som "Star Rating", simpelthen fordi, kunne bedømmelse billedet være som du vælger (Jeg har givet Stjerner, Barer og hjerter med download, men du kan oprette din egen række og bare slippe det i).

Hvordan det ser ud:

	Mootools Rating med forskellige billeder Se demo
	Mootools Rating med procent-værdier Se demo
	Mootools Rating med Fractional værdier Se demo

Hent Mootols Stjernetildeling Script (Downloaded 716 gange)

Rating data: hele tal, Decimal eller Procent
I øjeblikket scriptet er designet til at vise rating-data, som hele værdier (1,2,3,4,5), i decimaler (1,24, 3,45 osv.) eller i procenter (12%, 55% osv.). Valget at vise data i nogen af ​​de nævnte formater kan indstilles ved blot at ændre nogle flag værdier i javascript (moorating.js)
Grundlæggende er der to e to flag at lege med, for at vise værdier i form af dit valg ...

var inpercent = false; / / Sæt dette flag til sand, hvis du har brug procentvise værdier, der skal vises
var isFractional = false / / Sæt denne til sand, hvis du ønsker brøkdele af værdier som 1,24, 1,25, 4,56 i stedet for 1,2 ... 5

Og jeg tror ikke der er nogen forklaring påkrævet for denne. Endvidere. Scriptet er meget simpelt. Hvis du kender lidt javascripting, kan du ændre scriptet til at få nogen form for viste værdi. For eksempel hvis du ønsker tre decimaler der skal vises ... blot at justere scriptet som nedenfor ...

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

Opdatering Rating Værdi:
Jeg har ikke generet skrive enhver AJAX-scripts til at opdatere Ratings værdi, fordi jeg ved fra min erfaring, at det ikke altid behøver det ikke agter at opdatere rating som snart brugeren satser noget. Du er fri til at gøre hvad du vil med den nominelle værdi, Opdater det ved hjælp af AJAX eller forelægger det eller indstille en skjult form field værdi, der skal indsendes med hele formularen osv.

Funktionen updateRating (id, rating) {
/ / Alert (id + "," + rating);
/ / Gør hvad med evaluering
}

Der er funktion i javascript kaldet "updateRating". Denne funktion er blevet passeret ID af Rating Div., for at identificere, hvilke vurderinger (hvis der er mere, at man ratings på siden) er blevet opdateret, og værdien af ​​den vurdering [updateRating (id, rating)]. Du kan vælge at hvad du vil med disse værdier, som jeg nævnte tidligere.

Rating Billede: Stjerner, hjerter, Barer eller noget du har lyst
Ændring af bedømmelse til nogen af ​​de ovennævnte typer (stjerner, hjerter osv.) er meget enkel. Du skal blot oprette et billede svarende til det medfølgende og slippe det i. Husk, hvis du ændrer navnet på billedet, skal du foretage de nødvendige ændringer i CSS-fil, se nedenfor.

. Moostar {margin: 0px; padding: 0px; overløb: skjult, bredde: 84px; højde: 20px; float: left; baggrund: url ('stars.gif') repeat-x;}
. Moostar span {float: left; margin: 0px; padding: 0px; display: block; bredde: 84px; højde: 20px; text-decoration: none; text-indent:-9000px; z-index: 20;}
.. Moostar curr {background: url ('stars.gif') til venstre 25px;}

De fleste vurderinger widgets bruge stjerne og halv-stjernede billeder med musen over begivenheder på hver stjerne. Moo Ratings bruger en simpel sprite billede som et baggrundsbillede til at opnå den krævede visuelle effekter med en meget lav overhead.

Krav: Mootools 1.2
Hent Mootols Stjernetildeling Script (Downloaded 716 gange)

Jeg havde været på udkig efter en dobbelt pinned skyder (slider med to knapper, minimum og maksimum) ved hjælp af Mootools. Men, jeg fandt et par veludført dobbelt fastgjort skyderen i MooTools forum, Det eneste problem var, at alle disse skydere fordybning har det markerede område markør. Endelig! Jeg besluttede at lave mit eget. Nå! Jeg gjorde bruge den oprindelige kode og ændre det at have en skyder baggrund, der er angivet intervallet valgt visuelt, som i mit eksempel nedenfor. De blå felter angiver området af værdi valgt.

Vis Version 2,2 demo | Hent Mootools Dobbelt Pinned Slider Version 2.2 (Downloaded 11558 gange)

Du kan meget nemt ændre udseendet og fornemmelsen af ​​intervallet indikator (i blåt i ovenstående eksempel), skyder knop, skyderen sporet ved at ændre slider.css efter behov.

Undgå drop mig en kommentar hvis du finder det nyttigt.

Inden vi var nødt til at beskæftige sig med CSS til at skabe vores side layouts, som bringer noget af indholdet i en tabelcelle syntes bare en leg. Du skal blot indstille "justere" eller "valign" ejendom i tabellen for at få tilpasningen af dit valg, stykke kage!
Med CSS layout, selv om vi har "lodret-align" ejendom for de elementer, synes det ikke at være så simpelt som "tilpasse" eller "valign" egenskaber. For at være mere specifiic den "lodret-align" synes aldrig at løse nogen af dine problemer, især hvis der skriver et stykke af cross-browser CSS.

Uden brug af HTML-tabeller, er problemet med centreret om objektet er det et billede eller en tekst i en holdigt division, har sandsynligvis været hver UI / CSS udviklere mareridt på et tidspunkt. Dette problem yderligere ekstrapolerer dine bekymringer for at afstemme, om objektet til at være centreret er dynamisk af natur, dvs når dets højde er variabel (ukendt højde).

Selv om der er ingen kendte ligetil løsning, der ville arbejde på tværs af forskellige browsere, vi har at gøre med, den løsning, som jeg har forsøgt at nå frem til synes at arbejde i de få browsere, jeg har prøvet det i (IE6, IE 7 , FF).

LØSNINGEN:
I browsere som Mozilla, Opera og Safari, Det mærkelige opfører sig "lodret-align" ejendom kan bringes til fornuft, blot ved at sætte "display" ejendom indeholder division til "table-celle" (display: table-celle) .

Problemet er stadig med IE familie af browsere, som ikke endnu ikke synes at forstå, hvad der skal med "table-celle" ejendom og uvidende som de er, de bare ignorere det. Løsningen nedenfor, men simple, annoncer få mere DOM elementer til din HTML for at gøre tingene ske.

CSS og HTML ser sådan ud
.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 således ud: -

se demo her | Hent kildefiler (Downloaded 450 gange)

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 således ud: -

BUND 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 således ud: -

se demo her | Hent her

Synes lige aldre, da jeg prøvede at finde en fornuftig løsning på denne tilpasning problem. Men nu med denne løsning, føler jeg på lidt fred.

Med et håb om at en dag

• vertikal-tilpasning ejendom i CSS vil arbejde som det gør i en tabelcelle, uden at slå meget om den varme grød
• Mindst, sætte margin-top: auto og margin-bottom: auto, vil give det samme resultat som med margin-venstre og margin-rigtige sæt til auto
• De Browser krige vil være over en dag.
• Der vil kun én browser for ALLE.

Download CSS og HTML af ovennævnte løsning her (Downloaded 450 gange) .. for forståelighed, er CSS ikke er blevet optimeret

PS: Og ved den måde, er dem, miniaturer af nogle billeder, jeg har klikket ...

Ikke at der kun er et par LightBox s, som du kan finde, når du google. Spørgsmålet med de fleste af de lightboxer, som jeg fandt var, at de alle syntes at bruge den ene eller de andre tunge vægt JAVASCRIPT rammer som jQuery, Prototype, Mootools og lignende. De er alle cool og swanky søger. Men hvis dit krav er "men jeg ønsker en ENKEL OG LET LightBox SCRIPT til min side", så her er det;

Nogle gode funktioner i denne lightbox

1. Meget lys
   en. 4KB af scripts, når pakket (8 kb udpakket)
   b.. 2 kb af CSS
   ca. Par linjer i HTML til lightbox container
2. Nem at forstå og implementere
3. Kan have flere lightboxer på den samme side.
4. Det samme lightbox container bruges til at vise, forskelligt indhold (der er separat indgår som skjulte afdelinger i siden), afhængigt af linket / option, der er klikket.
5. Automatisk centrerer sig, idet der tages hensyn til alle faktorer, såsom vinduets højde og bredde (skærmopløsning), side rulle mængde og højden af ​​indholdet af lightbox
6. Testet i IE 7 og FF

Se demo |
Hent Lysbord Kilde Zip (Downloaded 1792 gange)

jo.js og jo_pack.js [pakket version]: - et simpelt sæt af JavaScript-objekter [JO], som indeholder elementer, vindues-og dokument positionering scripts. Du kan åbne JO.JS hvis du ønsker at få dine hænder beskidte med nogle Advanced Javascripting, skaber abstrakte funktioner, der strækker sig element egenskaber og sådan. Hvis du ikke for meget i Javascripting, Lad det alene.

lightbox.js, lightbox_pack.js [pakkede version]: - indeholder Lyserammen leder scripts. Hvis du er sidedesigneren, også er ansvarlig med at gennemføre lightbox på siden, er du nødt til at forstå LightBoxManager. LightBoxManager grundlæggende indeholder kun to funktioner showLightBox og closeLightBox.

lightbox.css: - Hvis du kender CSS, kan du lege med lightbox.css at tilpasse udseendet-n-feel lightbox.css

index.html: Prøve gennemførelse af lightbox med to forskelligt indhold

lb_underlay_bkg.png: - Det er let / simi gennemsigtigt billede, der bruges baggrunden for lightbox underlaget [underlag er laget under lighbox, der forhindrer brugeren i at klikke på en anden enhed på siden, mens lightbox er åben]. Du kan bruge ethvert billede eller en farve til dette formål, afhængigt af sidedesign og krav.

icon_lb_close.gif: - Billedet for tæt lightbox håndtag øverst til højre af lyskassen. Kan bruge et billede pr design

Se demo |
Hent Lysbord Kilde Zip (Downloaded 1792 gange)

Lad os få dine kommentarer og feedback ...