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 1991 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 1991 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 718 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 718 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 11729 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.

Înainte de a avea de a face cu CSS pentru a crea machete noastre de pagină, alinierea parte a conţinutului în interiorul unei celule de tabel părea juca doar copil. Pur şi simplu setaţi "alinia" sau "valign" proprietate a tabelului pentru a avea alinierea la alegere, bucata de tort!
Cu aspecte CSS, deşi avem "vertical-align" proprietate pentru elemente, nu pare a fi la fel de simplu ca "alinierea" sau "valign" proprietăţi. Pentru a fi mai specifiic "vertical-align" nu pare să rezolve niciuna dintre problemele tale, mai ales în cazul în care se scrie o bucata de cross-browser CSS.

Fără utilizarea de tabele HTML, problema de centrare pe obiect, fie o imagine sau un text într-o divizie de conţinut, probabil a fost de fiecare UI / CSS coşmar dezvoltatorii la un moment dat. Această problemă se extrapolează în continuare de grijile de aliniere, în cazul în care obiectul care urmează să fie centrat este dinamic în natură, adică atunci când înălţimea acestuia este variabilă (înălţimea necunoscut).

Deşi nu există o soluţie cunoscut drept înainte, că ar lucra în gama de browsere pe care le avem de a face cu, soluţia pe care am încercat să ajungă la nu pare să funcţioneze în browserele cateva pe care eu l-am încercat în (IE6, IE 7 , FF).

SOLUTIE:
În browsere, cum ar fi Mozilla, Opera şi Safari, comportă ciudat "vertical-align" proprietate poate fi adus la simţurile sale, pur şi simplu prin stabilirea de "afişare" a diviziei de proprietate conţinând la "masa-celula" (afişare: masă de celule) .

Problema rămâne în continuare cu familia IE browsere, care, dar nu par să înţeleagă ce sa cu "masa de celule" de proprietate şi de ignorant cum sunt, ele ignora pur şi simplu. Soluţia de mai jos, deşi simple, anunturi câteva elemente mai DOM HTML la pagina dumneavoastră de a face lucrurile sa se intample.

CSS şi HTML arata ca acest
.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/> vizualizări: 3456 </ div>
</ Div>
</ Div>

Rezultatul arata ca aceasta: -

vezi demo aici | Files download source (Descarcat de 452 ori)

TOP Alinierea 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/> vizualizări: 1234 </ span>
</ Div>
</ Div>

Rezultatul arata ca aceasta: -

JOS Alinierea 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/> vizualizări: 1234 </ span>
</ Div>
</ Div>

Rezultatul arata ca aceasta: -

vezi demo aici | Descarcă de aici

Se pare ca varsta, deoarece am fost încercarea de a găsi o soluţie rezonabilă pentru această problemă de aliniere. Dar acum, cu această soluţie, mă simt la pace puţin.

Cu o speranta ca intr-o zi

• vertical-aliniere proprietate în CSS va funcţiona ca o face in interiorul unei celule de tabel, fără să bată mai mult în jurul lui Bush
• Cel puţin, stabilirea marjei de-top: auto si margin-bottom: auto, ca va da acelaşi rezultat ca şi cu marja de stânga şi de setul de marja de-a dreptul de auto
• Războaiele browser va fi peste o zi.
• Nu va fi doar un browser de ALL.

Descărcaţi CSS şi HTML de soluţie de mai sus, aici (Descarcat de 452 ori) .. pentru inteligibilităţii, CSS nu este optimizat

PS: Si apropo, cei care sunt miniaturi ale unor poze le-am dat clic pe ...

Nu faptul că există doar câteva lightbox lui pe care le puteţi găsi atunci când Google. Problema cu cele mai multe lumini pe care am găsit a fost că toţi păreau a utiliza una sau alte cadre grele, JavaScript greutate, cum ar fi jQuery, Prototype, mootools şi îi place. Acestea sunt toate rece şi swanky cautati. Dar dacă cerinţa este "dar vreau un SCRIPT lightbox SIMPLU şi uşoară pentru Site-ul meu", atunci aici este;

Unele caracteristici ale acestui frumos lightbox

1. Foarte uşor
   o. 4KB de scripturi atunci când ambalate (8 kb despachetat)
   B. 2 KB din CSS
   C. Câteva linii de cod HTML pentru containere lightbox
2. Simplu să înţeleagă şi să pună în aplicare
3. Poate avea mai multe lumini de pe aceeaşi pagină.
4. Container Lightbox este folosit pentru a arăta, conţinut diferit (care este inclus separat ca diviziuni ascunse în pagină), în funcţie de link-ul / opţiunea care se face clic.
5. Automat centre, luând în considerare toţi factorii, cum ar fi, înălţimea şi lăţimea ferestrei (rezoluţia ecranului), valoarea pagina de defilare şi înălţimea a conţinutului de lightbox
6. Testat în IE 7 şi FF

Vezi Demo |
Descarca Sursa Zip Lightbox (Downloaded 1804 ori)

jo.js, jo_pack.js [versiunea ambalat]: - un set simplu de OBIECTE JAVASCRIPT [JO], care conţine elementul, ferestre şi script-uri de poziţionare a documentelor. Puteţi deschide JO.JS dacă doriţi să obţineţi mâinile murdare cu unele Javascripting avansată, crearea de funcţii abstracte, extinderea unor astfel de proprietăţi şi a elementelor. Dacă nu se prea mult în Javascripting, Lasă-l singur.

lightbox.js, lightbox_pack.js [versiune plin de]: - Contine scripturi de lumina caseta de Manager. Dacă sunteţi proiectantul paginii, de asemenea, responsabil cu punerea în aplicare a lightbox pe pagina, aveţi nevoie pentru a înţelege LightBoxManager. LightBoxManager conţine practic doar două funcţii showLightBox şi closeLightBox.

lightbox.css: - Dacă ştii CSS, poţi să te joci în jurul cu lightbox.css pentru a personaliza aspectul-N-simt lightbox.css

index.html: punerea în aplicare Exemplu de lightbox cu două conţinut diferit

lb_underlay_bkg.png: - Aceasta este lumina / Simi imagine transparentă, care este folosit de fundal pentru stratul de baza lightbox [Covorul este stratul de mai jos lighbox, care împiedică utilizatorul de la clic pe orice altă entitate pe pagină, în timp ce lightbox este deschis]. Puteţi utiliza orice imagine sau chiar o culoare solida pentru acest scop, în funcţie de designul paginii şi cerinţa.

icon_lb_close.gif: - imagine pentru mâner lightbox aproape de partea din dreapta sus a casetei de lumină. Pot folosi orice imagine ca pe proiectarea

Vezi Demo |
Descarca Sursa Zip Lightbox (Downloaded 1804 ori)

Vă rugăm să ne comentariile dumneavoastră şi feedback-ul ...

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 196 ori)