2009 Jul 27 2009

User Agent Style Sheet: misteryo margin sa Google Chrome

Kahapon, tulad ng bawat ibang "Araw Ground taong matakaw", ako ay nagtatrabaho sa ilang mga layout ng CSS / tableless. Lahat ay pagpunta sa IE 7, FF 3 at Chrome, untill biglang, Nakita ko ang ilang mga di-ignorable margin na nakikita lamang sa Google Chrome. Kahit na napaka kakaiba at worring, Ito ay ilang mga bagong bug / isyu na ako ay dumating accross, nagkaroon sa wakas ng ilang pagandahin sa aking pangmundo trabaho. Malungkot (ngunit magandang) May maayos ito sa loob ng ilang minuto ng probe ...

Talaga, mukhang hindi pinansin ng Google Chrome ang aking CSS Resets (margin: 0px). Talagang ito ay dulot ng ang stylesheet user agent (-WebKit-padding-simula: 40px). Kaya solusyon ay upang i-reset ito estilo sa pamamagitan ng pagtatakda ng padding: 0 ang magulo na mga elemento.
Ang isang mabuting paraan upang maiwasan ang problemang ito mula sa nangyayari sa anumang elemento ay gamitin ang isang global CSS REST tulad ng mga sumusunod

* {Margin: 0; padding: 0;}

Ano ang User Agent Style Sheet (Specification)?
Ang mga sumusunod na sipi ay kinuha mula sa http://meiert.com/en/blog/20070922/user-agent-style-sheets/ , follow link na basahin ang higit pa sa User Agent Style Sheet

