Blog ng Yahoo! User Interface (YUIBlog)

Yui 3 Quick Tip: Pagdaragdag ng Iyong Sariling Galing

Setyembre 29, 2010 sa 12:22 sa pamamagitan ng Eric Miraglia | Sa Development | 3 mga Komento

Lucas (ang @ ls_n ) post ang snippet na ito sa pagtugon sa isang katanungan ang iba pang mga araw, at Akala ko ito ay nagkakahalaga ng pagbabahagi dito bilang isang mabilis na tip.

Tulad ng karamihan sa mga pili-based idioms, maraming nagpapahayag Yui 3 kapangyarihan ay mula sa kung ano ang maaari mong gawin sa sandaling ikaw ay may reference sa isa o higit pang mga HTMLElements - sa Yui 3, na nangangahulugan na ang pagkakaroon ng isang node reference, kung saan mo karaniwang makakuha ng sa pamamagitan ng Y.one( selector string ) o Y.all( selector string ) . Kaya, Y.one("#foo"). doSomethingInteresting ay isang karaniwang pattern.

Ito ay madali upang mapalawak ang ang Yui 3 ng expressiveness sa pamamagitan ng pagdaragdag ng iyong sariling magic sa node (at / o NodeList). Narito ang isang paraan upang gumawa ng modular at magagamit muli ang iyong extension.

Una, lumikha ng isang bagong pasadyang module (kami ay tumawag ito node++ ):

  YUI.add ('node + +', ang function (Y) {
	
	 / / Tukuyin ang isang function na ay tatakbo sa konteksto ng isang
	 / / Node Halimbawa:
	 function na doSomethingAwesome () {
		 Y.log ("ba ang isang bagay kasindak-sindak dito.");
	 }

	 / / Gamitin addMethod upang magdagdag ng doAwesomeThing sa node tularan:
	 Y.Node.addMethod (sa "doAwesomeThing", doSomethingAwesome);
	
	 / / Extend ang functionality na ito sa NodeLists:
	 Y.NodeList.importMethod (Y.Node.prototype, "doAwesomeThing");
	
 }, '0 .0.1 ', {Nangangailangan ng: [' node ']}); 

Ng diwa ng Lucas ay dito .

Sa na kahulugan sa pahina, node++ ay maaaring use d sa anumang pagkakataon. Sa iyong code ng pagpapatupad, ang nais mong gawin:

  Yui (). Paggamit ('node + +', ang function (Y) {
	
	 / / Gamitin mula sa isang solong node:
         . Y.one ('# foo') doAwesomeThing ();

	 / / Gamitin mula sa isang NodeList:
	 Y.all ('p') doAwesomeThing ().;
	
 }); 

Tandaan na lamang ang Yui Halimbawa (s) na kung saan magbigkis mo ang iyong node++ module ay may access sa doAwesomeThing . Isang tampok ng disenyo na magugustuhan mo bilang ka bumuo ng mga kumplikadong app ay na ang iyong lohika sa pagpapatupad ay hindi kailangan upang baguhin kung ang listahan ng dependency para sa node++ evolves - na makapag gagawin para sa iyo nang awtomatiko sa use() oras, at ang dependency deklarasyon nananatili sa code na kung saan ito pertains.

Maghanap ng mga pag-uusap: Bloglines | Technorati

Ibahagi at pahabain: bookmark sa del.icio.us | Digg ito! | reddit!

Yui Teatro - Dav Glass: (36 min) "Paggamit Node.js at Yui 3"

Setyembre 29, 2010 sa 11:34 ng umaga sa pamamagitan ng Eric Miraglia | Sa Yui Teatro | 11 Puna

Ryan Dahl ng trabaho sa mga Node.js - at ang komunidad na bumubuo sa paligid na proyekto - ay sumali sa HTML5 bilang isa ng malaking kuwento ng 2010. Yui engineer Dav Glass ay nagtatrabaho upang gumawa Yui 3 isang malakas kapanig para Node.js implementers, at sa video na ito siya ay nagpapakita sa iyo kung ano ang siya ay nagagawa ngayon - kabilang ang mga demo ng progressively pinahusay na mga widgets tumatakbo ang parehong code sa client at server. Huwag mawalan ng isang ito.

Kung ang video sa-embed sa ibaba ay hindi magpapakita ng tama sa iyong mga RSS reader, i- click ang sa pamamagitan upang panoorin o i-download ang mataas na resolution na bersyon ng video sa Yui Teatro .

• I-download ang HD video (480p ~ 271MB)
• I-download ang video (m4v)
• Ang isang mataas na-resolution, transcripted na bersyon ng talk na ito ay magagamit sa site ng Yui Teatro

Iba Kamakailang Yui Teatro Video:

