Duke shprehur IT

Me një shumëllojshmëri të Carousels atje, shumë për Mootools, si dhe, unë ende të vendosur për të shkruar vetë klasën time, Carousel, për disa arsye të mira
1. Kërkuar një funksion paging (që të jetë në gjendje të hidhen një rrëshqitje të veçantë / hap në carousel).
2. Donin lirinë me vendosjen e butonave majtë dhe të djathtë / lidhje, ku unë ndonjëherë ju lutem.
3. Më shumë kontroll mbi hapat e rrëshqitje.

Unë nuk arrijnë të krijojnë një carousel të re, me karakteristikat e mësipërme ... si më poshtë ... Ndjehen të lirë për të sugjeruar ndonjë modifikime ju do të kërkonte!

Shembulli im duket si ky ... [ Demo View ]

Shiko Demo | Download Mootools Carousel Me Versioni Paging 1.0 (shkarkuar 1986 here)

1. Paging Carousel

Ju lehtë mund të shtoni paging për carousel tuaj, thjesht duke vendosur flamurin Paging, e cila është parater fundit kaloi duke krijuar instancën e MooCarousel në të vërtetë (doni paging) ose false (donot duan paging).

var carousel1 = new MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright', c_ns, c_sss, i vërtetë); / / ns = numri i slides, sss = hap rrëshqitje madhësia

Dhe ofcourse ju mund të ndryshojë look-n-ndjehen të këtyre achors paging si ju lutemi duke modifikuar CSS e tyre.

. Carousel_paging {text-align: right; margin: 10px 5px 0 0;}
. Carousel_paging aktuale, carousel_paging faqe {përshkruajë: none; width:... 15px; height: 15px; line-height: 15px; text-align: qendra, display: block; noton: të majtë, background: # D8D8EB; margin: 0 1px 0 0; text-stolisje: none;}

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

E pra! nuk është një çështje e vogël edhe pse, anchors paging nëse caktuar, atëherë ajo do të gjeneruar gjithmonë pas komponent carousel. Unë të kërkuar për të bërë atë dinamike, si edhe, por pastaj vetëm për të mbajtur Script për defekt nga përmasa, kam vendosur të kaloni atë.
Por ju e dini një Javascript pak, ju lehtë mund të modifikoj kodin brez paging në klasë MooCarousel për të kënaqur nevojat tuaja.

2. Customising ikonat Majtas dhe Djathtas

Ju mund të ndryshoni vendosjen, imazhe ose ndonjë pronë displat e pulsantët majtas dhe djathtas thjesht duke luajtur rreth me CSS. të jetë në gjendje për të ndryshuar vendosje e buttoms majtë dhe të djathtë ishte arsyeja e vërtetë për mua të drejtën tonë Klasa ime carousel.
Që nga kjo Klasa MooCarousel, pranon id Është e këtyre butonave, ju në fakt mund të vendosni këto butonat kudo në faqe, nëse ju lutem ... kjo nuk duhet të jetë në hierarkinë element, si në shembullin tim.

var carousel1 = new MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright', c_ns, c_sss, i vërtetë);

CSS
.. Carousel_container_l, carousel_container_r {margin: 50px 0 0 0; pozicionin: relative; width: 23px; height: 20px; noton: të majtë, kursori: akrep;}

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

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

3. Customising Hapat Slide

Çfarë mund të thotë Hapat e mia Customising SLIDE?
Carousels Shumica rrëshqitje të plotë me të dritares të dukshme. Pra, thonë se ju kishte katër artikuj (si në mostër tim lart), ajo do të rrëshqas të gjitha katër sende. Me këtë komponent, Carousel, Ju kalojë numrin e slides dhe madhësinë hap e zgjedhjes suaj.

var carousel1 = new MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright', c_ns, c_sss, i vërtetë);
c_ns = numri i slides, c_sss = hap rrëshqitje madhësia

Gjithashtu, në example1 time kam calcuted madhësinë hap rrëshqitës, në bazë të logjikës ku, unë e di numrin e artikujve, gjerësi mbi çdo send dhe kufijtë që janë dhënë pas çdo send në CSS tim.

/ * Për aheng 1 * /

var c1_w = 92; Gjerësia / / aheng Item

var c1_n = 10; Numri / / Totali i artikujve të aheng Comparision

var c1_pp = 4 / / Numri i aheng Comparision perpage Items

var c1_marginFactor = 51;

var c1_sss = c1_w * c1_pp; / / hap sss = rrëshqitje madhësia

var c1_ns = Hap parseInt (((c1_w * c1_n) / c1_sss) + 0,5); / / ns = numri i slides

c1_sss + = c1_marginFactor; / / hap sss = rrëshqitje size, 51 për kufijtë

Kërkesa: Mootools 1.2

Shiko Demo | Download Mootools Carousel Me Versioni Paging 1.0 (shkarkuar 1986 here)

Mootools MooRating është një (ndër shfletuesit, natyrisht si ajo përdor fuqinë e bibliotekës MooTools) i thjeshtë, i lehtë dhe i shkëlqyer i bazuar zgjidhje vlerësim. Kjo nuk është quajtur si "Star", thjesht sepse, image rating mund të jetë si ju zgjidhni (e kam dhënë yjeve, bare dhe zemrat me shkarkim, por ju mund të krijoni shumëllojshmëri tuaj dhe vetëm rënie atë në).

Si e bën atë të duket si:

	Rating Mootools me imazhe të ndryshme Shikoni Demo
	Rating Mootools me vlera përqindjeje Shiko Demo
	Rating Mootools me vlera të pjesshëm Shiko Demo

Shkarko Rating Mootols Star Script (Shkarkuar 717 herë)

Të dhënat Rating: Numri Whole, Decimal apo Përqindja
Aktualisht script është projektuar për të treguar të dhënat e vlerësuar si vlera të tërë (1,2,3,4,5), në dhjetorë (1.24, 3.45 etj) ose në përqindje (12% etj 55%). Zgjedhja për të treguar të dhënat në ndonjë nga formatet e përmendura mund te behet thjesht duke ndryshuar disa vlera flamurin brenda javascript simbolit moorating.js)
Në thelb ka dy dy d flamuj për të luajtur me të, për të shfaqur vlerat në formatin e zgjedhjes suaj ...

