Exprimarea IT

Cu o varietate de Carusel de acolo, de multe pentru mootools ar fi bine, am decis să scriu încă din clasa mea Carousel proprie, pentru câteva motive bune
1. A vrut o caracteristică de paginare (pentru a putea sări într-un diapozitiv special / pas în carusel).
2. Vrut libertate cu plasarea de butoanele Stanga si Dreapta / Link-uri, în cazul în care mai am vă rog.
3. Mai mult control asupra paşi Slide.

Am reuşit să creeze un nou tip carusel, cu caracteristicile de mai sus ... ca de mai jos ... Simţiţi-vă liber să sugereze orice modificare ce ar avea nevoie!

Exemplul meu arata ca acest ... [ Vezi Demo ]

Vezi Demo | Descarca mootools Carusel cu versiunea 1.0 de paging (Descarcat de 1998 ori)

1. Carousel paging

Puteţi adăuga cu uşurinţă de paginare la carusel dumneavoastră, pur şi simplu prin stabilirea de pavilion de paginare, care este ultima parater trecut creând în acelaşi timp instanţă de MooCarousel la TRUE (doresc localizare) sau fals (donot doresc paginare).

var = new carousel1 MooCarousel ("carousel1_wrapper", "carousel1_items_container", "carousel1_moveleft", "carousel1_moveright", c_ns, c_sss, true); / / ns = numărul de diapozitive, SSS = diapozitiv pas dimensiune

Şi desigur puteţi schimba look-n-simt a acestor achors paging cum te rog prin modificarea CSS lor.

