YUI的快速提示:添加您自己的真棒

2010年9月29日,由埃里克·米拉利亞12:22 | 開發 | 3評論

盧克( @ ls_n ),公佈這個片段在回應一個問題一天,我認為這是值得分享這裡作為一個快速提示。

與大多數選擇為基礎的成語,很多銳3的表現力來自你可以做什麼,一旦你引用一個或多個HTMLElements -銳3,這意味著有一個節點的參考,您通常通過Y.one( selector string )Y.all( selector string ) 因此, Y.one("#foo"). doSomethingInteresting是一種常見的模式。

可以很容易地添加自己的魔法節點(和/或NodeList中)延長3銳的表現。 這裡有一個方法,使您的擴展的模塊化和可重用。

首先,創建一個新的自定義模塊(我們將它稱為node++ ):

  YUI.add(“節點+ +”功能(Y){
	
	 / /定義一個函數,將運行在一個上下文
	 / /節點的實例:
	函數doSomethingAwesome(){
		 y.log(“在這裡做一些真棒。”);
	 }

	 / /使用addMethod的添加doAwesomeThing節點原型:
	 Y.Node.addMethod(“doAwesomeThing”,doSomethingAwesome);
	
	 / /將此功能擴展到NodeLists:
	 Y.NodeList.importMethod(Y.Node.prototype,“doAwesomeThing”);
	
 },'0 .0.1',{要求:['節點']}); 

盧克的精神,是在這裡