var inpercent = false; / / Set këtë flamur për të vërtetë, nëse keni nevojë për vlerat përqindje që do të shfaqet
var isFractional = false / / Set këtë të vërtetë, në qoftë se ju doni vlerat e pjesshëm si 1.24 1.25, i, e 4.56 sesa 1,2 ... 5

Dhe I dont mendoj se ka ndonjë shpjegim të nevojshme për këtë. Për më tepër. Dorëshkrim është shumë e thjeshtë. Nëse ju e dini një javascripting pak, ju mund të modifikoj shkrimin për të marrë ndonjë lloj të vlerës së shfaqur. Për shembull nëse do të donit tre numra pas presjes dhjetore që do të shfaqet ... vetëm shkulje script si më poshtë ...

në qoftë se (isFractional) {if (x <= 5 | | x> = 0) moostartval [i] innerHTML = formatNumber (x, 3).} / / 2 është ndryshuar për 3
else {moostartval [i] innerHTML = Math.round (x).;

Përditësimi Vlera Rating:
I havent shqetësuar shkrim çdo Scripts AJAX për përditësimin e vlerës Ratings, sepse unë e di nga përvoja ime se JO GJITHMONË bëjë atë qëllim për të rinovuar Rating sa më shpejt si diçka normat përdoruesit. Ju jeni të lirë të bëni çka të doni me vlerën nominale, Update duke përdorur AJAX, ose ta dorëzojë atë ose Vendosni një fushë fshehur vlerë formë, që të dorëzohen me formularin e tërë etj

Funksioni updateRating (id, rating) {
/ / Alert (id + "," + rating);
/ / A çdo gjë ME Rating
}

Nuk është funksion në javascript quajtur "updateRating". Ky funksion ka kaluar ID e e Div lexuara, të identifikuar si në të cilat ratings (nëse ka më shumë se një ratings në faqe) u përditësuar dhe vlera e rating [updateRating (id, rating)]. Ju mund të zgjidhni për çdo gjë që ju doni me këto vlera, siç e përmenda më herët.

Image Rating: Yjet, zemrat, bare apo ndonjë gjë, ju lutem
Ndryshimi i vlerësim për ndonjë nga llojet më lart (yjet, zemra etj) është shumë e thjeshtë. Vetëm të krijojë një imazh të ngjashëm me atë të parashikuar dhe të heqë atë in Mos harroni, nëse ju të ndryshojë emrin e imazhit, do të bëjë ndryshimet e nevojshme në dosjen CSS, shih më poshtë.

. Moostar {margin: 0PX; mbushje: 0PX, del nga shtrati: fsheur, width: 84px; height: 20px; noton: të majtë, background: url ('stars.gif') përsëritje-x;}
. Moostar p {float: të majtë, margin: 0PX; mbushje: 0PX; display: block; width: 84px; height: 20px; text-stolisje: none; text-porosit:-9000px, z-index: 20;}
.. Moostar curr {background: url ('stars.gif') u largua 25px;}

Shumica ratings Widgets përdorin yll dhe gjysmë-yll imazhe me miun mbi ngjarjet në çdo ylli. Ratings Moo përdor një imazh të thjeshtë Sprite si një imazh sfond për të arritur efektet e kërkuara vizuale me një shumë të ulët overhead.

Kërkesa: Mootools 1.2
Shkarko Rating Mootols Star Script (Shkarkuar 717 herë)

Unë kam qenë në kërkim për një slider dyfishtë pinned simbolit slider me dy pullat, minimale dhe maksimale) duke përdorur mootools. Edhe pse, unë e kam gjetur një slider disa të bërë mirë pinned dyfishtë në forum mootools, Problemi i vetëm ishte se të gjitha këto yxhym sliders kanë shënues zgjedhur varg. Së fundi! I vendosur për të krijuar mi. E pra! Unë i përdor kodin origjinal dhe modifikojë atë që të ketë një sfond slider që tregohet varg zgjedhur vizualisht, si në shembullin tim më poshtë. Zonat Blue tregon gamën e vlerës së zgjedhur.

