Sa Wild para sa Marso 12, 2010

Marso 12, 2010 at 11:20 by Eric Miraglia | Sa Sa Wild | 1 Comment

Dito sa YUI HQ, kami ay nagtatrabaho papunta sa susunod na malalaking release ng YUI, YUI 3.1.0. Yesterday namin ibabahagi ang ilang mga YUI 3 tagapagsakay trabaho na Adan Moore ay ginawa para sa 3.1.0. Ang kanyang "YUI 2 sa 3" proyekto ay nagbibigay-daan sa iyo upang gamitin ang mga sangkap tulad ng YUI 2 DataTable lang at mahusay sa YUI 3. Samantala, ang kanyang tagapagsakay pagpapabuti din sabihin nito maaari mong dalhin sa YUI 3 modules Gallery gusto Imbakan Lite na may parehong kadalian at kahusayan. 3.1.0 din markahan ang mga GA release ng Satyen Desai's sangkap / widget na pundasyon para sa YUI 3.

Din namin ang pagpapatakbo ng YUI 3 Gallery Contest, ang nagwagi sa pagkuha ng isang pumasa JSConf pagpupulong at $ 500 sa Expedia.com upang makatulong sa paglalakbay. Mayroon kayong dalawang buong Sabado at Linggo kaliwa ng tuyong bago ang deadline!

Sa habang panahon, may been a pulutong sa pagpunta sa komunidad - narito ang ilang sa mga bagay na namin kilala kamakailan:

Maghanap ng mga pag-uusap: Bloglines | Technorati

Share at palawakin: Bookmark with Yahoo! Aking Web | Bookmark sa del.icio.us | digg ito! | Reddit!

YUI 2 sa 3: Malapit sa YUI 3.1.0, ang isang simple Way Gamitin YUI 2 Modules

Marso 11, 2010 at 12:44 by Eric Miraglia at Adan Moore | Sa Development | 4 Comments

Paggamit ng YUI 2 mga sangkap sa context ng YUI 3 pagpapatupad ay mahalaga para sa ilang mga implementers na gawin ang mga transition sa pagitan ng YUI 2 at YUI 3. Sa ilang mga kaso, kami lang gusto sa paglipat sa aming mga code na ito sa yugto, ngunit nais naming gawin ito sa loob ng konteksto ng isang pagpapatupad YUI 3 pattern. Sa ibang kaso, maaaring kami ay umaasa sa mataas na antas ng mga sangkap tulad ng YUI DataTable na hindi pa nagpapakita sa YUI 3.

Bilang bahagi ng mga darating na 3.1.0 pakawalan, Adan ay ang pinabuting karanasan sa paggamit ng YUI 2 mga sangkap na mula sa loob ng YUI 3. Upang tapusin na ito, siya ay idinagdag ng katalinuhan sa ilang mga YUI 3's tagapagsakay na nagpapahintulot sa inyo na-load YUI 2 modules direkta mula sa iyong YUI().use() na pahayag: 

 YUI (). Gamitin ( "yui2-button", function (Y) (
	
	 / / Yahoo ay hindi isang global na object; ito ay sandboxed kasama
	 / / sa mga natitira sa iyong YUI 3 functionality.  Ang linyang ito
	 / / ay kailangan kung nais mong gamitin ang kasalukuyang pagpapatupad
         / / code:
	 var Yahoo = Y.YUI2;
	
	 / / YUI 2 pagpapatupad ng code
	 var button = bagong YAHOO.widget.button ( "mybutton");
	
 ));

Makikita na ang functionality na ito sa YUI 3 codeline bilang ng mga bumuo ng 1,933, at kami deployed sa isang experimental YUI 3 magtayo (panggalan lamang "yui3.1.0pr2") at isang maagang magtayo ng YUI 2.8.0-andar ng balot para gamitin sa YUI 3.

