Jesprimi IT

Ma 'varjetà ta karużelli hemmhekk, ħafna għal MooTools kif ukoll, I għadhom iddeċieda li jikteb Klassi tiegħi Carousel stess, għal xi raġunijiet tajba
1. Wanted karatteristika pejġing (li tkun tista 'tiżdied slide partikolari / pass fid-karużell).
2. Riedu libertà mal-tqegħid tal-buttuni XELLUG lemin u / rabtiet, fejn qatt jien jekk jogħġbok.
3. Aktar kontroll fuq il-Passi Slide.

I ma rnexxilhomx joħolqu Carousel ġdid, bil-karatteristiċi ta 'hawn fuq ... kif hawn taħt ... Ħossok liberu li jissuġġerixxu xi modifikazzjonijiet inti tkun teħtieġ!

Eżempju tiegħi tidher bħal dan ... [ Demo View ]

Ara Demo | Download MooTools Carousel Bil Verżjoni Paging 1.0 (ddawnlowdjati 1980 darbiet)

1. Paging Carousel

Tista 'faċilment żid il-pejġing li carousel tiegħek, sempliċiment billi l-bandiera ta' pejġing, li huwa parater aħħar għadda filwaqt li joħolqu l-istanza ta 'l-MooCarousel biex veru (tixtieq paging) jew falza (donot jixtiequ pejġing).

var carousel1 = ġdid MooCarousel ("carousel1_wrapper", "carousel1_items_container", "carousel1_moveleft", "carousel1_moveright", c_ns, c_sss, vera); / / ns = numru ta 'slides, sss = daqs pass slide

U Naturalment tista 'tbiddel il-ħarsa n-sensazzjoni ta' dawn achors pejġing kif jekk jogħġbok billi timmodifika CSS tagħhom.

. Carousel_paging {test tallinja: id-dritt; marġni: 5px 10px 0 0;}
. Carousel_paging attwali, carousel_paging paġna {kontorn: xejn; wisa ':... 15px; għoli: 15px; linja tal-għoli: 15px; test tallinja: taċ-ċentru; display: block; float: xellug; isfond: # D8D8EB; marġni: 0 1px 0 0; test tiżjin: xejn;}

. Carousel_paging: imbagħad jerġgħu, carousel_paging kurrenti {isfond: # 4D4D9B; kulur: # ffffff;}..

Ukoll! hemm kwistjoni żgħir għalkemm, Il-ankri paging jekk stabbiliti, allura se tikseb iġġenerat dejjem wara l-komponent Carousel. Jien ridt li jagħmlu dan bħala dinamiku ukoll, imma mbagħad biss biex iżommu l-Script għall blowing ta 'proporzjonijiet, I iddeċieda li jaqbżuha.
Imma inti taf Javascript ftit, inti tista 'faċilment timmodifika l-kodiċi ġenerazzjoni pejġing fil-klassi MooCarousel li jekk jogħġbok bżonnijiet tiegħek.

2. Customising l Ikoni Xellug & Dritt

Tista 'tbiddel il TQEGĦID, IMAGES jew kwalunkwe proprjetà displat mill-Buttuni Jitħalla u Dritt sempliċiment billi playing madwar mal-CSS. biex ikunu jistgħu jibdlu l-pjazzamenti ta 'l-buttoms Jitħalla u Dritt kienet ir-raġuni attwali għalija li d-dritt tiegħi Klassi Carousel tagħna.
Peress li dan Klassi MooCarousel, taċċetta l-id huwa ta 'dawn il-buttuni, inti tista' attwalment post dawn il-buttuni kullimkien fuq il-paġna, jekk jogħġbok ... ma għandhom ikunu fil-ġerarkija element, bħal f'eżempju tiegħi.

var carousel1 = ġdid MooCarousel ("carousel1_wrapper", "carousel1_items_container", "carousel1_moveleft", "carousel1_moveright", c_ns, c_sss, reali);

CSS
.. Carousel_container_l, carousel_container_r {marġini: 50px 0 0 0; pożizzjoni: relattiva; wisa ': 23px; għoli: 20px; float: xellug; cursor: pointer;}

. Carousel_container_r {isfond-pożizzjoni: 0-38px;}

. Carousel_container_l {isfond-pożizzjoni: 0-58px;}

3. Customising Passi Slide

What do I jfisser PASSI MY slide Customising?
Karużelli Ħafna slide il sħiħa mal tat-tieqa viżibbli. Allura ngħid li kellek erba 'punti (bħal fil-kampjun tiegħi hawn fuq), se slide il-punti kollha erba. Ma 'dan Komponent Carousel, Inti jgħaddu l-għadd ta' slajds u d-daqs pass ta 'l-għażla tiegħek.

var carousel1 = ġdid MooCarousel ("carousel1_wrapper", "carousel1_items_container", "carousel1_moveleft", "carousel1_moveright", c_ns, c_sss, reali);
c_ns = numru ta 'slajds, c_sss = daqs pass slide

Ukoll, example1 tiegħi jien calcuted-daqs pass slide, ibbażata fuq il-loġika fejn, naf numru ta 'oġġetti, wisa fuq kull oġġett u l-marġini li taw wara kull oġġett fil-CSS tiegħi.

/ * Għal carousal 1 * /

var c1_w = 92; Wisa / / carousal Punt

var c1_n = 10; Numru / / totali ta 'Partiti carousal paragun

var c1_pp = 4 / / Numru ta 'perpage paragun Oġġetti carousal

var c1_marginFactor = 51;

var = c1_sss c1_w * c1_pp; / / sss = daqs pass slide

c1_ns var = l parseInt (((c1_w * c1_n) / c1_sss) + 0.5); / / ns = numru ta 'slajds

c1_sss + = c1_marginFactor; / / sss = slide pass daqs, 51 għall-marġini

Ħtiġiet: MooTools 1.2

Ara Demo | Download MooTools Carousel Bil Verżjoni Paging 1.0 (ddawnlowdjati 1980 darbiet)

MooTools MooRating huwa (browser transkonfinali, naturalment peress li juża l-poter tal-librerija MooTools) sempliċi, ħfief u eċċellenti bbażati soluzzjoni klassifikazzjoni. Mhuwiex msejjaħ bħala "Star Rating", sempliċement minħabba, l-immaġni tal-klassifikazzjoni tista 'tkun inti tagħżel (I pprovdew Stars, Biċċiet u qlub mal-download, iżda inti tista' toħloq varjetà tiegħek u biss qatra fl).

Kif ma jidher qisu:

	Rating MooTools bi stampi differenti Ara Demo
	Rating MooTools mal-valuri perċentwali Ara Demo
	Rating MooTools mal-valuri frazzjonali Ara Demo

Download Mootols Star Rating Script (ddawnlowdjati 716 darbiet)

Rating data: Numru Sħiħ, Deċimali jew Perċentwali
Bħalissa l-iskrittura hija mfassla biex juru d-data tal-klassifikazzjoni bħala valuri sħaħ (1,2,3,4,5), b'mod deċimali (1.24, 3.45 eċċ) jew f'persentaġġi (12%, eċċ 55%). L-għażla li juru data fi kwalunkwe mill-formati msemmija jkunu jistgħu jiġu stabbiliti sempliċiment billi jibdel xi valuri tal-bandiera fi ħdan l-JavaScript (moorating.js)
Bażikament hemm żewġ e żewġ bnadar jilagħbu ma ', għall-wiri valuri fil-format tal-għażla tiegħek ...

var inpercent = foloz; / / Issettja din tal-bandiera biex veru, jekk inti teħtieġ valuri perċentwali li għandha tintwera
var isFractional = foloz / / Irranġa dan veru, jekk inti tixtieq valuri frazzjonali bħal 1.24, 1.25, 4.56 aktar minn 1,2 ... 5

U I dont think hemm xi spjegazzjoni meħtieġa għal dan. Barra minn hekk. L-iskrittura hija sempliċi ħafna. Jekk taf javascripting ftit, inti tista 'timmodifika l-iskrittura biex jiksbu kwalunkwe tip ta' valur murija. Għall e.ż. jekk inti riedu tliet postijiet deċimali li jintwerew ... biss tweak l-iskrittura kif hawn taħt ...

jekk (isFractional) {jekk (x <= 5 | | x> = 0) moostartval [i] innerHTML = formatNumber (x, 3);.} / / 2 huwa mibdul għal 3
inkella {moostartval [i] innerHTML = Math.round (x).;

Aġġornament Valur Rating:
I havent bothered bil-miktub xi skripts Ajax għall-aġġornament tal-valur Ratings, għaliex naf mill-esperjenza tiegħi li MHUX DEJJEM tagħmel dan il-ħsieb li taġġorna l-RATA hekk kif il-ħaġa rati utent. Inti ħieles li jagħmlu dak kollu li tixtieq mal-valur rated, Aġġornament billi tuża Ajax jew Issottometti dan jew Irranġa valur moħbija qasam forma, li għandhom jiġu sottomessi mal-formola sħiħa eċċ

funzjoni updateRating (id-klassifikazzjoni) {
/ / Twissija (id + "," + klassifikazzjoni);
/ / Jagħmlu dak kollu bil-klassifikazzjoni
}

Hemm funzjoni fil-javascript imsejħa "updateRating". Din il-funzjoni ġiet mgħoddija l-ID l-tal-Div Rating, biex tidentifika dwar liema klassifikazzjonijiet (jekk ikun hemm aktar li wieħed klassifikazzjonijiet fuq il-paġna) ġie aġġornat u l-valur tal-klassifikazzjoni [updateRating (id-klassifikazzjoni)]. Inti tista 'tagħżel li tkun xi tkun tixtieq ma' dawn il-valuri, kif i imsemmi qabel.

Image Rating: Stars, qlub, Bars jew xi ħaġa jekk jogħġbok
Nibdlu l-klassifikazzjoni għal kwalunkwe mit-tipi ta 'hawn fuq (stilla, qlub eċċ) hija sempliċi ħafna. Just toħloq immaġni simili għal dak provdut u qatra pulzieri Ftakar, jekk inti jinbidel l-isem ta 'l-immaġini, ma jagħmlu bidliet meħtieġa fil-CSS fajl, ara taħt.

. Moostar {marġini: 0px; ikkuttunar: 0px; overflow: moħbija; wisa ': 84px; għoli: 20px; float: xellug; isfond: url ("stars.gif") ripetuta x;}
. Moostar medda {float: xellug; marġini: 0px; ikkuttunar: 0px; display: block; wisa ': 84px; għoli: 20px; test tiżjin: xejn; test inċiż:-9000px; z-indiċi: 20;}
.. Moostar Curr {isfond: url ("stars.gif") ħallew 25px;}

Widgets Ħafna klassifikazzjonijiet użu star u nofs star immaġini bil maws fuq avvenimenti fuq kull stilla. Klassifikazzjonijiet Moo juża immaġni Sprite sempliċi bħala isfond image biex jinkisbu l-effetti viżwali meħtieġa bil overhead baxx ħafna.

Ħtiġiet: MooTools 1.2
Download Mootols Star Rating Script (ddawnlowdjati 716 darbiet)

I kien infittxu slider doppja ippinjat (slider b'żewġ pumi, minimi u massimi) bl-użu MooTools. Għalkemm, I ma ssib ftit isir ukoll slider doppja ippinjat fil-forum MooTools, L-unika problema kienet li dawn kollha kwalitá sliders jkollhom l-markatur tad-distanza magħżul. Fl-aħħarnett! I deċiż biex toħloq tiegħi stess. Ukoll! I ma jużaw il-kodiċi oriġinali u timmodifikaha li jkollha sfond slider li indikat l-firxa magħżula fuq livell viżiv, bħala fl-eżempju tiegħi hawn taħt. L-oqsma BLUE jindika l-medda ta 'valuri magħżula.

Ara 2.2 Verżjoni Demo | MooTools Download Double ippinjat Verżjoni slider 2.2 (ddawnlowdjati 11503 darbiet)

Tista 'faċilment jibdlu l-dehra u sensazzjoni ta' l-indikatur firxa (bil-blu fl-eżempju hawn fuq), il-pum slider, il-binarju slider billi timmodifika l-slider.css kif meħtieġ.

Do qatra me kumment jekk issibha utli.

Qabel kellna biex jittrattaw CSS biex joħolqu layouts paġna tagħna, allinjament xi kontenut ġewwa ċelloli tabella deher play biss tat-tfal. Sempliċement jistabbilixxu l-"jallinjaw" jew "valign" proprjetà tat-tabella li jkollhom l-allinjament ta 'l-għażla tiegħek, biċċa kejk!
Bil taqsim CSS, għalkemm għandna "vertikali 'allinjament" proprjetà għall-elementi, ma jidhirx li tkun sempliċi daqs l-"jallinjaw" jew "valign" Properties. Biex wieħed ikun aktar specifiic l-"vertikali 'allinjament" qatt ma jidher li issolvi kwalunkwe problemi tiegħek, speċjalment jekk huma jiktbu biċċa ta' cross-browser CSS.

Mingħajr l-użu tat-Tabelli HTML, IL-PROBLEMA ta 'tiffoka fuq oġġett, kemm jekk tkun ta' immaġni jew xi test fi diviżjoni fihom, x'aktarx ilha kull lejl iżviluppaturi UI / CSS f'xi punt. Din il-problema aktar testrapola inkwiet tiegħek ta 'allinjament, jekk l-oġġett li jkun iffukat huwa dinamiku fin-natura, jiġifieri meta l-għoli tagħha hija varjabbli (tul mhux magħrufa).

Għalkemm m'hemm l-ebda soluzzjoni magħruf ħafif li tkun taħdem fuq il-firxa ta 'browsers għandna biex jittrattaw, is-soluzzjoni li jien ippruvajt li jaslu ma jidhirx li jaħdmu fil-browsers ftit li jien ippruvati f' (IE6, IE 7 , FF).

SOLUZZJONI:
Fil-browsers bħall Mozilla, Opera u Safari, Il-stramba iġib ruħu "vertikali 'allinjament" proprjetà jistgħu jinġiebu sensi tagħha, sempliċement billi jiġu ffissati l-"wirja" proprjetà tad-diviżjoni li fiha li "mejda taċ-ċelluli" (wirja: tabella taċ-ċelluli) .

Il-problema xorta tibqa 'familja IE ta' browsers, li, iżda ma jidhirx li jifhmu dak li mal-"tabella ta 'ċellula" proprjetà u injorant kif inhuma, huma biss jinjoraha. Is-soluzzjoni mogħtija hawn taħt, għalkemm sempliċi, ads ftit elementi aktar DOM għall HTML tiegħek biex tagħmel affarijiet jiġri.

Il-HTML u CSS tidher bħal dan
.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/> opinjonijiet: 3456 </ div>
</ Div>
</ Div>

Ir-riżultat tidher bħal dan: -

tara l-demo hawn | Il Fajls Download Sors (ddawnlowdjati 448 darbiet)

TOP Tallinja 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/> opinjonijiet: 1234 </ div>
</ Div>
</ Div>

Ir-riżultat tidher bħal dan: -

QIEGĦ Tallinja 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/> opinjonijiet: 1234 </ div>
</ Div>
</ Div>

Ir-riżultat tidher bħal dan: -

tara l-demo hawn | Download hawn

Tidher bħal etajiet, peress li jien kien qed jipprova jsib soluzzjoni raġonevoli biex din il-problema allinjament. Imma issa ma din is-soluzzjoni, inħoss fil-paċi ftit.

Bil-tama li someday

• vertikali-allinjament proprjetà CSS se taħdem bhalu ma ġewwa ċelloli tal-mejda, mingħajr ma jkollhom jegħlbu ħafna madwar l-bush
• Mill-inqas, l-iffissar marġini ta 'fuq: awtomatiku u marġini tal-qiegħ: auto, ser jagħti l-istess riżultat bħal ma marġini tax-xellug u s-sett marġni tal-lemin l-awto
• Il-gwerer Browser se tkun fuq xi jum.
• Se jkun hemm biss ONE Browser għall KOLLHA.

Niżżel il-HTML u CSS tas-soluzzjoni hawn fuq hawn (ddawnlowdjati 448 darbiet) .. għal ftehim, il-CSS ma jkunx ġie ottimizzat

PS: U mill-mod, dawn huma thumbnails ta 'xi ritratti nkun għafast ...

Mhux li hemm biss ftit Lightbox li tista 'ssib meta inti google. Il-kwistjoni mal-maġġoranza ta 'l-lightboxes li sibt kienet li dawn kollha dehru li jintuża wieħed jew l-oqfsa oħra piż tqil JavaScript simili, jQuery prototip, MooTools u ħwejjeġ bħal dawn. Dawn huma kollha jibred u swanky tfittex. Iżda Jekk ħtieġa tiegħek huwa "Imma nixtieq A SKRIPT Lightbox sempliċi u ħfief għall-sit tiegħi", allura hawnhekk hija;

Xi karatteristiċi sbieħ ta 'dan Lightbox

1. Ħfief ħafna
   1. 4kb ta Skripts meta ppakkjati (8 kb mhux ippakkjat)
   b. 2 kb ta 'CSS
   c. Ftit linji ta 'HTML għall-kontenitur Lightbox
2. Sempliċi biex jifhmu u jimplimentaw
3. Jista 'jkollhom lightboxes multipli fuq l-istess paġna.
4. Il-kontenitur Lightbox istess hija użata biex juru, kontenut differenti (li huwa separat inkluża bħala diviżjonijiet moħbija fil-paġna), jiddependi fuq il-link / għażla li huwa għafast.
5. Awtomatikament ċentri innifsu, tieħu in konsiderazzjoni l-fatturi bħall-għoli Tieqa u wisa '(riżoluzzjoni iskrin), ammont paġna iscroll u l-għoli tal-kontenut tal-Lightbox
6. Ittestjati fl-IE 7 & FF

Ara Demo |
Download Lightbox Sors Zip (ddawnlowdjati 1791 darbiet)

jo.js, il jo_pack.js [verżjoni ppakkjati]: - sett sempliċi ta 'OĠĠETTI JavaScript [JO], li fih, l-element tieqa u skripts pożizzjonament dokument. Tista 'tiftaħ JO.JS jekk inti tixtieq li tikseb idejk maħmuġ ma' xi Javascripting Avvanzata, il-ħolqien funzjonijiet astratti, li testendi proprjetajiet element u bħal dawn. Jekk inti mhux wisq fil Javascripting, Ħallieh waħdu.

lightbox.js, lightbox_pack.js [verżjoni ppakkjati]: - Fihom skripts dawl maniġer kaxxa. Jekk inti disinjatur paġna, wkoll responsabbli mill-implimentazzjoni l-Lightbox fuq il-paġna, inti jeħtieġ li jifhmu l-LightBoxManager. LightBoxManager bażikament fiha biss żewġ funzjonijiet showLightBox u closeLightBox.

lightbox.css: - Jekk taf CSS, inti tista 'tilgħab madwar mal lightbox.css biex jippersonalizzaw il-ħarsa n-jħossu lightbox.css

index.html: l-implimentazzjoni tal-kampjun tal-Lightbox b'żewġ kontenut differenti

lb_underlay_bkg.png: - Dan huwa dawl / simi immaġni trasparenti li jintuża l-isfond għall-underlay Lightbox [Underlay hija s-saff taħt il-lighbox, li jipprevjeni l-utent minn tikklikkja kwalunkwe entità oħra fuq il-paġna, filwaqt li l-Lightbox huwa miftuħ]. Tista 'tuża kwalunkwe immaġni jew anki kulur solidu għal dan il-għan, jiddependi fuq id-disinn paġna u l-ħtieġa.

icon_lb_close.gif: - L-immaġni għal manku Lightbox qrib fuq il-lemin ta 'fuq tal-kaxxa tad-dawl. Jistgħu jużaw kull xbiha bħala kull disinn

Ara Demo |
Download Lightbox Sors Zip (ddawnlowdjati 1791 darbiet)

Jekk jogħġbok ibgħatilna kummenti tiegħek u feedback ...