• Alois Reitbauer: dynaTrace Ajax Edition - dynaTrace ay nagbibigay ng isa sa mga pinaka-malakas na tool para sa pagsusuri ng pagganap ng mga web application sa Internet Explorer. Sa talk na ito, dynaTrace engineer ang Alois Reitbauer walks sa pamamagitan ng apat na mga tiyak na mga analitiko sitwasyon gamit ang dynaTrace interface.
• Ryan Grove: pagkamit ng Pagganap Zen sa Yui 3 - Sumusunod codified alituntunin ay makakatulong sa iyo na bumuo ng mabilis na mga website, ngunit gusali application na ay malinis, mabilis at extensible din nagsasangkot ng pagkuha ng isang balanseng diskarte sa pagganap sa bawat antas ng iyong F2E trabaho. Yui 3 ay dinisenyo upang tulungan ka sa prosesong ito, na nagbibigay ng karapatan-laki ng layer ng abstraction na may built-in ang pagganap ng magic at ng iba't-ibang mga kasangkapan na gumawa ng mabilis frontend code madali at masaya upang makabuo ng. Sa session na ito, kami ay galugarin ang zen ng performant JavaScript sa mundo Yui 3 at kitang ipakilala sa ilan sa ang malakas na tool Yui 3 naglalagay sa iyong pagtatapon sa bawat app na isulat mo.
• Douglas Crockford: Crockford sa JavaScript - ang tanawin 6: Loopage -unlad ng Software ay hampered sa pamamagitan ng isang tiyak na hanay ng mga pagkakamali sa disenyo na ginawa sa unang programming wika at paulit-ulit sa lahat na nagawa dahil. At, medyo miraculously, ang JavaScript ay pagpunta sa gawin ito ng tama, radically pagbabago ng ang paraan na isulat namin ang mga application. Muli. Sa Umikot ng Kasaysayan, lahat ng ito ay nangyari bago, ngunit hindi ito ang nangyari tulad nito. Ito ay kung bakit dapat kang pakialam tungkol sa paglitaw ng mga server-side JavaScript at ang kaguluhan sa paligid ng mga proyekto tulad ng mga Node.js - hindi dahil ang mga ito sa tulis ng isang takbo, ngunit dahil sila ay kalye ang daan patungo sa susunod na malaking rebolusyon sa software.

Subscribe sa Yui Teatro:

• Yui Teatro RSS feed
• Yui Teatro sa iTunes

Maghanap ng mga pag-uusap: Bloglines | Technorati

Ibahagi at pahabain: bookmark sa del.icio.us | Digg ito! | reddit!

Pagpapatupad Focus: Car renta Express

Setyembre 28, 2010 sa 06:01 ng umaga sa pamamagitan ng ang Stefan Klopp | Sa Sa Wild , pagpapatupad Yui | 2 Puna

Car renta Express ay ang nangungunang independiyenteng kotse rental paghahambing website sa Internet. Ito ay nagbibigay-daan sa mga gumagamit ng kotse upa online sa higit sa 1000 mga lungsod at mga paliparan sa buong mundo.

Ang aming user base ay sa kalakhan di-teknikal, na nangangahulugan na gusto nila upang ihambing ang mga presyo at upa cars bilang madaling hangga't maaari. Gamit ang relaunch ng aming website sa Hunyo ng 2010 kami ay ipinatupad ng maraming mga bahagi ng Yui 2 upang makatulong na magbigay ng aming mga customer na may isang intuitive na karanasan.

Aling mga Yui bahagi ang namin ang paggamit?

Kabilang sa mga bahagi na kami ay gamit ang Manager ng ​​koneksyon , AutoComplete , datasource , Calendar , Animation , JSON , at lalagyan .

Bakit pinili namin ang Yui

Kapag suriin ang iba't-ibang mga aklatan ng JavaScript na maaaring namin maaaring gamitin sa Car renta Express , natagpuan namin na ang Yui ay ang pinaka-kumpletong para sa aming mga pangangailangan. Ang pinakamalaking nagbebenta ng mga tampok para sa amin ang modular diskarte ang Yui kinuha upang ipatupad ang iba't-ibang mga pattern ng disenyo, pati na rin ang matatag na papeles at mga halimbawa nila ibinigay. Mula sa isang pananaw ng pag-unlad na ito na humantong sa mabilis na pag-unlad ng aming mga application nang hindi na magsumikap sa isang library.

Paano gamitin namin Yui

Gamitin namin ang Yui sa isang bilang ng mga paraan. Aming 4 pinaka ginagamit mga bahagi ay AutoComplete, Calendar, lalagyan, at Connection Manager. Narito ang ilan sa mga paraan na ginagamit namin sa bawat isa sa mga bahagi.

AutoComplete

Ang AutoComplete bahagi ay ginagamit malawakan sa aming site upang matulungan ang mga gumagamit na mahanap ang isang lungsod o paliparan kung saan magrenta ng kotse. Gusto talaga namin kung paano madaling ito ay upang ipatupad ang bahagi, at kung gaano kabilis ito tumugon. Namin ang mga resulta sa paghahanap ng cache server-side upang makatulong na mapabuti ang mga resulta ng paghahanap, gayunpaman, ang pagkakaroon ng client-side Caching din nakatulong tremendously sa pagbaybay ang tugon ng bahagi. Isa pang tampok na talaga namin kinuha sa kung gaano kadali ang mga resulta ay sa estilo. Kapag nagpapakita ang mga lokasyon sa gumagamit na ito ay mahalaga bilang na kailangan namin upang matukoy kung aling mga lokasyon kung saan matatagpuan sa mga lungsod at kung saan ang natagpuan sa paliparan.

