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');">

1 komento | tag: | na-post sa JavasScript

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.

1 komento | tag: , , , , |-post sa mga Browser Quirks , HTML

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 1990 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 1990 ulit)

15 mga puna | tags: , , | nai-post sa Download , UI Bahagi

2008 Dis 2 2008

Simple Cross Browser Rating Script Para sa Mootools

MooRating ay isang simpleng (kalyeng browser, siyempre bilang ito ay gumagamit ng kapangyarihan ng library MooTools), magaan at mahusay Mootools batay rating solusyon. Hindi ito ay termed bilang "Star Rating", lamang dahil, ang imahe ng rating ay maaaring maging bilang na pinili mo (ibinigay ko ang mga bituin, Bar at puso sa pag-download, ngunit maaari kang lumikha ng iyong sariling mga iba't-ibang at lamang drop ito sa).

Paano ito ganito ang hitsura:

Mootools Rating na may ibang mga imahe Tingnan ang Demo
Mootools Rating na may halaga Porsiyento Tingnan ang Demo
Mootools Rating na may fractional halaga Tingnan ang Demo

I-download ang Mootols Star Rating Script (Nai-download na 718 beses)

Rating data: Buong Number, sa Decimal o Porsiyento
Kasalukuyang script ay dinisenyo upang ipakita ang data rating ng buong halaga (1,2,3,4,5), sa mga desimal (1.24, 3.45 etc) o sa porsyento (12%, 55% etc). Ang pagpili sa ipakita ang data sa anumang ng mga nabanggit format ay maaaring itakda lamang sa pamamagitan ng pagbabago ng bandila ilang mga halaga sa loob ng javascript (moorating.js)
Talaga may mga dalawang e dalawang flag upang i-play sa, para sa pagpapakita ng mga halaga sa format na iyong pinili ...

var inpercent = false; / / Itakda ang bandila na ito sa tunay, kung kailangan mo ng porsyento halaga na ipapakita
var isFractional = maling / / Itakda ito sa tunay, kung gusto mong mga fractional halaga tulad ng 1.24, 1.25, 4.56 kaysa sa 1,2 ... 5

At wala ako sa tingin may anumang paliwanag na kinakailangan para sa. Bukod pa rito. Ang script ay napaka-simple. Kung alam mo ng kaunti javascripting, maaari mong baguhin ang script upang makakuha ng anumang uri ng halaga ipinapakita. Para sa halimbawa kung nais mo ang tatlong mga lugar ng decimal na ipapakita ... sabunot lang ang script sa ibaba ...

kung (isFractional) {if (x <= 5 | | x> = 0) moostartval [i] innerHTML = formatNumber (x, 3);} / / 2 ay nagbago sa 3
iba {moostartval [i] innerHTML = Math.round (x);

Ina-update ang Marka Halaga:
Na havent ako bothered pagsulat anumang mga script ng AJAX para sa pag-update ng mga Ratings ng halaga, dahil alam ko mula sa aking karanasan na hindi laging balak ko ito i-update ang RATING sa lalong madaling bagay rate gumagamit. Ikaw ay libre upang gawin ang anumang nais mo sa rate halaga, I-update ito gamit ang AJAX o Isumite ito o Itakda ang isang nakatagong form na halaga ng patlang, na isinumite kasama ang buong form atbp

function na updateRating (id, rating) {
/ / Alerto (id + "," + rating);
/ / MERON Anuman MAY ANG RATING
}

May ay pagpapaandar sa javascript na tinatawag na "updateRating". Ang function na ito ay nakapasa sa ID ng div Rating, upang makilala bilang sa kung aling mga rating (kung may higit na isang rating sa pahina) ay na-update at ang halaga ng rating [updateRating (id, rating)]. Maaari kang pumili sa kahit anong gusto mo sa mga halagang ito, bilang ko nabanggit mas maaga.

Imahe ng Rating: Bituin, puso, Bar o anumang bagay mangyaring mo
Ang pagbabago ng rating sa anumang ng sa itaas na uri (mga bituin, puso atbp) ay napaka-simple. Lumikha lamang ng isang imahe na katulad sa ang isa na ibinigay at drop ito in Tandaan, kung mong baguhin ang pangalan ng imahe, huwag gumawa ng mga kinakailangang mga pagbabago sa ang CSS file, tingnan sa ibaba.

. Moostar {margin: 0px; padding: 0px; overflow: nakatagong; width: 84px; taas: 20px; Float: kaliwa; background: url ('stars.gif') repeat-x;}
. Moostar span {Float: kaliwa; margin: 0px; padding: 0px; display: block; width: 84px; taas: 20px; text-dekorasyon: none; text-indent:-9000px; z-index: 20;}
.. Moostar na curr {background: url ('stars.gif') pakaliwa 25px;}

Karamihan rating widget ay gumagamit ng mga bituin at ang kalahati-star na mga imahe na may mouse sa mga kaganapan sa bawat bituin. Moo Ratings ay gumagamit ng isang simpleng engkanto imahe bilang isang imahe sa background upang makamit ang mga kinakailangang visual na mga epekto sa isang napakababang overhead.

Pangangailangan: Mootools 1.2
I-download ang Mootols Star Rating Script (Nai-download na 718 beses)

walang mga komentaryo | tags: , , |-post sa Download , UI Bahagi

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