CSS 1 introduces ang mga ideya sa pamamagitan ng na nagsasabi na ang bawat User Agent (UA, madalas isang 'web browser' o 'web kliyente) ay magkakaroon ng isang estilo ng sheet ng default na nagpapakita ng mga dokumento sa isang makatwirang - ngunit arguably ng makalupa - paraan. CSS 2 sabi na matularin ahente ng gumagamit ay kailangang mag-aplay ng isang default sheet estilo (o kumilos bilang kung sila mismo) at na ang default na estilo ng isang user agent ng sheet ay dapat ipakita ang mga elemento ng ang wika dokumento sa paraan na masunod ang pangkalahatang inaasahan pagtatanghal para sa mga wika dokumento; CSS 3 ay malamang na maging ng parehong isip.

Dahil ang CSS pagtutukoy iwanan ito sa pagpapatupad kung gamitin ang isang "real" style sheet para sa default na display o hindi, hindi ito ay kahanga-hanga na hindi mo mahanap ang isang default na estilo ng sheet sa pag-install ng folder ng bawat browser. Hindi tulad ng Internet Explorer ng Microsoft pati na rin ang Opera, halimbawa (at Sa pagkaalam ko), sa Gecko browser tulad ng Firefox at Netscape Navigator (hanapin para sa "html.css") ngunit din Konqueror kaysa gawin itong simpleng upang maunawaan ang kanilang mga default styling.


2009 Mar 24 2009

AY pinagana = "true" at pinagana = "huwad" ang parehong?

Ito mga lumang paaralan, ngunit gaya ng dati na ito ang aking memory karagdagan ...
Kaya ay pinigilan = "true" at pinagana = "huwad" na parehong? Oo
... Huwag naniniwala, na rin! thats ang paraan na ito ay ... dito ay ang ilang mabilis na paliwanag ...
"Pinagana" ay isang katangian ng anumang form ng elemento / patlang at samakatuwid ay maaaring tumanggap ng anumang halaga sa pamamagitan ng kanyang likas na katangian.

Hangga't bilang katangian na ito ay kasalukuyan, sangkap ay hindi pinagana alintana ang halaga nito. para sa halimbawa.
<input type="text" value="This disabled" disabled>
<input type="text" value="This disabled" disabled="disabled">
<input type="text" value="This disabled" disabled="true">
<input type="text" value="This disabled" disabled="false">

Lahat ng sa itaas ay ang form na ito patlang na "Disabled".

Hindi lang ang pagbibigay ng attribute "Disabled" mapigil ang Patlang ng "ABLED" ... tulad ng sa ibaba

<input type="text" value="This ay hindi disabled" />

Tandaan "Anumang halaga (o walang halaga sa lahat) ng kapansanan attribute, ang browser ay render ito pinagana". Upang panatilihin ang mga bagay na malinaw sa aming mga isipan W3C pinapayo na gamitin namin pinagana = "kapansanan" sa sitwasyong ito.

Ito ang pagkakaiba kahit na kapag ginagamit namin ito attribute sa javascript ...

document.form.element.disabled = true; / / ang mga elemento ay hindi pinagana
document.form.element.disabled = false; / / ang mga elemento ay pinagana

Sa itaas na mga argumento ay din tunay na para sa mga katangian at mga elemento:

  • check (radio button at checkbox)
  • napili (opsyon)
  • nowrap (td)

2009 Mar 22 2009

SevenUp! Hikayatin ang mundo sa mapupuksa ng IE6!

Pagsisimula ng Google ng isang kilusan na prompt mga tao sa tambakan ng basura IE6 ... Sa pamamagitan ng bugging IE6 gumagamit sa isang popup sa pahina ng pagkarga ... ay maaaring hindi isang magandang ideya ... pero pagiging isang UI developer, mayroon akong sumali sa band kariton ... isa mas mababa browser para sa akin ay mag-alala tungkol sa ... Paumanhin makasarili ito ay! ngunit ako ay isama ang javascript na ito ... (Subukan ang PAGE SA IE6) ...
Uy! at sa ang maliwanag na tala ... Tingnan ito ay isang pagpapakita ng kapangyarihan ng JavaScript .... maaari itong dalhin kahit isang higanteng (o kapag ito ay)

KAYA ... Tulong mapupuksa ang mundo ng IE6 sa isang linya ng javascript!

http://code.google.com/p/sevenup/


2009 Mar 19 2009

Dalhin Down IE6, nito tungkol sa oras!!!


Sa isa pang browser sa pangangalaga mula sa bukas! (IE8 pagdating ng nito Beta Estado bukas) ... nito talagang mataas na oras IE6 ay ibinigay nito Long Dahil awa Kamatayan ... United namin tumayo para sa pagkahulog ng IE6

"IE6 ay ang bagong Netscape 4. Ang mga hacks na kinakailangan upang suportahan ang IE6 ay increasingly tiningnan bilang labis na kargamento. Tulad ng Netscape 4 noong 2000, IE6 ay pinaghihinalaang na pagtitimpi sa web. "

Sa Jeff Zeldman, pamantayan gurong hindu

At samantala para sa mga tulad ng sa akin na bahain sa mga tawag ng paglabag ng mga CSS layout sa IE8, dito ay ang lumang gawain sa paligid ng / ayusin gamit ang Meta Tags (meta http-equiv = "X-UA-katugmang") maaari mong subukan ...

Masama behaving IE8: CSS Layout breakages na (-target ang isang bersyon ng browser na gamit ang mga meta tag sa IE8)


2009 Mar 7 2009

Pagtawag ng Maramihang Windows mga function Onload Sa Javascript

Heres isa pang maliit peice ng Javascript linlang na ako ay may sa humukay sa paligid dahil ang sitwasyon ang commaned ito. Sa isa sa aking mga web site, ako ay may situasyon na ito kung saan ako ay upang ipatupad ang "windows.onload" dalawang beses. Ang unang bagay na dumating sa isang bagito isip tulad ng minahan (Mayroon akong matapat sabihin na, dahil ako ay gumagamit ng javascript Frameworks at mga aklatan, ako forgotton upang gawin ang mga simpleng mga bagay-bagay sa aking sariling ... malungkot ngunit totoo), ay ang mga sumusunod na pamamaraan ...

 window.onload = onloadfn1;
 window.onload = onloadfn2;
 window.onload = onloadfn3;
 atbp ...

Paumanhin upang sabihin ngunit, ito kostumbre gumana ... wala ang nais na talakayin ang pagpapatupad science ng Javascript magkano ... pero ayon sa aking mga kamakailan-lamang na karanasan, lamang ang huling function na sa (onloadfn3) ay masama talaga makapag pinaandar.

Sa normal na sitwasyon, hindi katulad mina (na kukunin ko na makipag-usap tungkol sa isang maliit na mamaya) ... maaari mong gawin ang isa sa mga sumusunod na execute mutliple onload function ....

O isang bagay tulad nito

 function na doOnLoad () {
         onloadfn1 ();
         onloadfn2 ();
         onloadfn3 ();
 }
 window.onload = doOnLoad;

Para sa aking kasalukuyang sitwasyon, hindi ko maaaring gamitin ang alinman sa itaas ...
Bakit kailangan kong tumawag sa windows.onload dalawang beses, sa halip na pagtawag ng dalawang mga function sa loob ng isang solong onload function na? Narito ang mabilis na pagtingin sa aking mga pahayag ng problema ...

"Aking Site pahina ay nakabalangkas na tulad ng tema WordPress .... yan ay isang mga karaniwang Header.php at Footer.php na makakakuha ng kasama sa lahat ng mga pahina site. May ay isang onload function na implementaion sa ang Footer.php upang gawin ang ilang mga karaniwang onload function. AT may mga ilang mga pahina na kailangan sa isang bagay ng kanilang sariling ONLOAD, hiwalay mula sa mga nagawa ng mga karaniwang onload function na. Kung ako ay magtalaga ng callback function na direkta sa handler window.onload, ito ay over-sumakay dati itinalaga callbacks sa ang Footer.php "

.... Ang aking problema naunawaan :) ?