Kalendaryo

Ang Calendar bahagi ay ginagamit din sa buong site kapag ang ang renter isang ay pagpuno sa mga petsa upang magsagawa ng isang paghahanap. Kami ay gumagamit ng isang customized na bersyon ng John Peloquin Calendar Palugit Pinili at pagpapakita ang mga ito sa isang Yui Dialog . Mahalaga kung ano ang aming nais na gawin ay magbigay ng renter ng isang dalawang-buwan na pagtingin kapag pumipili ng kanilang mga petsa, pati na rin bilang biswal ipakita ang mga ito kung ano ang petsa na sila ay kasalukuyang pinili. Muli, ito ay lubos na tapat upang ipatupad ang gamit Yui 2 Calendar, at ito talaga ay dumating sa paglikha ng isang Yui Dialog, ang pagtatakda ng katawan na naglalaman ng isang div para sa Calendar, pagkatapos attach ng isang Yui Palugit Calendar na div.

Lalagyan

Gamitin namin ang mga lalagyan ng ang Yui buong aming website sa isang bilang ng mga iba't-ibang paraan. Sa halimbawa sa itaas namin ay gumagamit ng isang ng Dialog upang makatulong sa amin ipakita ang Palugit Calendar kapag ang isang gumagamit ay ang pagpili ng petsa. Sa aming pahina ng mga rate ng mga resulta ng paghahanap na ginawa namin mabigat na paggamit ng mga lalagyan upang bigyan ang renter sa karagdagang impormasyon sa iba't ibang mga aspeto ng car rental ahensiya at ang mga sasakyan na maaaring sila ay maaaring umupa. Karamihan ng mga lalagyan sa pahinang ito ang mga panel na namin muling gamitin para sa bawat ibang listahan. Halimbawa, ang display ng sasakyan mga tampok Panel:

Bagay na nakakuha ng kaunti pa masaya sa Renter Rated rating ahensiya. Kapag nagpapakita ang mga rating, gusto namin talagang mag-focus ng pansin ng gumagamit sa iskor ahensiya isang natanggap at upang ipakita ang impormasyon na ito sa isang malinis, madaling-view ng paraan. Sa pamamagitan ng paggamit ng Dialog Control nagawa naming upang mapilitan ang viewport at center madali ang dialog para matulungan kami na makamit ang layuning ito. Sa pamamagitan ng pagtatakda ng isang blangko na header at footer na ito ginawa na styling simpleng sa pamamagitan ng lamang pagdaragdag ng mga angkop na estilo sa aming CSS. Resulta sa dulo ay isang malinis na lalagyan na rating na nagbibigay ng renter na may impormasyon na nais nilang.

Connection Manager

Ang koneksyon Manager ay ginagamit sa buong site kapag kailangan namin upang kunin ang data sa pamamagitan ng isang kahilingan XHR. Sa ilang mga halimbawa sa itaas magamit namin ito bahagi para sa paghiling ng mga lungsod at mga paliparan para sa AutoComplete implementaitons at batak ang rating ng impormasyon para sa Renter Rated Dialog.

Isa kawili-wiling paraan na magamit namin Connection Manager ay sa aming rental block center na sits sa karamihan ng mga pahina. Upang makatulong sa pagganap na kami ng maraming ng buong-pahina na Caching sa marami sa aming mga pahina ng nilalaman. Gayunpaman, gusto pa rin namin upang ipakita ang dynamic rental center block sa mga pahina. Ito ipinakita sa amin ng isang problema na hindi namin nagawa sa malutas sa Connection Manager. Sa halip na lumalabag sa aming lubos na naka-cache na pahina at cache lamang aspeto ng pahina na nakita namin ito ay mas madali na lang isama ang rental block center sa pamamagitan ng isang simpleng kahilingan asynchronous. Natagpuan namin na ito pinapayagan sa amin upang mapanatili ang pagganap mula sa pagkakaroon ng isang ganap na naka-cache na pahina, pa pa ring ipakita ang dynamic na nilalaman sa aming rental center ng kahon.

Final saloobin

Pangkalahatang kami ay lubos na masaya sa aming mga pagpipilian upang gamitin Yui. Ito ay nagbibigay sa amin ng isang modular library na rin dokumentado, madaling gamitin at ipatupad.

Maghanap ng mga pag-uusap: Bloglines | Technorati

Ibahagi at pahabain: bookmark sa del.icio.us | Digg ito! | reddit!

Sa Yui 3 Gallery: Matt Taylor RaphaelJS Module

Setyembre 27, 2010 sa 01:05 sa pamamagitan ng Mateo Taylor | Sa Development , Yui 3 Gallery | 9 Puna