Kapag nag-download YUI 3 pinakabagong source mula sa GitHub makikita mo ang ilang mga halimbawa nagtatrabaho sa sandbox/loader (hanapin para sa mga file na may 2in3 prefix). Ang mga halimbawa ay nagpapakita ng paggamit ng isang bilang ng mga YUI 2 modules. Namin ang post ng isang simpleng live na halimbawa na nagpapakita kung paano gamitin ang YUI 2 DataTable sa loob ng YUI 3, na kung saan ay isa sa mga pinaka-madalas na hiniling palampas mga katangian.

Key points tungkol sa YUI 2 sa 3 na pagsisikap:

  • Gawain na ito ay magagamit sa mga pinakabagong dagdag sa mga darating na 3.1.0 pakawalan (magtayo 1,933 at mamaya). Ito ay hindi magagamit sa 3.0.0 o sa 3.1.0pr1 preview.
  • Ang proyekto ay sa isang experimental ng estado. Maging ang yui3.1.0pr2 magtayo o ang balot YUI 2 dagdag mula sa kung saan ito kinukuha ay malawakan masuri, bagaman kami ay itinanghal sa kanila sa CDN upang gawing maginhawa upang galugarin ang pagpapatupad.
  • I-download ang pinakabagong build para sa mga halimbawa. Makikita mo ang ilang ng Adam's proof-of-konsepto ng mga file sa sandbox/loader - maliban sa simpleng halimbawa sa itaas, ang mga ito ay ang pinakamahusay na code ng mga sanggunian na makukuha hanggang sa mga opisyal na 3.1.0 pakawalan (na kung saan ay pa rin tungkol sa isang buwan sa labas).
  • Ang iyong puna sa forums ay welcome - at, kung makita mo ang mga problema, kami ay interesado sa pagdinig tungkol sa kanila.
  • Kapag ginagamit sa ganitong paraan, YUI 2 ay hindi lumikha ng isang global na object YAHOO YUI 2 mga sangkap ay abala sa YUI 3 module na pagbibigay-kahulugan at sila ay manatili sa nakapaloob sa YUI 3 sandbox na kung saan sila ay nakalakip. Ang mga linya mula sa codesample sa itaas, var YAHOO = Y.YUI2; ay kailangan upang makapag-cut at i-paste YUI 2-estilo ng pagpapatupad ng code - o maaari mong baguhin ang mga reference YAHOO sa Y.YUI2
  • YUI 2 release ay suportado bumalik sa 2.2.2 - ang mga pinakabagong bug-ayusin ang release para sa bawat bersyon ng menor de edad ay suportado (2.2.2, 2.3.1, 2.4.1, 2.5.2, 2.6.0, 2.7.0, 2.8. 0). Maaari mong tukuyin ang bersyon YUI 2 upang use ang mga sumusunod: YUI({yui2: '2.7.0'}).use('yui2-button', ...) Ang layunin dito ay ang daan sa iyo upang maiwasan ang paglipat sa 2.8.0 (o mamaya) bago ang isang YUI 3 migration.

Gallery ay mas madaling Paggamit, Masyadong

Si Adan ang mga pagpapahusay sa YUI 3's tunay tagapagsakay may pinahusay na ang karanasan ng mga nagtatrabaho sa mabilis na lumalagong Gallery YUI 3, too. Bilang ng 3.1.0, maaari mong dalhin ang mga module sa gallery ang mga pahina mula sa use() na pahayag na walang karagdagang configuration - ang tagapagsakay ay magagawang tukuyin at lutasin ang dependencies para sa iyo at gawin ang tamang bagay na may paggalang sa combo 'ing sa gallery source code sa iba pang mga file na YUI. Narito ang isang halimbawa Dav salamin magkasama para sa 3.1.0 na nagpapakita ng paggamit ng kanyang YQL module Query gallery sa mga kumbinasyon na may isang pre-release magtayo ng 3.1.0.

Maghanap ng mga pag-uusap: Bloglines | Technorati

Share at palawakin: Bookmark with Yahoo! Aking Web | Bookmark sa del.icio.us | digg ito! | Reddit!

