Väljendades IT

Mis sorti Karussellid seal, paljud Mootools ka, ma siiski otsustasin kirjutada oma Carousel klass, mõned head põhjused
1. Tahan kutsungi tunnuseks (et oleks võimalik hüpata eriti slide / samm karussell).
2. Wanted vabadust paigutamine vasakule ja paremale nuppe / linke, kus iganes ma palun.
3. Rohkem kontrolli Slide Steps.

Ma ei suutnud luua uus karusell, eespool nimetatud funktsioone ... nagu allpool ... Julgelt soovitan muudatusi te eeldaks!

Minu Näide näeb välja selline ... [ View Demo ]

Vaata Demo | Lae Mootools Carousel Mis Piipar versioon 1.0 (Alla 1992 korda)

1. Karussell Piipar

Võid kergesti lisada kutsungi oma karusell, lihtsalt seades kutsungi lipp, mis on viimase parater läbinud luues astme MooCarousel tõeseks (soovi kutsungi) või vale (donot tahavad kutsungi).

var carousel1 = new MooCarousel (carousel1_wrapper "," carousel1_items_container "," carousel1_moveleft "," carousel1_moveright "c_ns, c_sss, true); / / ns = number of slaidid, sss = slide sammu suurus

Ja muidugi võite muuta look-n-tunnen neid kutsungi achors nagu soovite, muutes oma CSS.

. Carousel_paging {text-align: right; margin: 5px 10px 0 0;}
. Carousel_paging. Praegune. Carousel_paging. Lehekülje {ülevaade: none; laius: 15px; kõrgus: 15px; line-height: 15px; text-align: center; kuva: block; float: left; background: # D8D8EB; margin: 0 1px 0 0; text-decoration: none;}

. Carousel_paging: hover. Carousel_paging. Praegune {background: # 4D4D9B; color: # FFFFFF;}

Hästi! on väike küsimus küll, kutsungi ankrud kui see on seatud, siis saavad loodud alati pärast Carousel osa. Ma tahtsin, et oleks dünaamiline hästi, kuid siis lihtsalt hoida Script puhub välja proportsioone, otsustasin ma vahele jätta.
Aga tead vähe Javascript, siis võib kergesti muuta kutsungi põlvkonna koodi MooCarousel klassi palun teie vajadustele.

2. Kohandamine Left & Right Icons

Teil on võimalik muuta paigutus, pilte või mistahes displat vara vasakule ja paremale nuppe lihtsalt mängides CSS. et oleks võimalik muuta praktika Vasak ja parem buttoms oli tegelik põhjus, miks ma paremal minu oma Carousel klassi.
Kuna see MooCarousel klassi, võtab id on neid nuppe saab tegelikult panna neid nuppe suvalisse kohta leheküljel, kui siis ... see ei pea olema element hierarhia, nagu minu eeskuju.

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; seisukoht: suhteline, laius: 23px; kõrgus: 20px; float: left; kursor: pointer;}

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

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

3. Kohandamine Slide Steps

Mida ma mõtlen MY kohandamine SLIDE sammud?
Enamik Karussellid lükake täis on nähtav akna. Nii et öelda, sa olid 4 eset (nagu minu proov eespool), siis lükake kõik neli punkti. Selle Carousel Component, Jätate number slaidid ja sammu suurus oma valik.

var carousel1 = new MooCarousel (carousel1_wrapper "," carousel1_items_container "," carousel1_moveleft "," carousel1_moveright "c_ns, c_sss, true);
c_ns = number of slaidid, c_sss = slide sammu suurus

Ka minu example1 olen calcuted slide sammu suurus, mis põhineb loogika, kus ma tean mitmeid punkte, laius iga objekt ja marginaale, mis on antud pärast iga kirje minu CSS.

/ * For pummelung 1 * /

var c1_w = 92; / / pummelung toode Laius

var c1_n = 10; / / koguarv Võrdlemine pummelung Kirjed

var c1_pp = 4 / / arv Võrdlemine pummelung Kirjed perpage

var c1_marginFactor = 51;

var c1_sss = c1_w * c1_pp / / sss = slide sammu suurus

var c1_ns = parseInt (((c1_w * c1_n) / c1_sss) + 0,5) / / ns = number of slaidid

c1_sss + = c1_marginFactor / / sss = slide sammu suurus, 51 ja marginaalid

Nõuded: Mootools 1,2

Vaata Demo | Lae Mootools Carousel Mis Piipar versioon 1.0 (Alla 1992 korda)

MooRating on lihtne (cross brauser, muidugi kui ta kasutab võimu Mootools raamatukogu), kerge ja suurepärane Mootools põhineb hinnang lahendus. Ei ole nimetada "Star Rating" lihtsalt sellepärast, hinnang pilti võiks olla valida (olen tingimusel Stars, vardad ja südamed lae alla, kuid saate luua oma sordi ja lihtsalt tilk seda).

Kuidas see välja näeb:

	Mootools Rating erinevaid pilte Vaata Demo
	Mootools Rating koos protsent väärtused Vaata Demo
	Mootools Rating koos Fractional väärtused Vaata Demo

Lae Mootols Tärnireiting Script (laetud 718 korda)

Hinnang andmed: täisarv, kümnendsüsteemis või osakaal
Praegu skripti eesmärk on näidata hinnang andmed tervikuna väärtused (1,2,3,4,5), mis kümnendkohtade (1,24, 3,45 jne) või protsentides (12%, 55% jne). Valik näidata andmeid üheski mainitud formaate saab määrata lihtsalt muutes mõned lipu väärtuste javascript (moorating.js)
Põhimõtteliselt on kaks e 2 lipud mängida, väljapanek väärtused vormi oma valik ...

var inpercent = false; / / Määra selle lipu tõsi, kui teil on vaja protsent väärtused kuvada
var isFractional = false / / Määra tõeseks, kui soovite osaline väärtusi, nagu 1,24, 1,25, 4,56, mitte 1,2 ... 5

Ja ma ei usu, et on mingit selgitust selleks vaja. Lisaks. Script on väga lihtne. Kui tead veidi javascripting, siis võiks muuta skripti saada mingit väärtust näidata. Sest näiteks kui sa tahad kolm kohta pärast koma näidatakse ... lihtsalt näpistama skript alla ...

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

Ajakohastamine Rating Maksumus:
Ma pole vaevunud kirjutama kõik AJAX skriptid ajakohastamine Ratings väärtus, sest ma tean, minu kogemus, et mitte alati seda teha kavatsevad uuendada RATING niipea kui kasutaja määrad midagi. Oled vaba tegema mida iganes sa tahad hinnatava väärtuse kohta, ajakohastada seda kasutades AJAX või esitab selle või Määra varjatud kujul välja väärtus, mis tuleb esitada koos kogu vormi jne

funktsioon updateRating (id, hinnang) {
/ / Alert (id + "," + hinnang);
/ / Kas kõik KOOS RATING
}

On funktsiooni javascript nimega "updateRating". See funktsioon on läbinud ID Rating Div, et tuvastada, milliseid reitinguid (kui neid on rohkem kui 1 reitingud lehel), ajakohastati ja väärtuse hinnang [updateRating (id, hinnang)]. Sa võid valida, et mida iganes sa tahad neid väärtusi, nagu ma mainisin.

Hinnang Pilt: tähti, südameid, baari või midagi palun
Muutuvad hinnang iga eespool nimetatud liiki (tähed, südamed jne) on väga lihtne. Just luua pilt sarnane tingimusel ja tilk see sisse Pea meeles, kui muudad nime mainet, ei tee vajalikke muudatusi CSS faili, vt allpool.

. Moostar {margin: 0px; padding: 0px; overflow: hidden; laius: 84px; kõrgus: 20px; float: left; background: url ("stars.gif) repeat-x;}
. Moostar span {float: left; margin: 0px; padding: 0px; kuva: block; laius: 84px; kõrgus: 20px; text-decoration: none; teksti taane:-9000px; z-index: 20;}
. Moostar. Val {background: url ("stars.gif") jättis 25px;}

Enamik reitingud vidinaid kasutada täht ja 1/2-star pilte hiirega üle sündmuste iga täht. Moo Ratings kasutab lihtsate sprite pilt taustapilt, et saavutataks nõutud visuaalsed efektid väga väikese ressursikuluga.

Nõuded: Mootools 1,2
Lae Mootols Tärnireiting Script (laetud 718 korda)

Olin otsinud topelt Kinnitatud liugur (liugurit 2 nupud, minimaalne ja maksimaalne), kasutades Mootools. Kuigi, ma ei leia mõned hästi tehtud topelt Kinnitatud liugur Mootools foorum Ainuke probleem oli see, et kõik need liugurid varal on valitud vahemiku marker. Lõpuks! Ma otsustasin luua oma. Hästi! Ma tegin kasutada algset koodi ja seda muuta on liugur tausta märgitud vahemikus valitud visuaalselt, kui minu näites. BLUE valdkondades näitab valikut väärtus valinud.

Vaata Version 2,2 Demo | Lae Mootools Double Kinnitatud Slider Version 2,2 (Alla 11774 korda)

Te saate väga lihtsalt muuta ilme ja valik indikaator (sinine ülaltoodud näites), liugur nupp, liugur track muutes slider.css vastavalt vajadusele.

Kas tilk mulle comment kui leiate, et see on vajalik.

Enne oli meil tegeleda CSS luua meie lehe paigutusega, viies mõned sisu sees tabeli lahtrisse tundus lihtsalt lapsemäng. Lihtsalt määrata "align" või "valign" vara tabelis on lähendada oma valiku, käkitegu!
CSS paigutust, kuigi meil on "vertikaalselt joondada" vara elemente, ei tundu olevat sama lihtne kui "viia" või "valign" omadused. Rohkem specifiic "vertikaalselt joondada" ei tundu, et lahendada kõik oma probleemid, eriti kui on kirjutada tükk piiriülese brauser CSS.

Ei kasutata HTML Lauad, probleem keskendudes objekt, olgu see siis pilt või mõni teksti sisaldavate rajoonis on ilmselt olnud iga UI / CSS arendajatele õudusunenägu mingil ajahetkel. See probleem veelgi ekstrapoleeritakse oma mured viia, kui objekti keskele on dünaamilise iseloomuga, st kui selle kõrgus on muutuv (teadmata kõrgus).

Kuigi ei ole teada, otse edasi, lahendus, mis teeks kogu valik brausereid peame tegelema, lahendus, et olen püüdnud jõuda ei tundu töötada mõned brauserid, et olen püüdnud seda (IE6, IE 7 , FF).

LAHENDUS:
Brauserites nagu Mozilla, Opera ja Safari, kummaline käituvad "vertikaalselt joondada" vara on võimalik tuua oma meeli, lihtsalt seades "Display" vara sisaldava rajoon "table-cell" (display: table-cell) .

Probleem endiselt IE pere brauserid, kes veel ei paista aru, mida koos "table-cell" vara ja asjatundmatu nagu nad on, nad lihtsalt ignoreerida. Lahendus toodud allpool, kuigi lihtne, reklaame veel paar DOM elemente oma HTML teha asju juhtuda.

CSS ja HTML näeb välja selline
.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/> Vaadatud: 3456 </ div>
</ Div>
</ Div>

Tulemus näeb välja selline: -

vaadata demo siin | Download Source Files (laetud 452 korda)

TOP joondamine 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/> Vaadatud: 1234 </ div>
</ Div>
</ Div>

Tulemus näeb välja selline: -

BOTTOM joondamine 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/> Vaadatud: 1234 </ div>
</ Div>
</ Div>

Tulemus näeb välja selline: -

vaadata demo siin | Lae alla siit

Tundub vanuses, sest ma üritasin leida mõistlik lahendus sellele viimine probleemi. Aga nüüd on see lahendus, tunnen pisut rahu.

Mis lootust, et ühel päeval

• vertikaal-viimine vara CSS töötab nagu see sees tabeli lahtrisse, ilma võita palju ümber bush
• Vähemalt, milles margin-top: auto ja margin-bottom: auto, mis annab sama tulemuse nagu margin-left ja margin-right seatud auto
• Browser sõda on möödas ühel päeval.
• Seal peavad lihtsalt üks brauser jaoks KÕIK.

Lae CSS ja HTML eespool lahendus siin (laetud 452 korda) .. ja arusaadavus, CSS ei ole optimeeritud

PS: Ja muide, need on pisipildid mõned pildid olen klõpsatud ...

Mitte, et seal on vaid mõned LIGHTBOX s, et leiad, kui google. Küsimus enamik Valguskastid, et ma leidsin oli see, et nad kõik tundus kasutada üht või teist raske kaal JAVASCRIPT raamistikke nagu jQuery, prototüüp, Mootools ja muud sarnast. Nad kõik on lahe ja šikk otsin. Aga kui teie nõue "Aga ma tahan SIMPLE ja kerge LIGHTBOX SCRIPT enda saidile ka saan", siis siin ta on;

Mõned kena funktsioonid lightbox

1. Väga kerge
   a. 4KB skripte kui pakitud (8 kb pakkimata)
   b. 2 KB CSS
   c. Paar rida HTML lightbox konteiner
2. Lihtne mõista ja rakendada
3. Võib olla mitu Valguskastid samal lehel.
4. Sama lightbox mahuti, mis näitab, eri sisu (mis on eraldi lisatud peidetud vaheseinad page), sõltuvalt link / variant, mis on klõpsatud.
5. Automaatselt keskused ise, võttes arvesse kõiki tegureid, nagu akna kõrgusest ja laiusest (ekraani resolutsioon), lk leidke summa ja kõrguse sisu lightbox
6. Testitud IE 7 ja FF

Vaata Demo |
Lae Lightbox Allikas Zip (Alla 1804 korda)

jo.js, jo_pack.js [pakitud version]: - lihtsate JavaScript objekti [JO], mis sisaldab elementi, akna-ja dokumendi asukoha skripte. Te saate avada JO.JS kui soovid, et su käed määrdunud mõne Advanced Javascripting, luues abstraktse funktsioone, mis ulatub element omadusi ja selline. Kui sul ei ole liiga palju Javascripting, jäta ta rahule.

lightbox.js, lightbox_pack.js [pakitud version]: - mis sisaldavad valguskast manager skripte. Kui olete lehe kujundaja, vastutab ka rakendamisel lightbox lehel, sa pead aru LightBoxManager. LightBoxManager põhiliselt sisaldab ainult kaks funktsiooni showLightBox ja closeLightBox.

lightbox.css: - Kui sa tead, CSS, saad mängida lightbox.css välimuse-n-tunne lightbox.css

index.html: Proovi rakendamise lightbox kahe erineva sisu

lb_underlay_bkg.png: - See on kerge / simi läbipaistev image, mida kasutatakse tausta lightbox aluskate [Underlay on kiht allpool lighbox, mis takistab kasutajal klõpsates muu üksus lehel, samal ajal kui lightbox on avatud]. Võite kasutada mingit pilti või isegi värviga selleks, sõltuvalt lehe disaini ja nõue.

icon_lb_close.gif: - image tiheda lightbox käepide üleval paremas valguses kasti. Võib kasutada mis tahes pildi disainilahenduse kohta

Vaata Demo |
Lae Lightbox Allikas Zip (Alla 1804 korda)

Palun andke meile oma kommentaare ja tagasisidet ...