RaphaelJS ay isang malakas na JavaScript library na namamahala ng mga mga SVG guhit at animation. Ito ay nagbibigay-daan sa iyo upang madaling lumikha ng SVG canvases at makahatak ng mga pangunahing hugis at path masyadong madali, kahit na pagsasama ito sa mga hanay at paglalapat ng mga transformations sa isa o maraming mga vectors. Maaari mong gumuhit ng hugis, manipulahin ng mga imahe, at bigyang-buhay ang lahat. RaphaelJS nagbibigay gandang API upang lumikha at baguhin ang mga SVG elemento na may kadalian.

Ang habang aklatan ay kahanga-hanga, ngunit natagpuan ko na ang maaari kong magdagdag ng ilang mahahalagang mga tampok sa mga elemento ng library RaphaelJS sa YUI3. Ko na nagsimula off ang mga pagsisikap na ito sa bagong RaphaelJS Gallery Module .

Tamad Naglo-load RaphaelJS at plugin

Ang unang na tampok ay ang tamad-loading ng hindi lamang ang RaphaelJS na library, ngunit anumang RaphaelJS plugin na maaari mong kailanganin. Ang Module ng RaphaelJS Gallery ay lamang load ang mga file na ito kapag idedeklara mo na gumagamit ka ng mga ito sa loob ng isang Yui sandbox. Halimbawa:

 
 Yui ({gallery: 'gallery-2010.09.22-20-15'}). Paggamit ('gallery-Raphael', ang function (Y) {
 
	 Y.Raphael (). Gamitin (ng function (Raphael) {
		
		 / / Gamitin Raphael dito tulad ng gagawin mo sa labas Yui
		 var papel = Raphael ('myPaper', 500, 500);
 
	 });
 
 });

Kung ikaw ay gumagamit ng RaphaelJS plugin, tukuyin ang kanilang mga landas sa isang array at ipadala na bilang unang parameter sa ang Y.Raphael () gamitin () function.:

 
 Yui ({gallery: 'gallery-2010.09.22-20-15'}). Paggamit ('gallery-Raphael', ang function (Y) {
 
	 ang var myPlugins = ['plugin / raphael.awesomePlugin.js na', 'plugin / raphael.wickedPlugin.js'];
 
	 Y.Raphael (). Gamitin (myPlugins, ang function na (Raphael) {
 
		 / / Gamitin Raphael dito tulad ng gagawin mo sa labas Yui
		 var papel = Raphael ('myPaper', 500, 500);
		 / / Ang 'papel' ay magkakaroon ng anumang mga bagong pag-andar idinagdag sa pamamagitan ng iyong mga plugin ay ngayon
	 });
 
 });

Ang RaphaelJS library ay unang-load, pagkatapos anumang tinukoy na plugin ay load bago ang iyong callback function na ay pinaandar sa ang Raphael bagay bilang lamang ang parameter.

Pasadyang Kaganapan

Kapag ginawa mo ang isang puwang ng guhit sa bagay Raphael, pagkatapos ay maaari mong agad na makakuha ng pababa sa drawing. Kapag tumawag ka ng mga paraan tulad ng rect , circle , at path sa drawing space, makakatanggap ka ng bumalik ang mga bagay na kumakatawan sa SVG vectors. Karaniwan, magkakaroon ka ng access sa kanilang kaukulang mga elemento na DOM sa pamamagitan ng node ari-arian. Halimbawa:

 
 var papel = Raphael ('myPaper', 500, 500);
 var parisukat = paper.rect ang (0, 0, 100, 100);

Lumilikha ito ng isang hugis-parihaba object vector sa coordinate [0,0] na may isang lapad at taas ng mga 100 pixels. Mayroon kang access sa kalakip na sangkap ng DOM (na kung saan ay isang sangkap ng SVG rect ) tulad ng sa gayon:

 
 var rectNode = square.node;
 rectNode.onclick = ang function () {
	 alert ('Binabati kita, ikaw nag-click sa isang parisukat na!');
 };

Kung ikaw ay isang sabik Yui gumagamit, gusto mo marahil gusto ang isang bagay na mas sa ito. Paano ang tungkol sa isang built in Y.Node pati na rin? Tulad ng ang node ari-arian ay tumutukoy sa ang HTMLElement sa likod ng SVG bagay, ang $node ari-arian ay tumutukoy sa Y.Node wrapper para sa na elemento. Kaya maaari mong gawin ang mga bagay na tulad nito:

 
 parisukat. $ node.on ('mouseover', ang function () {
	 alert ('Binabati kita, maaari mong ilipat ang isang mouse!');
 });