Na rin! may ilang mga solusyon na ako ay mahanap. Lahat sila ay halos katulad at ay pangunahing implementions ng isang solusyon na ibinigay ng Simon Willison ( http://simonwillison.net/2004/May/26/addLoadEvent/ ) ...

Solusyon:

Lamang idagdag ang javascript code sa site ...

 ng pagpapaandar addLoadEvent (func) {
     var oldonload = window.onload;
     kung (typeof window.onload! = 'function na') {
        window.onload = func
     } Ibang {
        window.onload = ang function () {
            kung (oldonload) {
                   oldonload ()
           }
           func ()
        }
    }
 }

At tawagan ang mga ito sa halip ng sa karaniwang "windows.onload"

 addLoadEvent (FunctionToRunOnPageLoad);
 addLoadEvent (ang function () {
 / * Higit code upang tumakbo sa pahina ng pagkarga *
 }); 

Bentahe ng code snippet na ito ...
1. Lalo na, hinahayaan Ito mayroon kang maramihang mga kaganapan windows.onload, na tinatawag na mula sa mga mga seperate bahagi ng iyong code, walang overridding ang nakaraang kahulugan
2. Ito ay talagang mahinhin. Ito ay maaaring ilagay sa isang file sa iyong iba pang mga script o sa isang hiwalay na file.
3. Gumagana ito kahit na kung window.onload ay nai-set.


2009 Peb 18 2009

Sa pagdaragdag DropShadow Upang imahe Paggamit ng CSS

Isa pang mabilis na tut. Narito ang isang bagay na simple at gandang gamit ang kapangyarihan ng CSS ... ngunit noon ay mahirap-concieve (at tiyak na ito ay hindi ako) upang magsimula sa. Ng pagdaragdag Dropshadow, ay maaaring maging isang peice ng cake para sa marami sa atin, gamit ang ilang mga imahe sa pag-edit ng mga kasangkapan tulad ng Photoshop anf Paputok atbp
Ang dahilan kung bakit, sumali ako para sa drop anino paggamit ng CSS ay na, sa karaniwan habang ang paglikha ng isang pahina ng disenyo / html ng isang application, ang mga kinakailangan na panatilihin iterating. Ano ang ibig sabihin ko, Sa isang umiiral na web site na may maraming mga imahe, tulad ng mga pagpapakita ng mga freinds ng listahan o ng isang imahe gallery, ito ay mahirap sa reprocess ang buong load ng mga imahe na ay na na diskargado upang idagdag o alisin ang mga anino, para sa na bagay na ito.
Kaya Kung nagawa mo na ang isang maliit na pasulong na pag-iisip habang lumilikha ang mga HTMLS upang magdagdag ng mga karagdagang mga dibisyon o karaniwang sitwasyon ay na mayroon kang isang Umikot lohika sa pagbuo ng mga icon na ito / thumbnail sa XSL, PHP. Java o anumang iba pang mga programming / scripting wika, maaari mong idagdag ang mga ito anumang oras, pagkatapos ay ang bagay ng palabas at pagtatago ng mga anino ng paggamit ng CSS Ipakita ang ari-arian, tulad ng bawat ang mga kliyente na kailanman pagbabago ng mga pangangailangan ... havn't gawin ko ito uri ng pasulong iniisip bago ito ... ngunit ahev makapagsimula ngayon!

Sa halimbawa sa ibaba, ang orihinal na imahe ay ang anino libre at ang mga dropshadows ay inilapat bilang kinakailangan! DIN, ako ay nawala ng kaunti dagdag na, sa pamamagitan ng paggamit ng mga trick ng aking mas maaga Tut (Well! ang mga marahil ay pinakamaikling iba't-ibang ng Tutorial, kaya ito ay lamang justified pagtawag sa kanila "Tut" 's) tungkol sa paggamit ng CSS Clip Property para ipakita off lamang

Orihinal na Imahe

original_image

CSS DropShadow Resulta
css_dropshadow_results
Tingnan ang Demo | Download sourcefiles


2009 Peb 17 2009

Understandng Ang CSS Clip Property

Bakit ko nais upang maunawaan ito?? ... Humm!!!!

Karamihan ng mga CSS manunulat ay sumang-ayon na ari-arian CSS Clip ay marahil isa sa pinaka un-ginamit na mga katangian ng CSS. Ito ay totoo para sa akin masyadong at ay pinaka-masaya sa kapabayaan ito, hanggang sa sinimulan ko ang pagbabago Knob MOOTOOLS DALAWANG (Pin) Slider Component (sa Saklaw tagapagpahiwatig) .

Nagkaroon ng isang magandang mungkahi mula sa isa ng mga bahagi ng mga gumagamit upang baguhin ang Slider ng Component na gamit ang clip mga backgroud imahe (laban sa isang variable na lapad ng division) upang ipahiwatig ang hanay ng slider. Kaya dumating ang aking oras upang ipasok ang saya ngunit un-chartered (para sa akin ofcourse) tubig ng ari-arian ng CSS Clip.

Na rin! kung paano mahirap ito? Hindi magkano sa lahat ... OO at HINDI. Ang syntax na gamitin ang CSS Clip ari-arian ay medyo tuwid ngunit ang kahulugan / usuage na bit ng isang croocked. Sa isang memory tulad ng minahan, everytime umupo ako sa rework sa aking Slider ng Script ... Mayroon akong tokeep nagre-refer na bumalik sa paggamit ng ari-arian clip na ito, upang ipaalala sa aking sarili ang lohika na aking nilikha sa aking script .... Kaya! naisip na panulat ito pababa, na may pag-asa tandaan ito sa hinaharap (at din para sa pakinabang ng mga na tila boggled ng CSS Clip Property)

Ano ang CSS Clip gawin?

Clip ay bahagi ng visual na mga epekto ng module ng CSS 2.1. Maglagay lamang, ang trabaho nito ay upang maglagay ng isang window na makikita sa tuktok ng isang bagay na clip, kaya mabilis sa paggalaw ng mga larawan at paglikha ng mga thumbnail nang hindi upang lumikha ng karagdagang mga file (na ako ilagay ang tampok na ito upang mas mahusay na paggamit sa Component Slider :) )

