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 2000 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 2000 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 721 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 721 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 11888 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.

Innan vi hade att göra med CSS för att skapa våra sidlayouter, anpassa visst innehåll i en tabellcell verkade bara en barnlek. Ställ bara in "justera" eller "valign" egendom i tabellen att anpassningen av ditt val, piece of cake!
Med CSS-layouter, även om vi har "vertikal-align" egendom för elementen, verkar det inte vara så enkelt som "justera" eller "valign" egenskaper. För att vara mer specifiic den "vertikala-align" aldrig verkar lösa alla dina problem, särskilt om är skriva en bit olika webbläsare CSS.

Utan användning av HTML-tabeller, problemet med centrering på objekt, vare sig det en bild eller text i en innehåller division, har nog varit alla UI / CSS utvecklare mardröm någon gång. Detta problem extrapolerar ytterligare dina bekymmer att anpassa, om objektet som ska centreras är dynamisk till sin natur, det vill säga när dess höjd är variabel (okänd höjd).

Men det finns ingen känd rättfram lösning som skulle fungera inom alla webbläsare vi har att göra med, den lösning som jag har försökt att komma fram till inte verkar fungera i de få webbläsare som jag har provat det i (IE6, IE 7 , FF).

LÖSNING:
I webbläsare som Mozilla, Opera och Safari, Den märkliga uppför "vertikal-align" egendom kan föras till sina sinnen, helt enkelt genom att ställa in "display" egendom innehåller divisionen till "table-cell" (display: table-cell) .

Problemet är fortfarande med IE familj webbläsare som inte ännu inte tycks förstå vad de ska med "table-cell" egendom och okunniga som de är, de bara ignorera det. Lösningen nedan, men enkla, annonser några mer DOM element i HTML för att få saker att hända.

CSS och HTML ser ut så här
.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/> Visningar: 3456 </ div>
</ Div>
</ Div>

Resultatet ser ut så här: -

visa demo här | Ladda ner Källfiler (Nedladdat 453 gånger)

TOP Rikta 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/> Visningar: 1234 </ div>
</ Div>
</ Div>

Resultatet ser ut så här: -

BOTTEN Rikta 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/> Visningar: 1234 </ div>
</ Div>
</ Div>

Resultatet ser ut så här: -

visa demo här | Ladda ner här

Verkar som åldrar, eftersom jag försökte att hitta en rimlig lösning på denna anpassning problem. Men nu med denna lösning, känner jag på lite lugn.

Med en förhoppning om att en dag

• vertikal inriktning fastighet i CSS kommer att fungera som det gör i en tabellcell, utan att behöva slå mycket kring het gröt
• Åtminstone sätta margin-top: Auto och margin-bottom: auto, kommer att ge samma resultat som med margin-left och margin-rätten inställd på auto
• De webbläsaren krig kommer att vara över en dag.
• Det kommer bara en webbläsare för ALLA.

Hämta CSS och HTML-koden för ovanstående lösning här (Nedladdat 453 gånger) .. För begriplighet är CSS inte optimerats

PS: Och förresten, de är miniatyrer av några bilder jag har klickat ...

Inte för att det finns bara ett fåtal album är att du kan hitta när du google. Problemet med de flesta av de ljusbord som jag fann var att de alla verkade använda det ena eller andra tunga vikt ramar JavaScript som jQuery, Prototype MooTools och liknande. De är alla svala och flott söker. Men om ditt krav är "men jag vill ha en enkel och lätt Lightbox script för min sida", så här är det;

Några trevliga funktioner i ljusbord

1. Mycket lätt
   en. 4KB av manus när packade (8 kb packas upp)
   b. 2 kb av CSS
   c. Få rader HTML för ljusbord behållaren
2. Enkel att förstå och tillämpa
3. Kan ha flera Ljusbord på samma sida.
4. Samma ljusbord behållaren används för att visa, olika innehåll (som separat ingår som dolda divisioner i sidan), beroende på länken / alternativ som klickas.
5. Automatiskt centreras, med hänsyn till alla faktorer såsom Fönster höjd och bredd (skärmupplösning), sidan bläddra belopp och höjden på innehållet i ljusbord
6. Testad i IE 7 & FF

Visa Demo |
Ladda ner Lightbox Källa Zip (Nedladdat 1810 gånger)

jo.js och jo_pack.js [packat version]: - en enkel uppsättning JavaScript-objekt [JO], som innehåller element, fönster och dokumentera skript positionering. Du kan öppna JO.JS om du vill få händerna smutsiga med några avancerade Javascripting, skapa abstrakta funktioner, sträckande element egenskaper och liknande. Om du inte för mycket i Javascripting, låta bli.

lightbox.js, lightbox_pack.js [packad version] - innehåller ljus skript låda manager. Om du är sidkonstruktör ansvarar också med att genomföra ljusbord på sidan, måste du förstå LightBoxManager. LightBoxManager innehåller i princip bara två funktioner showLightBox och closeLightBox.

lightbox.css: - Om du vet CSS, kan du spela runt med lightbox.css för att anpassa utseendet-n-känner lightbox.css

index.html: Exempel genomförandet av ljusbord med två olika innehåll

lb_underlay_bkg.png: - Detta är lätt / lik genomskinlig bild som används bakgrunden till ljusbord underlaget [underlaget är lagret under lighbox, som hindrar användaren från att klicka någon annan enhet på sidan, medan ljusbord är öppen]. Man kan använda vilken bild eller en fast färg för detta ändamål, beroende på den sida konstruktion och kravet.

icon_lb_close.gif: - Bilden av nära ljusbord handtag högst upp till höger i ljuslåda. Kan använda valfri bild som per design

Visa Demo |
Ladda ner Lightbox Källa Zip (Nedladdat 1810 gånger)

Låt oss ha dina kommentarer och feedback ...

Om du är en av de där killarna (som mig), som ofta kontrollera CSS väl gjorde HTML-sida, för att få inspiration eller vad, så du kanske har märkt att vi har använt FAUX positionering (som redan nämnts i min tidigare artikel Vi är med Faux Absolut positionering: A Brilliant CCS layout )

Vi gjorde en del bra arbete på den här mallen, så tänkte att det skulle trevligt att dela det .... Ladda ner denna WordPress Theme (nedladdade 197 gånger)