Carousel_paging {text-align: right; margin: 10px 0 0 5px;}.
Carousel_paging curent, carousel_paging pagina {contur: none; lăţime:.... 15px; inaltime: 15px; line-height: 15px; text-align: center; display: block; float: left; fundal: # D8D8EB; margin: 0 1px 0 0; text-decoration: none;}

Carousel_paging a: hover, carousel_paging curent {background: # 4D4D9B; color: # FFFFFF;}...

Ei bine! exista o mica problema insa, ancore de paging în cazul în care set, atunci acesta va fi generat întotdeauna după componenta Carousel. Am vrut să fac o dinamică bine, dar apoi doar pentru a păstra Script pentru suflare de proporţii, am decis să-l sari.
Dar ştii un pic Javascript, aţi putea modifica uşor generare a codului de paginare în clasa MooCarousel pentru satisfacerea nevoilor dumneavoastra.

2. Personalizarea Icoane stânga & dreapta

Aveţi posibilitatea să modificaţi de plasament, imagini sau orice proprietate displat dintre butoanele Stanga si Dreapta pur şi simplu de joc în jurul cu CSS. pentru a fi capabil de a schimba de plasare de buttoms stânga şi dreapta a fost motivul real pentru mine la dreapta mea nostru de clasa Carousel.
, Deoarece aceasta clasa MooCarousel, acceptă ID-ul e de aceste butoane, puteţi plasa de fapt, aceste butoane oriunde pe pagina, daca te rog ... nu trebuie să fie în ierarhia element, ca în exemplul meu.

var = new carousel1 MooCarousel ("carousel1_wrapper", "carousel1_items_container", "carousel1_moveleft", "carousel1_moveright", c_ns, c_sss, adevărat);

CSS
.. Carousel_container_l, carousel_container_r {margin: 50px 0 0 0; position: relative; lăţime: 23px; inaltime: 20px; float: left; cursor: pointer;}

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

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

3. Personalizarea Paşi Slide

Ce vreau sa spun MELE PAŞI Personalizarea SLIDE?
Cele mai multe Carusel glisaţi deplină cu a ferestrei vizibile. Deci, spune ca a avut patru elemente (cum ar fi, în proba mea de mai sus), se va aluneca toate cele patru elemente. Cu această componentă carusel, Tu treci numărul de diapozitive şi dimensiunea pas de alegerea ta.

var = new carousel1 MooCarousel ("carousel1_wrapper", "carousel1_items_container", "carousel1_moveleft", "carousel1_moveright", c_ns, c_sss, adevărat);
c_ns = numărul de diapozitive, c_sss = diapozitiv pas dimensiune

De asemenea, în example1 mea am calcuted pasul diapozitiv, bazată pe logica în cazul în care, ştiu că numărul de articole, latime pe fiecare articol, precum şi marjele de care au dat, după fiecare element în CSS meu.

/ * Pentru beţie 1 * /

c1_w var = 92; / / beţie articol Lăţime

c1_n var = 10; Numar / / total de articole beţie Comparatie

var c1_pp = 4 / / Numărul de beţie perpage Comparatie Articole

c1_marginFactor var = 51;

var = c1_sss c1_w * c1_pp; / / SSS = Mărimea pasului de diapozitive

var c1_ns parseInt = (((c1_w * c1_n) / c1_sss) + 0.5); / / ns = numărul de diapozitive

c1_sss + = c1_marginFactor; / / SSS = Mărimea pasului de diapozitiv, 51 pentru marje

Cerinte: mootools 1.2

Vezi Demo | Descarca mootools Carusel cu versiunea 1.0 de paging (Descarcat de 1998 ori)

Mootools MooRating este un (browser-ul cruce, desigur ca foloseste puterea de a bibliotecii mootools) simplu, usor si excelent soluţie bazată pe evaluare. Acesta nu este numit ca "Star Rating", pur şi simplu pentru că, imaginea de rating ar putea fi ca tu a alege (am furnizat Stele, baruri şi inimile cu descărcare, dar vă puteţi crea propria varietate şi doar o picătură în).

Cum se arata ca:

	Evaluare mootools cu imagini diferite Vezi Demo
	Evaluare mootools cu valori procentuale Vezi Demo
	Evaluare mootools cu valori fracţionare Vezi Demo

Descărcaţi Mootols Star Rating Script (Descarcat de 720 ori)

Evaluare de date: număr întreg, zecimal sau un procent
În prezent, script-ul este conceput pentru a afişa datele de rating ca valori întregi (1,2,3,4,5), în zecimale (1.24, 3.45, etc), sau în procente (12%, 55% etc.) Alegerea de a afişa date în oricare dintre formatele menţionate pot fi stabilite doar prin schimbarea unor valori pavilion în termen de javascript (moorating.js)
În principiu, există două e de două steaguri pentru a juca cu, pentru afişarea valorilor în formatul de alegerea ta ...

var inpercent = false; / / Set acest pavilion pentru a adevărat, dacă aveţi nevoie de valori procentuale, pentru a fi afişate
var isFractional = false / / Set acest adevărat, dacă doriţi valori fracţionare, cum ar fi 1.24, 1.25, 4.56, mai degrabă decât 1,2 ... 5

Şi I dont cred că există vreo explicaţie necesară pentru acest lucru. Mai mult decât atât. Scenariul e foarte simplu. Dacă ştiţi un pic javascripting, ai putea modifica script-ul pentru a obţine orice fel de valoarea afişată. De exemplu, dacă ai vrut trei zecimale pentru a fi afişate ... tweak la fel ca script-ul de mai jos ...

dacă (isFractional) {if (x <= 5 | | x> = 0) moostartval [i] innerHTML = formatNumber (X, 3);.} / / 2 este schimbat la 3
else {moostartval [i] innerHTML = Math.round (x).;

Actualizarea Valoare Evaluare:
I havent deranjat scris orice script-uri AJAX pentru actualizarea valorii Evaluări, pentru ca stiu din experienta mea că nu întotdeauna se intenţionează să actualizeze EVALUARE cât mai curând ceva de utilizator ratele. Eşti liber să faci ce vrei cu valoarea nominală, actualizaţi-le folosind AJAX sau Trimiteţi-l sau Setaţi o valoare de câmp formular ascuns, care urmează să fie prezentată cu întregul formular, etc

Funcţia updateRating (id, evaluare) {
/ / Alert (id + "," + evaluare);
/ / Fă ce CU EVALUARE
}

Există în funcţie javascript numit "updateRating". Această funcţie a fost trecut ID-ul de Div Evaluare, pentru a identifica drept pentru care ratingurile (în cazul în care există mai mult de un rating de pe pagina) a fost actualizată şi valoarea de evaluare [updateRating (id, evaluare)]. Ai putea alege la ce vrei cu aceste valori, după cum am menţionat mai devreme.

Imagine Evaluare: Stele, inima, baruri sau orice altceva, te rog
Schimbarea de rating la oricare dintre tipurile de mai sus (stele, inima, etc), este foarte simplu. Crea o imagine similară cu cea prevăzută şi fixaţi-l inch Amintiţi-vă, dacă vă schimbaţi numele imaginii, nu face modificările necesare în fişierul CSS, a se vedea mai jos.

Moostar {margin: 0px; padding: 0px; depăşire: ascuns; lăţime: 84px; inaltime: 20px; float: left; background: url ("stars.gif"), repeta-x;}.
Moostar durata {float: left; margin: 0px; padding: 0px; display: block; lăţime: 84px; inaltime: 20px; text-decoration: none; text-indent:-9000px, z-index: 20;}.
.. Moostar pac {background: url ("stars.gif") a lăsat 25px;}

Cele mai multe widget-uri de rating utilizează stele şi jumătate de stele, imagini cu mouse-ul peste evenimentele de pe fiecare stea. Evaluări Moo foloseste o imagine simpla Sprite ca o imagine de fundal pentru a obţine efecte vizuale necesare, cu un foarte mic deasupra capului.

Cerinte: mootools 1.2
Descărcaţi Mootols Star Rating Script (Descarcat de 720 ori)

Am fost în căutarea unui slider dublu fixate (slider cu doua butoane, minim şi maxim), folosind mootools. Deşi, am găsit un slider bine făcut câteva dublu fixat în forumul mootools, singura problema a fost că toate acestea au ieşitură slidere markerul zona selectată. În sfârşit! Am decis pentru a crea propria mea. Ei bine! Am folosit codul original şi modificaţi-l pentru a avea un fundal slider care indică zona selectată vizual, ca în exemplul meu de mai jos. Zonele albastră indică gama de valori alese.

Vezi Versiunea 2.2 Demo | mootools Download, dublu Important Slider Version 2.2 (Descarcat de 11861 ori)

Puteţi foarte uşor schimba aspectul indicatorului raza de acţiune (în albastru, în exemplul de mai sus), butonul cursor, cursorul piesa de modificarea slider.css după cum este necesar.

Nu fixaţi-mi un comentariu daca vi se pare util.

Dacă sunteţi unul dintre cei (ca mine), care verifica deseori CSS a paginii HTML bine făcute, pentru a obţine inspirat sau orice altceva, atunci este posibil să fi observat că am folosit Pozitionare Faux (aşa cum sa menţionat deja în articolul meu de mai devreme Suntem Poziţionarea cu ajutorul Faux absolută: Un Briliant Aspect CSC )

Noi am ceva de lucru bun pe acest şablon, deci gandit ca ar fi frumos să-l împărtăşească .... Descarcă această temă WordPress (descărcat de 197 ori)