Paggamit ng CSS Clip ari-arian, maaari kang lumikha ng isang clipping gamit ang rect hugis. Tulad ng maraming iba pang mga Katangian ng CSS (tulad ng margin, padding etc), gamit rect nangangailangan ng apat na coordinate Top, Kanan, Ibaba, Kaliwa (TRBL). Ang croocked likas na katangian ng ari-arian na ito ay sumasalamin kapag magdadala sa iyo ng isang mas malapit tingnan kung paano clip kinakalkula ang clipping rehiyon, gamit ang mga apat na coordinate (nagpapadala ng utak ng isang siklutin para sa isang habang). Ngayon upang makalito mong ibaba ang pagsisimula mula sa tuktok, at ang karapatan ay nagsisimula mula sa kaliwa. :) . Makikita mo kung ano ang i sinabi? .... Samakatuwid ang post na ito ...

Ang maliit na pagkalito na ito ay maaaring madaling mawala, na may ang visual paliwanag na ito ng sa CSS Clip / rect ari-arian bilang sa ibaba!!!!

CSS Clip Pangangailangan

Ang gawain na Sinimulan na namin ay sa clip ang mga sumusunod na imahe ng Thumbnail sa isang imahe squarer na naghahanap (at din ng isang malawak na-anggulo imahe)