Hayaan ng subukan ang isang bagay na mas kumplikado ngayon. Isang pakikipag-ugnayan sa isang vector ay dapat na magagawang maging sanhi ng iba pang mga iguguhit vectors upang i-update ang kanilang mga estilo, i-right? Paano ang tungkol sa aming lumikha ng ilang mga bar na ang lahat ng render ang kanilang mga kulay nakasalalay sa kung saan ang isang mouse ay matatagpuan sa isang bilog sa pahina:

 
 var papel = Raphael (sa 'rcanvas', 600, 800);
 
 . var sa circ = paper.circle (350, 200, 100) sa attr ({fill: 'rosas', stroke: 'itim'});
 
 / / Ng panunulak isang grupo ng parihaba sa isang array
 var i = 0; mga parihaba = [];
 para sa (; i <10; i + +) {
	 rectangles.push (paper.rect (0, 40 * i, 200, 20) ang attr ({fill: 'red', stroke: 'dilaw'}.));
 }
 
 / / Looping sa pamamagitan ng mga parihaba, pagdaragdag ng mga tiyak na bilog handlers mousemove para sa bawat
 Y.Array.each (parihaba, ang function (rect, index) {
	 var i = index + 1;
	 circ. $ node.on (ang 'mousemove', ang function (evt) {
		 / / Ang fill kulay ay dynamic, nakasalalay sa lokasyon ng parihaba na ito
		 / / Sa array pati na rin ang lokasyon ng mouse
		 var lf = circ.attrs.cx - circ.attrs.r,
			 rt = 2 * circ.attrs.r ang + lf,
			 x = evt.clientX-lf,
			 Ang tuktok = circ.attrs.cy - circ.attrs.r,
			 btm = 2 * circ.attrs.r + tuktok,
			 y = evt.clientY-itaas;
			 red = (((128 * x) / (2 * circ.attrs.r)) -1) * i / 6,
			 berde = 256 - ((((128 * x) / (2 * circ.attrs.r)) -1) * i / 6),
			 asul = (((128 * y) / (2 * circ.attrs.r)) -1) * i / 6;
		 rect.attr ('punan', 'rgb (' + red + ',' + green + ',' + asul + ')');
	 });
 });

Halimbawa na ito ay tumatakbo dito , ngunit tulad ng makikita mo sa snapshot sa ibaba, ang kulay ng bawat bar ay nakasalalay sa ang lokasyon ng mouse sa ibabaw ng bilog pati na rin ang order ng ​​bar.

Depende sa kung saan ang iyong mouse cursor ay matatagpuan sa ibabaw ng bilog, ang mga kulay na bar baguhin paisa-isa.

Sa gayon maaari mong makita na ang $node ay isang kapaki-pakinabang na shortcut, ngunit walang kagilas-gilas. Ito talagang hindi kapani-paniwala kung ang ang bawat SVG bagay sa iyo na lumikha sa RaphaelJS maaaring sunog ng pasadyang mga kaganapan . Na ay magpapahintulot sa iyong mga indibidwal na mga elemento sa guhit na apoy ng mga pasadyang mga kaganapan, at anumang bagay sa pahina ay maaaring makinig at tumugon. Ito ay maaaring maging kapaki-pakinabang sa maraming paraan. Para sa mga starters, ito ay nagbibigay ng mga mayaman na pakikipag-ugnayan sa pagitan ng iyong mga guhit. Pakikipag-ugnayan ng gumagamit sa isang vector ngayon ipaalam sa anumang iba pang mga vectors ng pakikipag-ugnayan sa pangangailangan. Nangangahulugan ito na maaari mong programatically sunog ang mga kaganapan mula sa iyong mga guhit kapag ay matugunan ang ilang mga kundisyon. Hindi lamang ang mga ito payagan ang iyong mga guhit na abisuhan ang iba pang mga vectors, ngunit ang anumang sa pahina ay maaaring makinig in

 
 var papel = Raphael (sa 'rcanvas', 600, 800);
 
 . var sa circ = paper.circle (350, 200, 100) sa attr ({fill: 'rosas', stroke: 'itim'});
 
 / / Paggawa ng mga arrays ng mga parihaba at bilog
 var i = 0, parihaba = [], bilog = [];
 para sa (; i <10; i + +) {
	 rectangles.push (paper.rect (0, 40 * i, 40 * i, 20) ang attr ({fill: 'red', stroke: 'dilaw'}.));
	 circles.push (paper.circle (0,0,20) itago ang ().);
 }
 Y.Array.each (parihaba, ang function (rect, index) {
	 var i = index + 1;
	 circ. $ node.on (ang 'mousemove', ang function (evt) {
		 var lf = circ.attrs.cx - circ.attrs.r,
			 rt = 2 * circ.attrs.r ang + lf,
			 x = evt.clientX-lf,
			 Ang tuktok = circ.attrs.cy - circ.attrs.r,
			 btm = 2 * circ.attrs.r + tuktok,
			 y = evt.clientY-itaas;
			 newWidth = (((256 * x) / (2 * circ.attrs.r)) -1) * i / 6,
			 red = (((128 * x) / (2 * circ.attrs.r)) -1) * i / 6,
			 berde = 256 - ((((128 * x) / (2 * circ.attrs.r)) -1) * i / 6),
			 asul = (((128 * y) / (2 * circ.attrs.r)) -1) * i / 6;
		 / / Oras na ito, hindi lamang ang pagbabago ng kulay, ngunit din ang parihaba lapad
		 rect.attr ({
			 lapad: newWidth,
			 punan: rgb ('+ red +', '+ green +', '+ asul +') '
		 });
		 / / Pagpapaputok pasadyang kaganapan na ipaalam na ang sa parihaba lapad na ito ay nagbago
		 rect.fire ('lapad-nagbago', {lapad: newWidth, pinagmulan: rect, order: index});
	 });
	
	 / / Ang parihaba bawat nakakakuha ng tagapakinig na apoy sa lapad-binago
	 rect.on ('lapad-nagbago', ang function (evt) {
		 var attrs mga = evt.source.attrs;
		 / / Makakuha ng nararapat na bilog at ilipat ito sa kanang dulo ng parihaba
		 bilog [evt.order]. attr ({
			 cx: attrs.x + attrs.width,
			 cy: attrs.y,
			 punan ang: 'cornflowerblue'
		 .}) Ipakita ();
		
	 });
	
 });