Shiko Versionin 2.2 Demo | Download Mootools Ngjitës dyshe Version Slider 2.2 (shkarkuar 11589 here)

Ju mund shumë lehtë të ndryshojë pamjen dhe të ndjehen të treguesit varg (në ngjyrë blu në shembullin e mësipërm), çelës slider, në rrugën e slider duke modifikuar slider.css siç kërkohet.

Mos të më bjerë një koment në qoftë se ju të gjeni të dobishme.

Para se ne kishim për t'u marrë me CSS Layouts për të krijuar faqe tona, përafrimin e disa përmbajtje brenda një qelizë tabelë dukej luajnë vetëm fëmijës. Vendosur thjesht "lidhur" ose "valign" pronë të tabelës që të ketë në drejtimin e zgjedhjes tuaj, copë tortë!
Me Layouts CSS, edhe pse ne kemi "vertikale-align" pronën për elementet, kjo nuk duket të jetë aq e thjeshtë sa "lidhur" ose "valign" pronave. Për të qenë më specifiic "vertikale-align" nuk duket të zgjidhë ndonjë nga problemet tuaja, sidomos nëse janë të shkruar një pjesë të ndër-shfletuesit CSS.

Pa përdorimin e tabelave HTML, problemi i qendërzim në objekt, të jetë ajo një imazh apo ndonjë tekst brenda një ndarje që përmbajnë, ka qenë ndoshta çdo UI / CSS zhvilluesve makth në një pikë. Ky problem më tej extrapolates shqetësimet tuaja për përafrimin, nëse objekti për t'u përqëndruar, është dinamike në natyrë, dmth kur lartësia e saj është e ndryshueshme (lartësia e panjohur).

Edhe pse nuk ka zgjidhje njohur drejt përpara se do të punojë në të gjithë gamën e shfletuesit kemi të bëjmë me të, zgjidhja që kam provuar për të arritur në nuk duket për të punuar në shfletues të pakta që kam provuar atë në (IE6, IE 7 , FF).

Zgjidhje:
Në shfletues si Mozilla, Opera dhe Safari, i çuditshëm sillet "vertikale-align" pronë mund të sillen në shqisat e saj, thjesht duke e pronës "ekranit" e ndarjes përmbajnë të "Tabela qelizë të" (display: table-qelizore) .

Problemi ende mbetet me familjen e shfletuesit IE, i cili, megjithatë nuk duket për të kuptuar se çfarë në me "table-qelizore" pronës dhe injorante si ata janë, ata vetëm injorojnë atë. Zgjidhja e dhënë më poshtë, edhe pse të thjeshta, reklama disa elemente më DOM me HTML tuaj për të bërë gjëra të ndodhë.

CSS dhe HTML duket si ky
.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/> views: 3456 </ div>
</ Div>
</ Div>

Rezultati duket si ky: -

shikoni demo këtu | Download Files Burimi (shkarkuar 451 herë)

TOP Vendose në 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/> shikime: 1234 </ div>
</ Div>
</ Div>

Rezultati duket si ky: -

BOTTOM Vendose në 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/> shikime: 1234 </ div>
</ Div>
</ Div>

Rezultati duket si ky: -

shikoni demo këtu | Shkarko këtu