original_image clip_demo
Orihinal na Thumbnal / Imahe Pangangailangan ng clip para sa Sqaure Thumbmail

CSS Clip Resulta

clip_results

Tingnan ang Demo | Download sourcefiles


2008 Dis 25 2008

Nilo-load ang JavaScripts dynamic

Minsan upang panatilihin ang mga pageweight down na ... split namin na ang aming mga script sa fragments ... mga mga javascript fragments na ito ay maaaring mai-load bilang at kapag kinakailangan (sa isang kaganapan o sa pag-click ng isang link o pindutan atbp).

Nilo-load ang Javascripts dynamic ay simple at medyo tuwid forward bilang sa ibaba ...

= “text/javascript” > <Script type = "text / javascript">
ng pagpapaandar loadNewScript (pinagmulan) {
var s = document.createElement ('script');
s.setAttribute ('uri', 'text / javascript');
s.setAttribute ('src', pinagmulan);
document.body.appendChild (s);
}
</ Script>

at maaari kang magkaroon ng sumusunod na link tawag kahit saan sa katawan, o maaari kang magkaroon ng script na ito "onLoad" ng dokumento mismo ...

= “javascript:loadNewScript('myDynamicScript.js');” >Load Dynamic Script</ a > <A href = "javascript: loadNewScript ('myDynamicScript.js');"> load Dynamic Script </ a>

o

<body onload="loadNewScript('myDynamicScript.js');">


2008 Dis 17 2008

Masama behaving IE8: CSS Layout breakages na (-target ang isang bersyon ng browser na gamit ang mga meta tag sa IE8)

Kung ikaw ay ang css tao, alam mo ang sakit sa pagkuha ng iyong mga layout gumagana ang cross-browser. IE8 ay isa pang spanner sa gumagana para sa amin mga developer. Anywaz! kung pinindot ninyo sa isyung ito, Tulad ko kahapon, kung saan ang iyong ganap na gumagana ang CSS sa IE7 (at mas maaga) at Firefox ay biglang nagsimula pagkahagis ang mga tantrums sa IE8, subukan ito ... mabuti Ito tila upang ayusin ang aking mga problema para sa mga sandali ....

Paggamit ng Meta pahayag, maaari naming tukuyin ang rendering engine gusto naming IE8 gamitin. Kaya pilitin IE8 sa render ng IE7 ... Ipasok ang sumusunod na meta tag sa head ng iyong dokumento: -