Sa YUI 3 Gallery: Matt Snider's Number Module

Marso 10, 2010 at 5:45 ng Matt Snider | Sa Development, YUI 3 Gallery | No Comments

Tungkol sa may-akda: Matt Snider Matt Snider ang lead engineer frontend para sa Mint.com (ngayon ay isang bahagi ng Intuit), kung saan siya ang gumagawa ng malawak na paggamit ng mga YUI sa layer pagtatanghal. Siya rin ang may-akda ng isang popular na blog sa JavaScript. Matt contributed ang YUI 2 Imbakan Utility sa YUI at ito ay isang aktibong miyembro ng komunidad, maaari mong makita ang kanyang mga pagtatanghal mula sa YUICONF 2,009 sa YUI Theater.

Natively, sa JavaScript ay may isang limitadong hanay ng mga tungkulin para sa mga nagtatrabaho sa mga numero na matatagpuan sa global object Math. Mas madalas na ang mga function ay para sa nagtatrabaho sa exponents, trigonometrya, at rounding. At habang ang mga function na kailangan at mabisa, ang Math API ay nanatiling hindi magbabago para sa taon, at marahil ay hindi pinabuting anumang oras sa malapit na hinaharap. Kaya ito ay hanggang sa mga developer ng JavaScript library upang lumikha at magpanatili ng isang bahagi para sa mga nagtatrabaho sa mga numero.

Ang Numero ng bahagi sa YUI 3 Gallery, nagmula sa trabaho orihinal na ginamit sa Mint.com, ay naglalayong punuin sa nawawalang numero na may kinalaman sa pag-andar. Ito ay nagbibigay ng isang liwanag-weight-set ng static function para sa mga nagtatrabaho sa mga numero. Ang Bilang bahagi weighs sa at ang tungkol sa 1.8kb matapos minification at bago gzip; ito ay suportado ng lahat ng mga A-grade browser.

Isa sa mga katangian sa Number na gamitin ko ang pinaka ay ang format() function, na injects-format ang isang numero sa isang string sa pamamagitan ng pag-evaluate ang format ng numero ng placeholder sa string. (Tandaan: Ito ay katulad ng pag-format ng suporta Y.DataType.Number kasalukuyang nagbibigay ng, ngunit listahan ng up ang hiwalay na mga katangian ng pagsasaayos na Y.DataType.Number.format tumatanggap sa isang solong string-format ng pattern.) Ang function na gumagana sa lahat ng mga simbolo, ngunit ito ng mga format ng mga numero ayon sa Ingles pamantayan. Narito ang ilang halimbawa ng kung paano gamitin ang format() mula sa mga yunit ng pagsubok: 

  var n = 1,111.11,
	 formatDollars = "$ 0,0.00 '" / / gumamit ng comma at decimal kapag format
	 formatPercent = "0.00%", / / gumamit ng decimal kapag format
	 formatRound = "0,000", / / gumamit ng kuwit kapag format
	 formatText = "Mangyari lamang na idagdag ang $ 0,0.00 sa aking tab!";

 Y.Assert.areEqual ( "$ 1,111.11", Y.Number.format (n, formatDollars));
 Y.Assert.areEqual ( "1,111.11%", Y.Number.format (n, formatPercent));
 Y.Assert.areEqual ( "1,111", Y.Number.format (n, formatRound));
 Y.Assert.areEqual ( "Mangyari lamang na idagdag ang $ 1,111.11 sa aking tab!", Y.Number.format (n, formatText));

