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 1983 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 1983 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 716 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 716 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 11566 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.