Tingnan sa ito tumatakbo halimbawa dito . Maaari mo ring makita mula sa ang snapshot ibaba na bilog ay iguguhit sa kanang dulo ng parihaba. Ito ay occuring sa tugon sa pasadyang bawat indibidwal na parihaba pagpapaputok ng kaganapan, na nakuha ng isang handler na gumagalaw ang bilog sa isang posisyon na kamag-anak sa ang kasalukuyang mga katangian ng parihaba.

Ito ay bubukas up ng ilang mga kagiliw-giliw na mga possiblities para sa RaphaelJS loob YUI3. Halimbawa, ano kung maaari naming lumikha ng isang pangkat ng mga hugis ng vector sa group mismo ang entity na apoy sa mga kaganapan sa labas ng mundo? Sa loob, ang bawat vector pagguhit ay maaaring makipag-usap sa kanyang lalagyan sa pamamagitan ng mga pasadyang mga kaganapan, at lalagyan ay gumawa ng mga desisyon tungkol sa kung anong data ang apoy sa labas ng mundo. Bubuksan nito ang ideya ng ganap na encapsulated, interactive na mga kontrol SVG.

Buod

Sa ascendance ng ang HTML5 at mga satellite teknolohiya nito, may mga kaya mas maraming mga opsyon na iba sa Flash para sa mga mayaman na pakikipag-ugnayan. Kainaman, ang anumang vectored mga elemento sa pahina ay dapat na ganap na ma-access at standardized. Ito ay bubukas up ng mga kahanga-hangang mga possiblities para sa amin upang lumikha ng mapuntahan, karaniwang mga kontrol sa web nang walang resorting sa Flash. SVG ay isang sumasamo pagpipilian dahil ang bawat vector na iguguhit sa pahina ay nai-back up sa pamamagitan ng isang DOM node na maaari naming baguhin sa Yui tulad ng anumang iba pang mga DOM node. Na kung ano ang ay nagpapahintulot ang RaphaelJS Module Gallery upang dagdagan ang lahat ng mga SVG bagay na nilikha sa pamamagitan ng RaphaelJS, at na ay isang susi sa mayaman na pakikipag-ugnayan sa mga elments mula sa ibang lugar sa pahina.

Maghanap ng mga pag-uusap: Bloglines | Technorati

Ibahagi at pahabain: bookmark sa del.icio.us | Digg ito! | reddit!

clearfix Reloaded + overflow: nakatagong Demystified

Setyembre 27, 2010 sa 06:27 am sa pamamagitan ng ang Thierry Koblentz | Sa sa CSS 101 | 12 Puna

clearfix at overflow : hidden ay maaaring ang dalawang pinaka-popular na mga pamamaraan upang limasin ang mga kamay nang walang istruktura markup.

Ang maikling artikulo na ito ay tungkol sa enhancing ang unang paraan at pagpapadanak ng ilang ilaw sa ang tunay na kahulugan ng ikalawang.

clearfix

Sa lahat ng alam mo tungkol sa clearfix ay mali na ipaliwanag ko ang mga isyu sa paraan na ito ay lumilikha sa buong browser at iminumungkahi ko lamang-gamitin clearfix sa mga elemento na hindi susunod sa kamay (halimbawa ng isang modal window), bagaman bilang may-akda mayroon pa rin kaming makitungo sa collapsing margin . Ang demo na pahina ay nagpapakita na ito ang isyu.

Ipinapakita ng margin-uugali ng pagbagsak sa unang dalawang kahon na ito ay ang nilalaman na binuo (non-walang laman) na nagpapanatili sa ilalim margin sa loob ng kahon (na gumagawa ng perpektong kahulugan ayon sa spec ).

Kaya, upang lumikha ng parehong layout ng box sa buong browser namin mapapabuti ang orihinal na paraan sa pamamagitan ng pagbuo ng nilalaman gamit ang parehong palsipikado-elemento :before at :after :

  . Clearfix: bago,
 . Clearfix: pagkatapos {
   nilalaman:; "."    
   display: block;    
   taas: 0;    
   overflow: nakatagong;	
 }
 . Clearfix: pagkatapos {malinaw: parehong;}
 . Clearfix {zoom: 1;} / * IE <8 * / 