<meta http-equiv="X-UA-Compatible" content="IE=7" />

Sa pamamagitan ng default IE Meta ay: -

<meta http-equiv="X-UA-Compatible" content="IE=8" />
na kung saan ay gumawa ng mga IE8 render ang pahina gamit ang bagong mga pamantayan ng mode.

Kung kinakailangan, ang syntax na ito ay maaaring gamitin upang accomodate para sa iba pang mga browser tulad ng sa ibaba:

<meta http-equiv="X-UA-Compatible" content="IE=8;FF=3;OtherUA=4" />


KARAGDAGANG sa Tungkol DOCTYPES:

KUNG ikaw ay pa pamilyar sa ng uri ng hayop na tinatawag na "Doctype" ... dito ay ang ilang mabilis na basahin
Ano ang DOCTYPES? Ano ang mga mga browser QUIRKS & MAHIGPIT Mode?
Pagtatakda ng DOCTYPE sa XSL

Para sa isang mas malalalim na-unawa tungkol sa DOCTYPES, subukan ang pagbisita sa mga link na ito ...
Listahan Bukod: Ayusin ang Iyong Site Gamit ang right DOCTYPE!
A List na Bukod: Higit pa na DOCTYPE: Web Standards, Ipasa Kakayahan, at IE8

Tandaan: Kahit na marami sa atin HTML / CSS tao ay neglecting ang kahalagahan ng DOCTYPE decleration sa aming mga dokumento, Pagtatakda ng tamang DOCTYPE, ay karaniwang ang sagot sa pinaka krus isyu browser.


2008 Dis 9 2008

Simple Carousel Sa Paging Paggamit Mootools

Sa isang iba't ibang mga Carousels out doon, marami para sa mga Mootools pati na rin, ako pa rin ay nagpasya na isulat ang aking sariling Carousel Class, para sa ilang mga magandang dahilan
1. Nais ng isang tampok ng paging (magagawang lumipat sa isang partikular na slide / hakbang sa carousel).
2. Nais kalayaan sa placement ng ang kaliwa at KARAPATAN mga pindutan / link, kung saan kailanman mangyaring ako.
3. Karagdagang kontrol sa Hakbang Slide.

Ako ay pamahalaan upang lumikha ng isang bagong Carousel, sa itaas na tampok ... bilang sa ibaba ... Huwag mag-atubiling upang magmungkahi ng anumang mga pagbabago na nais mong nangangailangan!!!

Ang aking Halimbawa mukhang ganito ... [ View Demo ]
Mootools Carousel Sa Paging

Tingnan ang Demo | ng Download Mootools Carousel Sa Paging Bersyon 1.0 (Nai-download na 1992 ulit)


1. Carousel Paging

Maaari mong madaling magdagdag ng paging sa iyong carousel, lamang sa pamamagitan ng pagtatakda ng paging flag, na kung saan ay ang huling parater na lumipas habang paglikha ng ang halimbawa ng ang MooCarousel sa tunay na (gusto na paging) o maling (donot kinakapos paging).

var carousel1 = bagong MooCarousel ang (na 'carousel1_wrapper', ang 'carousel1_items_container', ang 'carousel1_moveleft', 'carousel1_moveright', c_ns, c_sss, true); / / ns = bilang ng mga slide, sss = slide hakbang laki

At ofcourse mo maaaring baguhin ang hitsura-n-pakiramdam ng mga achors paging bilang ninyo sa pamamagitan ng pagbabago ng kanilang mga CSS.