與頁面上的定義, node++可以在任何情況下use ð。 在您的實現代碼,你會做:

  YUI的()。使用(“節點+ +”功能(Y){
	
	 / /使用從一個單一的節點:
         y.one(“#foo'的)doAwesomeThing();

	 / /使用一個NodeList:
	 ,y.all('P')doAwesomeThing();
	
 }); 

注意:只有YUI的實例(S)綁定您的node++模塊將有訪問doAwesomeThing 這種設計的,你想為你構建複雜的應用程序的一個特點是,實現邏輯不會需要改變,如果依賴列表node++發展-自動為您將得到處理, use()時間,並依賴聲明保留其所屬的代碼。

共享和擴展: 書籤del.icio.us Digg它! | reddit!

YUI的劇院- DAV玻璃:(36分鐘)“使用的Node.js和YUI 3”

2010年9月29日,11:34上午由埃里克·米拉利亞| 劇院銳 | 11評論

DAV玻璃談到2010年9月16日,銳3和Node.js的雅虎。

瑞安Dahl的工作Node.js的 -形成圍繞該項目的社區-已經加入HTML5的2010年的大故事之一。 YUI的工程師D​​AV玻璃已使銳3 Node.js的實施者強大的盟友,他在這部影片向您展示了他迄今為止所做 - 包括逐步增強的客戶端和服務器上運行相同的代碼部件的演示。 千萬不要錯過這一個。

如果下面的視頻嵌入不正確顯示在您的RSS閱讀器, 通過點擊觀看或下載的視頻銳劇院的高分辨率版本

其他最近的銳劇院視頻:

  • 阿洛伊斯Reitbauer:dynaTrace AJAX版 - dynaTrace提供在Internet Explorer中的Web應用程序的性能分析的最有力的工具之一。 在這次談話中,的dynaTrace工程師阿洛伊斯Reitbauer遍歷四個使用dynaTrace接口的具體分析場景。
  • 瑞安樹叢:3 YUI的實現與性能禪 -以下編纂的指導方針可以幫助您建立快速的網站,但乾淨,快速和可擴展性的建築應用,也涉及到一種平衡的方式來表現,在每一個你的F2E工作水平。 銳3,旨在幫助您在這個過程中,提供了一個內置的神奇表現和快速的前端代碼的方便和樂趣,生產的工具,使各種大小合適的抽象層。 在本屆會議上,我們將探討在YUI 3世界高性能的JavaScript禪,並為您介紹3銳在您的處置了你寫的每一個應用程序的一些功能強大的工具。
  • 道格拉斯克羅克福德:對JavaScript的克羅克福德-場景6:Loopage -軟件開發的一套具體的設計,在第一編程語言的一切,已經做了,因為重複的錯誤而受到阻礙。 而且,有些奇蹟,JavaScript是要作出正確的,從根本上改變了我們編寫的應用程序的方法。 一次。 在歷史的循環,都發生過,但它從來沒有像這樣發生的。 這就是為什麼你應該關心的JavaScript和服務器端圍繞像Node.js的項目的興奮出現 - 不是因為他們在尖底的一個趨勢,但由於他們走向未來大變革鋪平道路在軟件中。

訂閱銳戲劇:

共享和擴展: 書籤del.icio.us Digg它! | reddit!

實施重點:租車

2010年9月28日6:01上午|在野生 銳實現由斯特凡·克洛普| 2評論

作者簡介: 斯特凡·克洛普是發展主任ExpressITech ,母公司租車速成 斯特凡一直致力於開發高度可用的網絡解決方案,為汽車租賃業在過去的6年裡的各種角色。 他目前住在溫哥華,不列顛哥倫比亞省,加拿大。

租車Express是在互聯網上領先的獨立汽車出租比較網站。 它可以讓用戶租汽車在世界各地的1000多個城市和機場。

我們的用戶群主要是非技術性的,這意味著他們要盡可能容易地比較價格和租金的汽車。 與我們的網站在2010年6月重新啟動,我們已實施2 YUI的許多組件,以幫助我們的客戶提供了一個直觀的經驗。

我們使用YUI組件?

我們一直在使用的組件包括連接管理器自動完成DataSource的 日曆動畫JSON集裝箱

我們為什麼選擇銳

審查不同的JavaScript庫,我們可能會使用在租車Express時,我們發現YUI的是我們需要的最完整的。 對我們最大的賣點的功能是非常模塊化的方法,銳,實施不同的設計模式,以及他們提供強大的文檔和例子。 從發展的角度來看,這導致我們的應用程序的快速發展而奮鬥庫。

我們如何使用YUI

我們使用YUI的方式。 我們最常用的組件是自動完成,日曆,集裝箱和連接管理。 下面是一些我們使用這些組件的方式。

自動完成

我們的網站上廣泛用於自動完成組件,幫助用戶找到一個城市或機場租一輛車。 我們真的很喜歡來實現這個組件是多麼容易,如何迅速響應。 我們的緩存搜索結果服務器端,以幫助改善搜索結果;然而,客戶端緩存也有助於大大加快元件的響應。 我們真正走上了另一項功能是多麼容易的結果是風格。 當顯示用戶的位置,這是至關重要的,因為我們需要找出哪些地方發現在城市和機場。

日曆

日曆組件也可用於整個站點時,承租人是灌裝日期進行搜索。 我們使用的是定制版的約翰Peloquin 區間選擇日曆顯示,在YUI的對話框 基本上就是我們想要做的是給承租人為期兩個月的看法時,選擇的日期,以及視覺顯示他們什麼他們目前已經選定日期範圍。 再次,這是非常簡單的實現使用YUI 2日曆,它基本上下來到創建YUI的對話框,設置身體的日曆包含一個div,然後附加一個YUI區間日曆該div。

容器

我們利用我們的整個網站,在許多不同的方式YUI的容器。 在上面的例子中,我們使用一個對話框來幫助我們顯示,當用戶選擇一個日期區間日​​曆。 對我們的速度搜索結果頁中,我們使集裝箱的大量使用,給更多不同方面的信息和車輛,他們可能會租汽車租賃公司租用。 此頁面上的容器大多是面板 ,我們再利用為每個不同的上市。 例如,車輛顯示功能面板:

評級機構的評級承租人事情多了幾分樂趣。 顯示收視率時,我們真的要注重用戶的關注,收到一個機構的成績,並在一個乾淨,易於視圖方式顯示此信息。 利用對話框控制,我們能夠限制視口和中心的對話,輕鬆地幫助我們實現這一目標。 它通過設置一個空白頁眉和頁腳樣式簡單,只需添加適當的樣式,我們的CSS。 最終的結果是一個乾淨的的評級容器承租人提供他們想要的信息。

連接管理

每當我們需要拉通過XHR請求的數據連接管理器用於整個網站。 在上面的例子中,我們利用此組件要求自動完成implementaitons城市和機場,並拉動評分對話框承租人的評級信息。

我們利用連接管理的一個有趣的方式是與我們的租賃中心區塊位於大多數頁面。 與性能,以幫助我們做了很多全頁面緩存,我們的許多內容頁。 然而,我們仍然希望這些網頁上顯示的動態租賃中心塊。 這提出了一個問題,我們能夠解決連接管理。 而不是打破了我們充分緩存頁面和緩存的頁面,我們發現這是比較容易通過一個簡單的異步請求,只包括租賃中心塊的唯一方面。 我們發現,這使我們有充分緩存頁面保留的表現,但仍然在我們的租賃中心框顯示動態內容。

最後的思考

總體而言,我們一直與我們的選擇非常樂意使用YUI。 它為我們提供了一個模塊化的庫是有據可查的,易於使用和實施。

共享和擴展: 書籤del.icio.us Digg它! | reddit!

在YUI 3畫廊:馬特·泰勒的RaphaelJS模塊

9月27日,由馬修·泰勒2010年在1:05時,在發展中, YUI 3畫廊 | 9評論

馬特·泰勒( @ rhyolight博客 )適用於雅虎內部的瀏覽器端的JavaScript框架。 他喜歡的圖形,並使用Java2D的圖書館前,他與圖紙和動畫工作。 在矽谷工作雅虎之前,馬特曾在聖路易斯地區作為一個軟件承包商。 他還開展了廣泛的對SpringSource的GroovyGrails的技術。 他原為YUI2基於牽頭的程序員GrailsUI Grails Web框架插件。

RaphaelJS是一個功能強大的JavaScript庫,管理SVG的圖紙和動畫。 它允許您輕鬆地創建SVG的畫布,繪製基本形狀和路徑很容易,甚至他們組合成集和轉換應用到一個或多個載體。 您可以繪製形狀,處理圖像,動畫一切。 RaphaelJS提供了一個很好的API輕鬆創建和修改的SVG元素。

雖然圖書館是令人印象深刻的,但我發現,我可以添加一些重要的功能與YUI3元素的RaphaelJS庫。 我已經開始了與新的這些努力RaphaelJS庫模塊

延遲加載RaphaelJS和插件

的第一個特點是,不僅RaphaelJS庫的延遲加載,但任何RaphaelJS 插件 ,您可能需要。 RaphaelJS庫模塊將只加載這些文件,當你聲明你將使用他們在YUI的沙箱。 例如:

 
銳({畫廊:畫廊2010.09.22-20-15'})。使用('畫廊拉斐爾,功能(Y){
 
	 Y.Raphael()。使用(功能(拉斐爾){
		
		 / /使用拉斐爾在這裡,就像你會在外面銳
		紙=拉斐爾(myPaper',500,500);
 
	 });
 
 });

如果您使用RaphaelJS的插件,在數組中指定的路徑和發送,作為第一個參數在Y.Raphael的()()函數。

 
銳({畫廊:畫廊2010.09.22-20-15'})。使用('畫廊拉斐爾,功能(Y){
 
	 VAR myPlugins = ['插件/ raphael.awesomePlugin.js的','插件/ raphael.wickedPlugin.js'];
 
	 Y.Raphael()。使用(myPlugins,功能(拉斐爾){
 
		 / /使用拉斐爾在這裡,就像你會在外面銳
		紙=拉斐爾(myPaper',500,500);
		 / /“紙”,將有你的插件現在增加任何新功能
	 });
 
 });

首先加載RaphaelJS庫,然​​後任意指定的插件加載前拉斐爾作為唯一的參數對象執行回調函數。

自定義事件

一旦你創建一個繪圖空間與拉斐爾對象的,那麼你可以立即得到的繪圖。 當你調用方法,如rectcircle ,和圖紙空間的path上,你會收到代表SVG的矢量對象。 通常情況下,你必須通過其相應的DOM元素node屬性的訪問。 例如:

 
紙=拉斐爾(myPaper',500,500);
平方米= paper.rect(0,0,100,100);

這將創建一個矩形矢量對象在坐標[0,0]的寬度和高度為100像素。 你有機會到底層的DOM元素(這是一個SVG的rect ,像這樣的元素):

 
 rectNode = square.node;
 rectNode.onclick =函數(){
	警報(“恭喜你,你點擊一個正方形!”);
 };

如果你是一個狂熱的YUI的用戶,你可能會比這更喜歡的事。 如何建立以及在Y.Node 就像node屬性是指背後的SVG對象的HTML元素, $node屬性是指在Y.Node該元素的包裝。 所以,你可以做這樣的事情:

 
平方米。node.on('懸停',函數(){
	警報(“恭喜你,你可以移動鼠標!');
 });

讓我們嘗試更複雜的東西。 一個載體的相互作用,應該能夠引起其他繪製向量更新自己的風格,對不對? 有關我們如何創造一些酒吧,所有使他們的顏色取決於在鼠標位於頁面上的一個圈:

 
紙=拉斐爾('rcanvas',600,800);
 
中國保監會= paper.circle(350,200,100)的attr({填寫:“粉紅”,行程:'黑'});
 
 / /推入一個數組矩形一堆
 I = 0;矩形= [];
 (我<10; I + +){
	 rectangles.push(paper.rect(0,40 *我,200,20)的attr({填寫:“紅”,行程:'黃'}));
 }
 
 / /遍歷矩形,為每個特定的圈子加入的MouseMove處理程序
 Y.Array.each(矩形,功能(矩形,索引){
	 I =指數+ 1;
	中國保監會。node.on(MouseMove事件',函數(EVT){
		 / /填充顏色是動態的,依賴於這個矩形的位置
		 / /數組中以及鼠標的位置
		 VAR LF = circ.attrs.cx  -  circ.attrs.r
			 RT = 2 * circ.attrs.r + LF,
			 X = evt.clientX  -  LF
			 = circ.attrs.cy  -  circ.attrs.r
			 BTM = 2 * circ.attrs.r +頂部
			 Y = evt.clientY  - 頂部;
			紅色=(((128 * X)/(2 * circ.attrs.r))-1)* I / 6,
			綠色= 256  - ((((128 * X)/(2 * circ.attrs.r))-1)* I / 6),
			藍色=(((128 * Y)/(2 * circ.attrs.r))-1)* I / 6;
		 rect.attr(“填寫”,“RGB(”+紅+','+綠色+“,”+藍色+')');
	 });
 });

這個例子是運行在這裡 ,但你可以看到在下面的快照,每個欄的顏色是依賴鼠標位置以及在圈欄的順序。



根據您的鼠標光標位於在圓上,酒吧顏色單獨改變。

所以你可以看到$node是一個有用的快捷鍵,但沒有壯觀。 這真的是美妙的,如果你創建與RaphaelJS的每一個SVG的對象可以觸發自定義事件 這將使您的個人繪圖元素觸發自定義事件,並在頁面上什麼都可以聽和回應。 在許多方面,這可能是有用的。 對於初學者來說,它提供了豐富您的圖紙之間的相互作用。 一個向量的用戶交互,現在可以通知任何其他媒介的互動需求。 這意味著你可以編程火某些條件得到滿足時,從您的圖紙事件。 這不僅讓你的圖紙,以通知其他載體,但頁面上的任何東西都可以聽英寸

 
紙=拉斐爾('rcanvas',600,800);
 
中國保監會= paper.circle(350,200,100)的attr({填寫:“粉紅”,行程:'黑'});
 
 / /矩形和圓形陣列
 VAR I = 0,矩形= [],圓= [];
 (我<10; I + +){
	 rectangles.push(paper.rect(0,40 *,40 *,20)的attr({填充:'紅',中風:'黃'}));
	 circles.push(paper.circle(0,0,20),隱藏());
 }
 Y.Array.each(矩形,功能(矩形,索引){
	 I =指數+ 1;
	中國保監會。node.on(MouseMove事件',函數(EVT){
		 VAR LF = circ.attrs.cx  -  circ.attrs.r
			 RT = 2 * circ.attrs.r + LF,
			 X = evt.clientX  -  LF
			 = circ.attrs.cy  -  circ.attrs.r
			 BTM = 2 * circ.attrs.r +頂部
			 Y = evt.clientY  - 頂部;
			 newWidth =(((256)/(2 * circ.attrs.r))-1)* I / 6,
			紅色=(((128 * X)/(2 * circ.attrs.r))-1)* I / 6,
			綠色= 256  - ((((128 * X)/(2 * circ.attrs.r))-1)* I / 6),
			藍色=(((128 * Y)/(2 * circ.attrs.r))-1)* I / 6;
		 / /這個時間,不僅改變顏色,但也矩形的寬度
		 rect.attr({
			寬度:newWidth,
			填寫:“RGB(”+紅+','+綠色+“,”+藍色+')'
		 });
		 / /觸發自定義事件通知,這個矩形的寬度改變
		 rect.fire(寬度改變',{寬度:newWidth,來源:矩形,順序為:指數});
	 });
	
	 / /每個矩形得到一個監聽器寬度改變觸發
	 rect.on(寬度改變,功能(EVT){
		 VAR ATTRS = evt.source.attrs;
		 / /獲得相應的圓圈,將它移動到矩形的右端
		界[evt.order]。ATTR({
			 CX:attrs.x + attrs.width,
			 CY:attrs.y,
			填寫:“矢菊花”
		 。})秀();
		
	 });
	
 });

以在這裡看看這個運行的例子。 你還可以看到從快照低於各界正在繪製矩形的右端。 這的現象發生反應,被捕獲的圓圈移動到當前矩形的屬性的相對位置的一個處理程序,每一個人的矩形的自定義事件觸發。

這開闢了一些有趣的possiblities YUI3 RaphaelJS內。 例如,如果我們可以創建一組矢量形狀,同組的觸發事件向外部世界的實體本身? 內部,每一個矢量繪圖可以溝通通過自定義事件與它的容器,容器將作出決定哪些數據觸發到外面的世界。 這開闢了完全封裝的,互動的SVG控制的想法。

總結

與HTML5和其衛星技術的優勢地位,有這麼多的更多的選擇,豐富的互動閃光以外。 理想的情況下,頁面上的任何向量元素應該完全訪問和標準化。 這開闢了為我們的精彩possiblities而不訴諸到Flash中創建的訪問,標準的網絡控制。 SVG是一種吸引人的選擇,因為矢量繪製在頁面上的每一個DOM節點的支持,我們可以與YUI的修改,就像任何其他的DOM節點。 這是什麼允許的RaphaelJS庫模塊 ,以增加被由RaphaelJS創建所有的SVG對象,這是一個豐富的互動與頁面上的這些別處elments的關鍵。

共享和擴展: 書籤del.icio.us Digg它! | reddit!

clearfix重裝上陣+溢出:隱藏揭秘

9月27日,2010在6:27的由蒂埃里Koblentz上午的CSS 101 | 12評論

作者簡介:蒂埃里Koblentz是在雅虎前端工程師
他擁有, TJK設計EZ-css.org的 你可以按照在Twitter蒂埃里@ thierrykoblentz

clearfixoverflowhidden可能是兩個最流行 ​​的技術,以清除無結構化標記的彩車。

這短短的文章是關於加強第一種方法和脫落的第二個真正意義上的一些輕。

clearfix

你知道的一切有關clearfix是錯誤的,我解釋這種方法的問題,創建跨瀏覽器,我建議使用clearfix花車(如一個模態窗口)不相鄰 ​​的元素,但作為作者,我們仍然要處理崩潰邊緣。 這個演示頁面演示了這個問題。

保證金,倒塌前兩箱的行為表明,它是生成的( 非空 )的內容,保持箱內 (非常有意義的底部邊緣, 根據規範)。

所以,要創建跨瀏覽器的相同方塊佈局,我們可以加強原來的方法生成的內容, 同時使用偽元素 :before :after

  clearfix:之前,
 clearfix:後{
  內容:;“。”    
  顯示:塊;    
  身高:0;    
  溢出:隱藏;	
 }
 clearfix:後明確:既;}
 clearfix {變焦:1;} / * IE <8 * / 

不要簡單地取代clearfix規則,在現有的項目 ,這些新的,雖然,你可能已到崩潰邊緣通過其他方法相關的修補問題。

overflow

浮在大部分討論有關結算overflow:hidden方法,它總是由一個“拍攝, 如果你放在div絕對定位的元素,你會被切斷這些元素 “。 但是,這是沒有必要如此。 overflow:hidden總是會夾相對定位元素,但它不會總是隱藏絕對定位的。 這是因為它包含塊取決於:

10.1“包含塊”的定義

4。 如果元素的位置是:絕對“,成立一個'位置'的'絕對',“相對”或“固定”,是由最近的祖先包含塊...

這意味著絕對定位的元素與風格的一個盒子之外將顯示overflow:hidden 除非其包含塊的框本身或內說框中的元素。

您可以檢查這個演示頁面看到事物如何運作。

更好的替代品

如果你可以申請一個包含浮動元素的寬度,那麼你最好的選擇是使用:

 顯示:內聯塊;
寬度:<any的明確值>; 

進一步閱讀

共享和擴展: 書籤del.icio.us Digg它! | reddit!

銳:週三9月29日營業時間

9月24日,盧克·史密斯2010年在下午1:50 | 開發 | 1評論

下一篇文章:YUI的營業時間將在下週三,29日。

銳3圖表在下一個版本中,預覽一些早期的工作已經在畫廊 特里普橋樑將在電話會議上,引入新的結構和銳2的圖表包所學的知識,如何通知新的架構,靈活性和簡單性之間尋求微妙的平衡。 哦,我沒有閃光

也甲板上,將艾倫拉比諾維奇驚人的工作,他一直在做的yuilibrary.com重新設計更新。 我們正在談論的一切,在這裡:主頁,用戶指南,演示,教程,API文檔。 的作品。 在許多方面,它是一個全新的故事,一個更好的。

我們會從上午10時至中午12時PDT在線。 連接的詳細信息和往常一樣。

  1. 撥號到1-888-371-8922(Skype的非美國與會者*)
  2. 輸入與會者代碼47188953#
  3. 加入屏幕共享會話 (會提示你安裝的Adobe Connect插件,如果這是您第一次使用)

最後,這營業時間yuilibrary.com論壇主題是這裡 看筆記,有趣的外賣店,並調用完成後,它的錄音。 或關閉年初開始張貼的問題,建議為主題,或代碼,你想檢討的談話。

不要忘了訂閱YUI的日曆,並遵循@ yuilibrary Twitter的最新更新營業時間和其他YUI的趣味性。

希望看到你!

* - 如果Skype是不是一種選擇,電子郵件我的本地電話號碼。

共享和擴展: 書籤del.icio.us Digg它! | reddit!

在為2010年9月24日,野生

9月24日下午1:00由Eric米拉利亞在野外 ,2010 | 關閉

隨著我們準備YUIConf 2010年和很多在未來幾個月內,這裡有一些其他的事情,我們已經邁出了較大的YUI的世界注意到:

共享和擴展: 書籤del.icio.us Digg它! | reddit!

下一頁»
主辦雅虎

©2006-2012雅虎公司所有權利保留。 隱私政策 - 服務條款

支持WordPress的關於雅虎 虛擬主機