Huwag lang palitan ang iyong mga patakaran clearfix sa mga bago sa umiiral na proyekto, bagaman, bilang na maaaring mayroon ka na patched isyu na may kaugnayan sa ng collapsing margin sa pamamagitan ng iba pang mga pamamaraan.

overflow

Sa karamihan ng mga talakayan tungkol sa kliring sa kamay ang overflow:hidden paraan pagdating up, at palagi itong shot down na sa pamamagitan ng isang " Kung ikaw ay paglalagay ng ganap na nakaposisyon mga elemento sa loob ng div, kayo ay lagtas mga sangkap na ito ". Ngunit ito ay hindi kinakailangang totoo. overflow:hidden ay palaging clip medyo nakaposisyon elemento, ngunit hindi palaging ito ay itago ang mga ganap na nakaposisyon mga. Ito ay dahil ang lahat ng ito ay depende sa naglalaman block:

10.1 Kahulugan ng "naglalaman block":

4. Kung ang sangkap ay 'position: absolute', ang naglalaman ng block ay itinatag sa pamamagitan ng ang pinakamalapit na ninuno sa isang 'posisyon' ng 'absolute', 'kamag-anak' o 'fixed', ...

Ito ay nangangahulugan na ang ganap na nakaposisyon elemento ay ipakita sa labas ng isang kahon na styled na may overflow:hidden maliban kung ang kanilang naglalaman block ay ang kahon mismo o ng isang sangkap sa loob ng sinabi kahon.

Maaari mong tingnan ang demo pahina na ito upang makita kung paano mga bagay na gumagana.

Mas mahusay na alternatibo

Kung maaari mong ilapat ang isang lapad sa mga sangkap na naglalaman ng kamay, at pagkatapos ay ang iyong pinakamahusay na pagpipilian ay ang gamitin:

  display: inline-block;
 lapad: <any na tahasang value>; 

Karagdagang pagbabasa

• Nakapaloob na mga kamay, akip sa kamay na may purong CSS na kilala bilang sa pamamaraan clearfix
• Paano Upang I-clear ang mga kamay wala istruktura Markup
• Ang Bagong Paraan Clearfix
• 10.1 Kahulugan ng "naglalaman block"

Maghanap ng mga pag-uusap: Bloglines | Technorati

Ibahagi at pahabain: bookmark sa del.icio.us | Digg ito! | reddit!

Yui: Buksan ang Oras Miyer Sep 29

Setyembre 24, 2010 sa 1:50 ni Lucas Smith | Sa Development | 1 Puna

Ang susunod na yugto ng Yui: Buksan ang Oras ay magiging ang susunod na Miyerkules, ang 29.

Yui 3 Tsart ay darating sa susunod na release, at isang preview ng ilang mga unang bahagi ng trabaho ay na sa Gallery . Ang Tripp Bridges ay sa tawag, nagpapakilala ang bagong istraktura at nagpapakita kung paano ang mga learnings mula sa Tsart Yui 2 pakete alam ang bagong architecture, naghahanap na multa balanse sa pagitan ng kakayahang umangkop at simple. Oh, at banggitin ko ay walang Flash?

Din sa kubyerta ay Allen Rabinovich nagbibigay ng isang update sa ang kahanga-hangang mga gawa niya ay na-paggawa sa disenyo yuilibrary.com. Kami ay pakikipag-usap ng lahat, dito: home page, ang mga user gabay, demo, tutorial, API docs. Ang mga gawa. Sa maraming mga paraan ito ay isang buong bagong kuwento, at isang magkano ang mas mahusay na isa.

Kami ay magiging online na mula sa 10 ng umaga sa 12:00 PDT. Ang mga detalye ng koneksyon ay ang parehong tulad ng dati.

1. I-dial in sa 1-888-371-8922 (Skype ay gumagana ng mahusay para sa mga di-US na kalahok *)
2. Ipasok ang dadalo code 47188953 #
3. Sumali sa screen session ng pagbabahagi (ito ay sesenyasan mong i-install ang plugin ng Adobe Connect kung ito ay iyong unang beses na gamitin ito)

At sa wakas, ang yuilibrary.com forum thread para sa Buksan ang Oras ay dito . Hanapin ang para sa mga tala, mga kagiliw-giliw na takeaways, at ang record ng mga tawag na ito pagkatapos na ito ay tapos na. O simulan ang pag-uusap off maaga sa pamamagitan ng pag-post ng mga katanungan, mga mungkahi para sa mga paksa, o code na gusto mo ng review.

Huwag kalimutan na mag-subscribe sa Calendar Yui at sundin ang ang @ yuilibrary sa Twitter para sa pinakabagong update sa Buksan ang Oras at iba pang Yui interestingness.

Sana nakikita mo doon!

* - Kung Skype ay hindi isang opsyon, mag-email sa akin para sa isang lokal na numero.

Maghanap ng mga pag-uusap: Bloglines | Technorati

Ibahagi at pahabain: bookmark sa del.icio.us | Digg ito! | reddit!

Sa Wild para sa Setyembre 24, 2010