. Carousel_paging {text-ihanay: karapatan; margin: 5px 10px 0 0;}
. Carousel_paging kasalukuyang, carousel_paging pahina {balangkas: none; lapad:.. 15px; taas: 15px; linya-taas: 15px; text-ihanay: center; display: block; Float: kaliwa; background: # D8D8EB; margin: 0 1px 0 0; text-dekorasyon: none;}

. Carousel_paging isang: Pasadahan, carousel_paging kasalukuyang {background: # 4D4D9B; kulay: # ffffff;}..

Na rin! may isang maliit na isyu na bagaman, Ang mga anchor ng paging kung set, pagkatapos ito ay makapag-nabuo laging pagkatapos ng Carousel bahagi. Nais kong gumawa ng mga ito dynamic pati na rin, ngunit pagkatapos ay upang panatilihin lamang ang Script para sa pamumulaklak ng mga sukat, ako nagpasya upang laktawan ang mga ito.
Ngunit alam mo ang isang maliit na Javascript, maaari mong madaling baguhin ang paging code generation sa MooCarousel klase sa mangyaring ang iyong mga pangangailangan.

2. Customising ang Kaliwa at Kanan Icon

Maaari mong baguhin ang Placement, imahe o anumang displat na ari-arian ng Kaliwa at Kanan mga Pindutan sa pamamagitan lamang ng naglalaro sa paligid sa CSS. na magagawang baguhin ang mga placement ng Kaliwa at Kanan buttoms ay ang aktwal na dahilan para sa akin sa kanan aking aming Carousel Class.
Dahil ang ng ito MooCarousel Class, tumatanggap ng id ang ng mga pindutan, maaari mo talagang ilagay ang mga pindutang ito kahit saan sa pahina, kung mangyaring ... ito ay hindi na sa hierarchy elemento, tulad ng sa aking halimbawa.

var carousel1 = bagong MooCarousel (na 'carousel1_wrapper', ang 'carousel1_items_container', ang 'carousel1_moveleft', 'carousel1_moveright', c_ns, c_sss, true);

CSS
.. Carousel_container_l, carousel_container_r {margin: 50px 0 0 0; posisyon: kamag-anak; width: 23px; taas: 20px; Float: kaliwa; cursor: pointer;}

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

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

3. Customising Hakbang Slide

Ano ang ibig sabihin ko ang MY CUSTOMISING HAKBANG slide?
Karamihan Carousels slide ang buong ng nakikita window. Kaya sabihin mo ay mayroong apat na item (tulad ng sa aking sample sa itaas), ito ay slide ang lahat ng apat na mga item. Sa Carousel Component na ito, ipasa mo ang bilang ng mga slide at ang laki ng hakbang ng iyong napili.

var carousel1 = bagong MooCarousel (na 'carousel1_wrapper', ang 'carousel1_items_container', ang 'carousel1_moveleft', 'carousel1_moveright', c_ns, c_sss, true);
c_ns = bilang ng mga slide, c_sss = slide hakbang laki

Gayundin, sa aking example1 ko calcuted ang laki ng hakbang ng slide, na batay sa lohika kung saan, alam ko ang bilang ng mga item, lapad sa bawat item at ang mga margin na ibinigay pagkatapos ng bawat item sa aking CSS.

/ * Para sa lasingan 1 * /

var c1_w = 92; / / lasingan Item Lapad

var c1_n = 10; / / Kabuuang Bilang ng Item Comparision lasingan

ang var c1_pp = 4 / / Bilang ng mga Comparision Item perpage lasingan

var c1_marginFactor = 51;

var c1_sss = c1_w * c1_pp; / / sss = slide hakbang laki

var c1_ns = parseInt (((c1_w * c1_n) / c1_sss) + .5); / / ns = bilang ng mga slide

c1_sss + = c1_marginFactor ang; / / sss = slide hakbang laki, 51 para sa mga margin


Pangangailangan: Mootools 1.2

Tingnan ang Demo | ng Download Mootools Carousel Sa Paging Bersyon 1.0 (Nai-download na 1992 ulit)


NDK bahay | Pagpapahayag ng IT | pagpapahayag ng panlasa | pagpapahayag Penmenship | pagpapahayag ng sindak | pagpapahayag ng aking sarili