Iba pang mga kapaki-pakinabang na mga function na kasama ang:

  • random() nagbibigay ng isang madaling API para sa pagkuha ng random buong numero;
  • isBetween() / isNotBetween() Pinapadali nito ang pagsusuri ng mga saklaw ng numero;
  • radian() / degrees() kapag nagtatrabaho sa trigonometrya Math function (tulad ng Math.cos() na inaasahan radians sa halip ng degree, parehong radian() at degrees() ay kapaki-pakinabang para sa mga nagko-convert na halaga.

Upang gamitin ang bahagi Number Gallery, unang isama ang script: 

  <script 
 src = "http://yui.yahooapis.com/combo?3.0.0/build/yui/yui-min.js &
 gallery-2010.02.22-22/build/gallery-number/gallery-number-min.js "> </ script>

Pagkatapos ay isama ang 'gallery-number' sa iyong use() function, para makuha ang mga sumusunod na tungkulin: 

  YUI (). Gamitin ( 'gallery-bilang', function (Y) (
	 Y. Number = (
		 unti-unti (numero),
		 format (numero, na format),
		 getPrecision (numero),
		 isNotBetween (numero, ang bilang, numero, boolean),
		 isBetween (numero, ang bilang, numero, boolean),
		 isPrime (numero),
		 radians (numero),
		 random (numero, ang bilang na),
		 roundToPrecision (numero, ang bilang)
	 );
 ));

Ang mga tungkulin ay modeled matapos ang katutubong tungkulin Math at, tulad ng mga function Math, ang mga function sa Y.Number NaN Y.Number bumalik kung ang halaga ng ibinigay ay hindi isang numero. Kung nais mong magbigay ng kontribusyon sa pagbuo ng o nangangailangan ng mga bagong tampok idinagdag sa Number, paki-iwan ng mensahe sa Forum.

Maghanap ng mga pag-uusap: Bloglines | Technorati

Share at palawakin: Bookmark with Yahoo! Aking Web | Bookmark sa del.icio.us | digg ito! | Reddit!

YUI Theater - Douglas Crockford: "Crockford sa JavaScript - Episode IV: Ang pagbabagong-anyo ng Ajax" (93 min.)

Marso 9, 2010 at 12:40 by Eric Miraglia | Sa YUI Theater | 6 Comments

Douglas Crockford naghahatid ng ika-apat na magbigay ng panayam sa kanyang kanyang Crockford sa JavaScript ang panayam serye sa Yahoo sa Marso 3, 2010.

Noong nakaraang linggo, Yahoo! JavaScript architect Douglas Crockford maihatid ang ika-apat na yugto ng kanyang Crockford sa JavaScript ang serye:

  1. Dami ng One: Ang Unang Taon
  2. Chapter 2: At Pagkatapos May Was JavaScript
  3. Act III: Function ang Supreme
  4. Episode IV: Ang pagbabagong-anyo ng Ajax
  5. Part V: Ang Katapusan ng Lahat ng Bagay (Marso 31 - RSVP)

Sa sesyon na ito, si Douglas tackles ang DOM. Sa isang dako na nagkaroon ng JavaScript, siya says, at ang JavaScript ay "kung ano ang ginawa ng browser ng trabaho."

Sa kabilang dako, nagkaroon ng mga Dokumento Object Model, na kilala rin bilang affectionately ang DOM. Ito ay kung ano ang karamihan sa mga tao na galit kapag sinasabi nila ang galit nila sa JavaScript. Karamihan ng mga tao na sinasabi ng galit nila sa JavaScript ang hindi alam ng JavaScript, maaaring magkaroon ng hindi nakita ang JavaScript, pero ang mga ito na nadama ng DOM tama. Kung hindi mo alam kung ano ang pagkakaiba ay at sabihin sa iyo, "ang JavaScript ay ang stupidest bagay kahit minsan ko na nakita," hindi ka na pakikipag-usap tungkol sa JavaScript, ikaw ay pakikipag-usap tungkol sa mga DOM. Ang DOM ay API ng browser. Ito ang interface. Ito ay nagbibigay ng JavaScript para sa pagmamanipula ng mga dokumento.

Ang DOM ay maaaring hindi lubos na pagsisisi, ngunit ito ay gayunman mahalaga sa kung ano ang frontend inhinyero gawin kapag ang sumulat ng kanilang mga aplikasyon ng web. Sa ganitong usapan, si Douglas ay nagbibigay ng isang pangkalahatang-ideya, nakatayo sa kasaysayan, kung saan ang DOM nagmula, kung paano ito nakamit ascendance sa Ajax, at kung ano ang hinaharap ay maaring hold. Sa walang kapantay fashion Douglas, ang kasaysayan na ito ay nagsisimula sa Sir John Harrington at tumatagal sa amin hanggang sa kasalukuyan na araw. Ang ilang mga salita na pinili para sa CSS ay kabilang sa maraming mga linya applause para sa mga beterano sa mga developer:

Tingin ko sa loob ng komunidad ng mga tao na gamitin ang CSS dakilang pagmamahal para sa mga ito. Sila ay lubos na invested sa CSS, pag-ibig nila ito. Hindi nila maaaring magpalagay ng anumang iba pang mga paraan ng paggawa ng format sa isang dokumento. Ito ay ito. Ito ay uri ng tulad ng panonood ng isang episode ng Cops kung saan ang mga cops lumapit sa at break up ang pagtatalo sa pamilya, at may ito "CSS ay hindi masama, ikaw lamang ang hindi maunawaan ito gusto kong gawin. Alam ko ito Masakit sa akin, ngunit gumawa ng mga pagkakamali ko, ako ng mali. "CSS ay kakila-kilabot, at ito amazes sa akin ang daan mga tao na makuha invested sa loob nito. Ito ay tulad ng isang beses tayahin mo ito, uri ng pumunta "oh, OK, nakikita ko kung paano ko magagawang gumawa ng mga ito sa trabaho," pagkatapos mong pitikin mula sa hating ito sa mapagmahal na ito, at iring kahit sino sino ay hindi nawala sa pamamagitan ng kung ano ang iyong 've wala na sa pamamagitan ng. Hindi magkaroon ng kahulugan sa akin.

Kung ang mga video embed sa ibaba ay hindi magpapakita ng tama sa iyong mga RSS reader ng mga pagpipilian, siguraduhin na mag-click sa pamamagitan ng na panoorin ang mga high-resolution na bersyon ng video sa YUI Theater.

Iba Pang Recent YUI Theater Videos:

-Subscribe sa YUI Theater:

Maghanap ng mga pag-uusap: Bloglines | Technorati

Share at palawakin: Bookmark with Yahoo! Aking Web | Bookmark sa del.icio.us | digg ito! | Reddit!

YUI 3 Gallery Contest 2,010 - Win ng Ticket sa JSConf 2,010

Marso 5, 2010 at 2:12 by Eric Miraglia at Dav salamin | Sa Development, YUI 3 Gallery | 6 Comments

Kami ay nasisiyahang ipahayag ang YUI 3 Gallery Contest 2,010. Salamat sa aming mga kaibigan sa Yahoo! Developer Network, kami ay may isang pagpupulong pumasa sa naibenta-out JSConf 2,010 na nag-aalok. Kami ay ang pagpapares na may $ 500 sertipiko ng regalo sa Expedia.com upang matulungan ang mga premyo nagwagi makakuha ng pabalik-balik sa Virginia para sa pagpupulong.

Ang premyo ay pumunta sa mga taong may-akda ang pinakamahusay na mga bagong YUI 3 Gallery module sa pagitan ng Marso 5 at Marso 22 at submits ito para sa mga komunidad na gamitin sa ilalim ng BSD lisensya YUI's. Tulad ng anumang mga paligsahan, may mga lots ng mga patakaran. Kami ay kilala ng ilan sa mga malaking iyan sa pahina sa paligsahan at maaari mong basahin ang buong legal writeup dito.

Kami ay nanginginig sa kung ano ang aming lahat bilang isang komunidad na nagawa dahil huli na 2,009 na gawin ang isang Gallery hotbed para sa YUI 3 paglago at pagbabago Form module. Greg Hinch's (binigay na oras matapos ang Gallery binuksan), mahusay na mahusay Imbakan Ryan's Grove at Kasaysayan ng mga module, Ilyan Peychev's über-popular na Accordion, Julien Lecomte's SimpleMenu, Esteban Woods's Timepicker, Adan Moore's TreeView, Jeff Craig's Chromahash, Dav sariling YQL module ... at dose-dosenang iba pa.

Umaasa kami na isaalang-alang ang paggawa ng ilang YUI 3 pataga sa susunod na mga linggo upang idagdag sa collection na ito. Kami ay nakalista ang ilang mga mapagkukunan sa pahina sa paligsahan, at may isang forum thread ng pagpunta sa mga ideya para sa mga bagong module (paki-timbangin doon kahit na hindi ikaw ay magiging pagsulat ng isang module para sa mga paligsahan sa iyong sarili). At, siyempre, ang kasalukuyang Gallery ay isang mabuting pinanggagalingan ng inspirasyon.

Happy tuyong, at kami ay naghahanap ng inaabangan ang panahon na nakikipagkita sa isang may-akda YUI Gallery ulo upang JSConf susunod na buwan!

Maghanap ng mga pag-uusap: Bloglines | Technorati

Share at palawakin: Bookmark with Yahoo! Aking Web | Bookmark sa del.icio.us | digg ito! | Reddit!

Unang Happy Birthday, JSMag

Marso 3, 2010 at 7:27 sa pamamagitan ng Tom Hughes-Croucher | Sa pinaghalo | 3 Comments

Tom Hughes-Croucher ay isang mangangaral ng Ebanghelyo para sa Yahoo! Developer Network.

Ang aming mga kaibigan sa loob at JSMag ay celebrating ng kanilang unang kaarawan. Kung hindi mo nabasa JSMag ito ay isang buwanang magasin PDF na sumasakop sa mga balita sa mainit na paksa ng JavaScript at nagbibigay ng mga praktikal na Tutorials.

JSMag ay nagbibigay sa malayo ng isang libreng isyu mula sa kanilang unang taon. Kailangan lang mag log in sa iyong account JSMag at gamitin ang code 'na oneyear' upang makakuha ng isang libreng isyu.

Kapag ang pagpili sa iyong libreng isyu, maaaring gusto mong maghanap ng mga artikulo sa JSMag na isinulat ng mga Yahoos inhinyero frontend o tungkol sa YUI sa huling 12 buwan:

  • Marso 2009
    • Matt Henry sa mga yunit ng pagsubok sa YUI
  • Abril 2009
    • Yours tunay Profiling sa JavaScript ang inyong
  • Hunyo 2009
    • Yours sa tunay na Gumawa ng Scripts
  • Hulyo 2009
    • Stoyan Stefanov sa Function Pattern
  • Agosto 2009
    • Jon LeBlanc sa YQL at browser MVC
  • Agosto 2009
    • Stoyan Stefanov sa pattern function
  • Septiyembre 2009
    • Chistian Tiberg sa paggamit ng pangangasiwa ng sistema sa YUI
    • Stoyan Stefanov sa higit pattern function
  • Oktubre 2009
    • Chistian Tiberg inline sa pag-edit sa YUI
    • Stoyan Stefanov sa higit pattern tagapagbuo
  • Nobyembre 2009
    • Yours tunay sa pagpapahusay ng YQL sa mga server-side ng JavaScript
    • Stoyan Stefanov sa higit pattern mana
  • Disyembre 2009
    • Kristiyano Tiberg sa paggamit ng YUI2 datatable tsart at mga sangkap na
    • Stoyan Stefanov sa higit pattern muli
  • Enero 2010
    • Kristiyano Tiberg sa paggamit ng YUI na bumuo ng mga gadget desktop para sa Windows
    • Stoyan Stefanov sa pattern sa sandbox
  • Pebrero 2010
    • Stoyan Stefanov sa pribadong pattern ng mga miyembro
  • Marso 2010
    • Yours tunay na may isang pangkalahatang-ideya ng mga server-side ng JavaScript
    • Stoyan Stefanov sa currying

Happy Birthday, JSMag!

Maghanap ng mga pag-uusap: Bloglines | Technorati

Share at palawakin: Bookmark with Yahoo! Aking Web | Bookmark sa del.icio.us | digg ito! | Reddit!

Sa YUI 3 Gallery: Esteban Woods 'TimePicker Module

Marso 3, 2010 at 7:30 ng Esteban Woods | Sa YUI 3 Gallery | 3 Comments

Esteban Woods gumagana sa platform frontend sa Yahoo! at ito ay gumagana na malapit sa YUI 3 at teknolohiya na may kaugnayan sa Yahoo! Home Page sa loob ng nakaraang taon. Maaari mong makita sa kanya sa @ ysaw at sa stephenwoods.net

Ako ay nagtatrabaho sa isang panloob na produkto dito sa Yahoo! na kailangan ang mga gumagamit sa input ng oras-ng-araw sa isang tiyak na format. Ako ay nagpasya na sa halip na ang mga gumagamit ng lakas sa mga uri ng eksakto ang karapatan format na magiging mas madali lamang na magbigay ng isang UI widget para sa oras na input. Lagi ko na nagustuhan ang jQuery timepicker; ito ay isang simple at mabilis na paraan upang input ng oras at nakakatugon sa aking gamitin kaso ganap na ganap. Of course, kami ay gumagamit ng YUI 3, kaya ako nagpasya muli ang mga widget na may YUI 3. (Ito ay mabilis at madali sa YUI 3 Widget pundasyon.) Akala ko maaaring maging kapaki-pakinabang sa iba nagtatrabaho sa YUI, kaya ako nagpasya na bigyan ito ng tama bumalik sa komunidad para sa paggamit sa iyong sariling mga proyekto.

Gamit ang mga taga-pili ng dapat ay pretty simple para sa iyo kung ikaw ay pamilyar sa pangunahing kaalaman ng YUI 3. (tingnan ang isang live na bersyon dito).

Upang gamitin ang taga-pili sa iyong sariling mga proyekto kabilang ang script: 

	 <script type = "text / javascript" src = "http://yui.yahooapis.com/combo?3.0.0/build/yui/yui-min.js&gallery-2010.02.25-22/build/gallery-timepicker/ gallery-timepicker-min.js "> </ script>

Pagkatapos magbigay ng halimbawa at mailarawan ang mga widget: 

 YUI (). Gamitin ( 'gallery-timepicker', function (Y) (
	 / / Pass pagsasaayos ng isang bagay sa timepicker
        var = taga-pili ng mga bagong Y.Saw.Timepicker (
            (
			    / / isang sangkap na ito ay naglalaman ng mga timepicker
                contentBox: 'div.foo', 

			    / ang unang panahon
                oras: (
                    oras: 0, 
                    minuto: 0
                ), 
                string: (
                    am: 'AM', 
                    pm: 'PM', 
                    seperator: ':'
                ), 
                pagkaantala: 5 / / pagkaantala bago pagpili ng isang kahon sa mouseover
            )
        );
       picker.render ();
 ));

Tulad ng lahat ng YUI 3 widgets ang timepicker tagapagbuo tatagal ng pagsasaayos object para makontrol ang unang pagpapakita ng mga widget. Pagmamanipula ng widget pagkatapos ay gawin sa pamamagitan ng mga pamamaraan ng widget render hide at show Ang render na paraan kung saan ay ang aktwal na DOM elemento ay nilikha. hide at show lamang na idagdag at alisin ang klase yui-timepicker-hidden ang mga sangkap ng bounding box. Class na ito (at ang karagdagang pag-aaral ng css para sa widget) ay dapat na ipatupad para sa widget upang kumilos nang maayos. Para sa alang-alang sa simple, na dito ay ang mga estilo ako gamit sa tumatakbo halimbawa: 

	 / * Yui i-reset ang ipinapalagay * /
	 . yui-timepicker (
         display: block;
         margin: 5px;
         kaliwa: 0;
         posisyon: kamag-anak;
         background: transparent;
     )

     / * Standard para sa widgets, sa kasong ito lamang panunulak ang nakatago sa isang off ang screen * /
     . yui-timepicker-hidden (
         kaliwa:-9999em;
         posisyon: absolute;
     )

     . yui-timepicker (
         color: # 000;
         font-family: Verdana;
         text-align: left;
     )

 / * Taga-pili ay talagang nag-utos ng dalawang mga listahan * /
     . yui-timepicker ol (
         display: block;
         posisyon: kamag-anak;
         kaliwa: 0;
         . kaliwa: 5px;
         margin: 0px;
         padding: 0px;
         taas: 24px;
         text-align: left;
         -webkit-transition: kaliwa .1 s kadalian-in;
     )

     . yui-timepicker li (
         listahan ng-style: none;
         display: block;
         magpalutang: kaliwa;
         posisyon: kamag-anak;
         kaliwa: 0;
         overflow: nakatago;
         width: 19px;
         padding: 1px;
         margin: 0 2px 0 0;
         border: 1px solid # 999;
         text-align: center;
     )

     . yui-timepicker li (
         -moz-hangganan-radius: 2px;
         -webkit-hangganan-radius: 2px;
     )

	 / * I-highlight ang mga napiling beses * /
     . yui-timepicker li.yui-timepicker-aktibong (
         background: # 000;
         color: # fff;
         -moz-box-maliliman: 2px 2px 2px # ccc;
         -webkit-box-maliliman: 2px 2px 2px # ccc;
     )

Gumagamit ako ng webkit animations para lamang sa estilo; ipasadya ang mga estilo tulad nang nakikita mo nang naaangkop para sa iyong mga proyekto,. Para sa karamihan ng mga layunin ay gusto mong itago ang taga-pili ng una. Pagtawag sa hide paraan lamang nagdadagdag ang yui-timepicker-hidden estilo sa bounding box ng widget's. Ako nagdagdag ng isang i-click ang handler sa aking daster sangkap upang ang isang pag-click sa mga elemento na may id na time ay magiging sanhi ng widget na lumabas / nawawala: 

	  picker.hide ();
      Y.get ( '# pangunahing'). Sa ( 'i-click ang', function (e) (
          var target = e.target;
          kung (target.test ( '# oras')) (
              picker.toggle ();
          )
      ));

Upang gumawa ng mga taga-pili ang mga tunay na kapaki-pakinabang na ko makinig sa

timeset

kaganapan, na kung saan bumalik ang isang bagay na may impormasyon tungkol sa mga napiling oras, ako pagpunta sa gamitin ang "s24hour" miyembro ng bagay na dumaan sa handler. Iyan ay isang string na representasyon ng oras sa 24 oras na format. (makukuha rin ang mga hour minute ampm at s12hour 

	 picker.subscribe ( 'timeset', function (e) ( 
         / / timeset ay isang pasadyang mga pangyayari na ang apoy kapag ang oras ay * * * * * * set
         / / gamitin ito sa halip na timeChange
         Y.get ( '# oras na'). Set ( 'halaga', e.s24hour);
     ));
    
 / / magdagdag ng isang handler sa "cell i-click ang" upang itago ang taga-pili kapag ang mga user na nag-click sa isang cell
     picker.subscribe ( 'cellclick', function (e) (
        this.hide (); 
     ), taga-pili);

Iyan na ang lahat diyan ay sa ito! Tamasahin.

Maghanap ng mga pag-uusap: Bloglines | Technorati

Share at palawakin: Bookmark with Yahoo! Aking Web | Bookmark sa del.icio.us | digg ito! | Reddit!

Next Page »
Hosted by Yahoo!

Copyright © 2006-2010 Yahoo! Inc All rights reserved. Patakaran sa Privacy - Mga Tuntunin ng Serbisyo

Powered by WordPress sa Yahoo! Web Hosting.