Setyembre 24, 2010 sa 1:00 pm sa pamamagitan ng Eric Miraglia | Sa Sa ang Wild | Mga Puna Off

Bilang makuha namin handa na para sa YUIConf 2010 at ng maraming higit pa sa mga darating na buwan, narito ang ilang ng iba pang mga bagay na kinuha namin ang tandaan sa mas malaking mundo Yui:

• Yui Teatro tops NetTuts Listahan ng mga Kailangang-makita ang F2E Podcast : Andrew Burgess writes tungkol sa Yui Teatro : "Mukhang na nang mas madalas hangga't ng ilang beses sa isang buwan, Yahoo! nagdudulot sa mga developer sa pagputol gilid ng teknolohiya ng web upang mapanatili ang kanilang mga empleyado hanggang sa petsa. Para sa pakinabang ng ang natitirang bahagi ng sa amin, ang mga talks na ito ay naitala at nai-publish. Makakahanap ka ng kilalang mga mga devs tulad ng Douglas Crockford at Nicholas Zakas, at talks sa lahat ng bagay mula sa pagganap at access sa JavaScript at ang DOM. " #
  
• DigitalInsurance.com (isang @ Site apipkin) Pinapatakbo ng Yui 3 : Ang palaanak gallery kontribyutor Anthony pipkin ay nakatulong gumawa ng bagong portal DigitalInsurance.com ., na pinapatakbo ng Yui 3 #
  
• Ang umuunlad na Enhancement Paggamit Walang ngunit js (@ codepo8 sa @ davglass) : Christian Heilmann writes sa Ajaxian: "progresibo pagpapahusay ay pa rin ng isang nakalilito bagay para sa isang pulutong ng mga tao na ay masyadong nagaganyak tungkol sa kakayahan ng JavaScript sa mga modernong browser kapaligiran. Maaari pakiramdam anachronistic upang isulat ang iyong mga solusyon para sa isang non-js kapaligiran at pagkatapos ay minsan pa enhances sa JavaScript. Lumaki ako tulad na ito para sa akin ito ay isang simpleng bagay ng paggawa ng karapatan bagay ngunit sa mundo ngayon ng mga aklatan ng JavaScript at out-of-the-box widgets maaari itong tila isang drag. Ipasok ang ang Dav salamin ng koponan Yui. Siya ay nagiging ang konsepto ng umuunlad pagpapahusay sa paligid sa kanyang ulo at bilang isang js magkasintahan at backend code "endurer" siya set out upang malutas ang isyu na ito sa sandaling at para sa lahat sa isang purong paraan JavaScript. " Suriin ang ang buong artikulo para sa mga detalye . #
  
• Higit pang mga Overlay plugin sa Yui 3 mula sa Oliver Andrich : Mula GitHub pahina Oliver: "Overlay plugin ay isang koleksyon ng mga limang plugin sinulat ko upang malaman Yui 3 developement ng plugin sa pangkalahatan. Tatlong out ng limang plugin higit pa o mas mababa gayahin ang mga Ekstra ng Overlay na nilikha sa pamamagitan ng Eric Ferraiuolo .... Ang limang plugin ay:
  • BaseOverlayPlugin
  • ModalOverlay
  • KeepAligned
  • HideOnEscape
  • ConstrainDimensions "
  ( Orihinal na pinagmulan. ) #
• Reid Burke Yui slide para sa HackU sa Carnegie Mellon : Yui engineer (at Yeti may-akda) Reid Burke whipped up ng ilang mga slide at isang Yui 3-based slideshow engine para sa kanyang mga kamakailang talk sa Carnegie Mellon. #
  
• Devcurry sa Learning js sa mula Crockford at Iba pang mga Gurus sa Yui Teatro : Suprotim Agarwal writes sa devcurry ito umaga: "Sa ang post na ito, ako ay ibahagi ang mga link ng ilang lubhang kapaki-pakinabang na mga video JavaScript at lectures na inihatid ng JavaScript Gurus, puno ng impormasyon, masaya panonood at ganap Libre! Kahit na ang internet ay puno ng libreng mga video, pinili ko lamang ng ilang ng mga ito, kung saan ko nahanap ang pinaka-kapaki-pakinabang. Kumuha ng handa na upang kumuha ng mga tala bilang malaman mo ... Crockford ng video lectures sa JavaScript - Douglas Crockford ay isang arkitekto ng JavaScript at pagpapatugtog at mahalagang papel sa pagdisenyo ng mga bagong tampok ng wika. Kanyang mga video ay isang 'ay dapat na magkaroon ng' para sa anumang mga developer ng ​​JavaScript. Yui Teatro -. Nagbibigay ng access sa libreng programming talks sa pamamagitan ng mga gurus sa JavaScript at pag-unlad ng web "Suprotim ay napupunta sa upang ilista ang ilang mga iba pang mga mapagkukunan ng nilalaman, kabilang ang mga iba pang Yui Teatro pamagat #
  

Maghanap ng mga pag-uusap: Bloglines | Technorati

Ibahagi at pahabain: bookmark sa del.icio.us | Digg ito! | reddit!