Duket si mosha, pasi unë kam qenë duke u përpjekur për të gjetur një zgjidhje të arsyeshme për këtë problem shtrirjes. Por tani me këtë zgjidhje, unë ndihem në paqe pak.

Me një shpresë se një ditë

• vertikale-shtrirjes në pronë CSS do të punojë si ajo e bën brenda një qelizë tabelë, pa pasur nevojë për të rrahur shumë rreth shkurret
• Të paktën, duke margin-top: auto dhe margin-bottom: auto, do të japin si rezultat të njëjtë si me margin-left dhe kufirin e djathtë të vendosur për auto
• Luftërat Browser do të jetë mbi disa ditë.
• Nuk do vetëm një shfletues për të gjithë.

Shkarko CSS dhe HTML të zgjidhjes më lart këtu (shkarkuar 451 herë) .. per kuptueshmërisë, CSS nuk është e optimizuar

PS: Dhe nga rruga, ata janë thumbnails e disa fotove kam klikuar ...

Jo se ka vetëm disa Lightbox e që ju mund të gjeni kur ju google. Çështja me shumicën e lightboxes që kam gjetur ishte se ata të gjithë dukeshin të përdorni një ose të tjera strukturat e rënda JavaScript peshe si, jQuery, prototip MOOTOOLS dhe i pëlqen. Ata janë të gjithë të qetë dhe luksoz në kërkim. Por në qoftë se kërkesa juaj është: "Por unë dua që një dorëshkrim i thjeshtë dhe i lehtë Lightbox për web faqen time", atëherë këtu është;

Disa karakteristika bukur të këtij Lightbox

1. Shumë të lehta
   a. 4kb e Scripts kur mbushura (8 KB unpacked)
   b. 2 kb CSS e
   c. Disa rreshta të HTML për enë Lightbox
2. Thjeshtë për të kuptuar dhe zbatuar
3. Mund të ketë Lightboxes të shumta në të njëjtën faqe.
4. Enë njëjta Lightbox është përdorur për të treguar, përmbajtje të ndryshme (e cila është përfshirë veçmas si ndarjeve të fshehura në faqe), në varësi të lidhjes / opsion që është klikuar.
5. Automatikisht qendra vetë, duke marrë parasysh të gjithë faktorët si, lartësi dhe gjerësi Window (Rezoluta ekran), shumën faqe rrotull dhe lartësinë e përmbajtjen e Lightbox
6. Testuar në 7 IE dhe FF

Shiko Demo |
Shkarko Zip Burimi Lightbox (Shkarkuar 1797 herë)

jo.js, të jo_pack.js [version mbushura]: - një grup i thjeshtë i OBJEKTEVE JavaScript [JO], i cili përmban, dritare element dhe Scripts pozicionuar dokument. Ju mund të hapur JO.JS në qoftë se ju dëshironi që të merrni duart tuaja të pista me disa Javascripting avancuar, duke krijuar funksione abstrakte, duke u zgjeruar pronat element dhe të tilla. Nëse ju nuk shumë në Javascripting, lëre vetëm.

lightbox.js, lightbox_pack.js [version mbushura]: - Përmbajtja Scripts lehta menaxher kuti. Nëse ju jeni projektues faqe, gjithashtu përgjegjëse me zbatimin e Lightbox në faqe, ju duhet të kuptoni LightBoxManager. LightBoxManager në thelb përmban vetëm dy funksionet showLightBox dhe closeLightBox.

lightbox.css: - Nëse ju e dini CSS, ju mund të luajnë me rreth lightbox.css të rregulloje pamjen-n-ndiheni lightbox.css

index.html: Zbatimi Shembull i Lightbox me dy përmbajtje të ndryshme

lb_underlay_bkg.png: - Kjo është dritë / simi image transparent që është përdorur sfondin për shtresë Lightbox [shtresë është shtresa më poshtë lighbox, e cila parandalon përdoruesit nga klikuar çdo entitet tjetër në faqe, ndërsa Lightbox është e hapur]. Ju mund të përdorni çdo imazh apo edhe një ngjyrë të fortë për këtë qëllim, në varësi të dizajnit faqe dhe kërkesat.

icon_lb_close.gif: - imazhi për të trajtuar Lightbox të ngushtë në të djathtë lartë të kutisë të lehta. Mund të përdorni çdo imazh si për dizajn

Shiko Demo |
Shkarko Zip Burimi Lightbox (Shkarkuar 1797 herë)

Ju lutem na kanë Komentet dhe reagimet tuaja ...