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 2001 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 2001 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 722 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 722 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 11935 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.

Hvis du er en af de fyre (som mig), der ofte kontrollere CSS på godt lavet HTML-side, for at blive inspireret eller hvad, så skal du måske har bemærket, at vi har brugt Faux Positionering (som allerede nævnt i min tidligere artikel Vi er hjælp Faux Absolut Positionering: En Brilliant CCS Layout )

Vi har et godt stykke arbejde på denne skabelon, så mente, det ville rart at dele det .... Hent Denne WordPress Theme (downloadet 198 gange)