Uttrycka det

Med en mängd Karuseller där ute, många för Mootools också, bestämde jag mig ändå för att skriva min egen Carousel klass, för några goda skäl
1. Önskade ett personsökarsystem funktion (för att kunna hoppa en speciell bild / steg i karusellen).
2. Wanted frihet med placeringen av VÄNSTER och HÖGER knapparna / länkar, vart jag vill.
3. Mer kontroll över Slide steg.

Jag lyckades skapa en ny Carousel, med ovanstående egenskaper ... enligt nedan ... Känn dig fri att föreslå ändringar du skulle behöva!

Mitt exempel ser ut så här ... [ View Demo ]

Visa Demo | Ladda ner Mootools karusell med Paging Version 1.0 (Nedladdat 1994 gånger)

1. Karusellen Paging

Du kan enkelt lägga till paging till karusellen, helt enkelt genom att sätta paging flaggan, vilket är sista parater passerade när du skapar instans av MooCarousel till sann (vill personsökning) eller falskt (donot vill personsökning).

var carousel1 = new MooCarousel ('carousel1_wrapper', 'carousel1_items_container "," carousel1_moveleft "," carousel1_moveright ", c_ns, c_sss, true); / / NS = antal bilder, SSS = slide stegstorlek

Och självklart kan du ändra utseendet-n-känner av dessa personsökning achors som du vill genom att ändra sin CSS.

. Carousel_paging {text-align: höger, marginal: 5px 10px 0 0;}
. Carousel_paging ström, carousel_paging sidan {disposition: none; bredd:... 15px, höjd: 15px; line-height: 15px; text-align: center; display: block; float: left; Bakgrund: # D8D8EB; margin: 0 1px 0 0, text-decoration: none;}

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

Tja! Det finns en liten fråga dock, om den är inställd The personsökning ankare, så kommer det att bli genereras alltid efter Carousel komponenten. Jag ville göra det dynamiskt också, men då bara för att hålla Script för att blåsa av proportioner, bestämde jag mig för att hoppa över den.
Men du vet lite Javascript, kan du enkelt ändra koden personsökning generationen i MooCarousel klassen att behaga dina behov.

2. Anpassa Vänster och höger ikoner

Du kan ändra placeringen, bilder eller något displat egendom vänster och höger knapparna enkelt genom att spela runt med CSS. för att kunna ändra placeringen av vänster och höger buttoms var den verkliga orsaken för mig att rätta mig vår Carousel klass.
Eftersom denna MooCarousel klass, accepterar ID av dessa knappar, kan du placera faktiskt dessa knappar någonstans på sidan, om ni ... det behöver inte vara i elementet hierarkin, som i mitt exempel.

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: förhållande, bredd: 23px; höjd: 20px; float: left; markören: pointer;}

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

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

3. Anpassa Slide Steg

Vad menar jag MINA Anpassa SLIDE steg?
De flesta Karuseller skjuta full med det synliga fönstret. Så säger du hade fyra punkter (som i mitt exemplet ovan), kommer den att glida alla fyra objekt. Med denna Carousel Component, passerar du antalet bilder och steget storlek du väljer.

var carousel1 = new MooCarousel ('carousel1_wrapper', 'carousel1_items_container "," carousel1_moveleft "," carousel1_moveright ", c_ns, c_sss, true);
c_ns = antal bilder c_sss = slide stegstorlek

Också, enligt min example1 har jag calcuted storlek bilden steget, bygger på logik där, jag vet antal artiklar, bredd på varje objekt och de marginaler som har gett efter varje objekt i min CSS.

/ * För SUPKALAS 1 * /

var c1_w = 92, / / ​​SUPKALAS Föremål bredd

var c1_n = 10, / / ​​totala antalet objekt Jämförelsetalen SUPKALAS

var c1_pp = 4 / / Antal Jämförelse SUPKALAS Artiklar perpage

var c1_marginFactor = 51;

var c1_sss = c1_w * c1_pp, / / ​​SSS = slide stegstorlek

var c1_ns = parseInt (((c1_w * c1_n) / c1_sss) + 0,5), / / ​​NS = antal bilder

c1_sss + = c1_marginFactor, / / ​​SSS = slide steg storlek 51 för marginalerna

Krav: Mootools 1,2

Visa Demo | Ladda ner Mootools karusell med Paging Version 1.0 (Nedladdat 1994 gånger)

MooRating är en enkel (kors webbläsare, naturligtvis eftersom den använder kraften i MooTools biblioteket), lätta och utmärkt Mootools baserat rating lösning. Det är inte betecknas som "Star Rating", helt enkelt därför kunde rating bilden vara som du väljer (jag har lämnat Stars, barer och hjärter med hämtningen, men du kan skapa din egen sort och bara släpp den i).

Hur ser det ut:

	MooTools Betyg olika bilder Visa demo
	MooTools Betyg med procentuella värden Visa demo
	MooTools Betyg med Bråk värden Visa demo

Ladda Mootols Star Rating Script (Nedladdat 718 gånger)

Betyg data: heltal, decimal eller procent
För närvarande skriptet är utformad för att visa betyg data som hela värden (1,2,3,4,5), i decimaler (1,24, 3,45 mm) eller i procent (12%, 55% etc). Valet att visa data i något av de nämnda format kan ställas in helt enkelt genom att ändra några flagga värden inom JavaScript (moorating.js)
I princip finns det två e två flaggor att leka med, för att visa värden i det format du önskar ...

var inpercent = false; / / Ställ flaggan till true om du behöver procentuella värden som ska visas
var isFractional = false / / Ställ till true om du vill bråktal som 1,24, 1,25, 4,56 i stället för 1,2 ... 5

Och jag tror inte det finns någon förklaring krävs för detta. Dessutom. Skriptet är mycket enkel. Om du vet lite javascripting, kan du ändra skriptet att få någon form av visat värde. För t.ex. om du ville tre decimaler som ska visas ... bara justera skriptet som nedan ...

if (isFractional) {if (x <= 5 | | x> = 0) moostartval [i] innerHTML = formatNumber (x, 3),.} är / / 2 ändras till 3
else {moostartval [i] innerHTML = Math.round (x).

Uppdatering Betyg Värde:
Jag har icke brytt skriva några AJAX skript för att uppdatera Ratings värdet, eftersom jag vet av min erfarenhet att inte alltid för avsikt att uppdatera RATING så snart som användaren priser något. Du är fri att göra vad du vill med det nominella värdet, Uppdatera det med AJAX eller skicka det eller Ställ in ett dolt värde formulärfält som ska läggas fram med hela form etc.

Funktionen updateRating (id, rating) {
/ / Registrering (id + "," + rating);
/ / Gör vad åldersmärkning
}

Det är funktion i javascript som kallas "updateRating". Denna funktion har passerat ID för Rating Div, för att identifiera om vilka betyg (om det finns mer än en betyg på sidan) uppdaterades och värdet av behörigheten [updateRating (id, rating)]. Du kan välja att vad du vill med dessa värden, som jag nämnde tidigare.

Betyg Bild: stjärnor, hjärtan, Barer eller något du önskar
Ändra betyget för någon av de ovannämnda typerna (stjärnor, hjärtan etc.) är mycket enkel. Skapa bara en bild som liknar den som en och släpp in den Kom ihåg att om du ändrar namn på bilden, gör nödvändiga ändringar i CSS-fil, se nedan.

. Moostar {margin: 0px; padding: 0px; overflow: hidden, bredd: 84px; höjd: 20px; float: left; bakgrund: url ('stars.gif) repeat-x;}
. Moostar span {float: left; margin: 0px; padding: 0px; display: block; width: 84px; höjd: 20px; text-decoration: none; text-indent:-9000px; z-index: 20;}
.. Moostar Curr {background: url ('stars.gif') kvar 25px;}

De flesta betyg widgets Använd stjärniga och halv-stjärniga bilder med musen över händelser på varje stjärna. Moo betyg använder en enkel sprite bild som en bakgrundsbild för att uppnå de nödvändiga visuella effekter med en mycket låg overhead.

Krav: Mootools 1,2
Ladda Mootols Star Rating Script (Nedladdat 718 gånger)

Jag hade letat efter en fästs två skjutreglage (löpare med två rattar, minimum och maximum) med MooTools. Fast, jag hittade ett par bra gjort dubbla fästs reglaget i MooTools forumet var det enda problemet att alla dessa löpare uppkomsten har det valda området markören. Äntligen! Jag bestämde mig för att skapa min egen. Tja! Jag gjorde använder den ursprungliga koden och ändra det att ha ett reglage bakgrund som anges området markerat visuellt, som i mitt exempel nedan. De blå områdena visar intervallet av värde valts.

Visa version 2,2 Demo | Ladda ner Mootools Dubbel Pinned Slider Version 2.2 (Nedladdat 11808 gånger)

Du kan enkelt ändra utseendet och känslan i intervallet indikatorn (i blått i exemplet ovan), Slider ratten, reglaget spår genom att ändra slider.css behov.

Tappa mig en kommentar om du tycker det användbart.