Yahoo! UI Library 使用筆記 1,YUI 的介紹
這個(gè)介紹是找的別人的,但是原作者信息木有了,所以沒(méi)有注明? =。=? 
1,Yahoo! UI Library 的介紹
1.1 簡(jiǎn)介
Yahoo! User Interface Library(簡(jiǎn)稱yui) 是一個(gè)使用Javascrīpt編寫(xiě)的工具和控件庫(kù)。它利用DOM腳本,DHTML和AJAX來(lái)構(gòu)造具有豐富交互功能的Web程序。yui也包含幾個(gè)核心的CSS文件。yui中的所有組件已經(jīng)以開(kāi)源的形式發(fā)布,它們遵循BSD協(xié)議并且可以免費(fèi)使用??梢詮腟ourceforge站點(diǎn)下載完整的項(xiàng)目文件,同時(shí)包含相關(guān)文檔和示例。
yui項(xiàng)目開(kāi)發(fā)人員的BLOG:YUI Blog,交流社區(qū):ydn-javascrīpt on Yahoo! Groups。
準(zhǔn)備工作:
1、 下載yui
yui項(xiàng)目文件已經(jīng)發(fā)布在Sourceforge站點(diǎn),文件包含相關(guān)文檔,示例和代碼。
注:Yahoo沒(méi)有為yui的運(yùn)行提供免費(fèi)的運(yùn)行環(huán)境,你需要運(yùn)行在你在即Web服務(wù)器上。
2、 在你的網(wǎng)頁(yè)中加入你需要的類庫(kù)文件
為了使用yui中的組件你必須在你的頁(yè)面文件中用<scrīpt>指定相關(guān)組件的類庫(kù)文件地址。如果該組件依賴于其他組件,你必須使用<scrīpt>指定所依賴的組件的類庫(kù)文件地址。
3、 如果有必要,在頁(yè)面中加入CSS文件
某些yui的控件包含一個(gè)相應(yīng)的CSS文件,用來(lái)設(shè)定控件的樣式。此時(shí),你必須在頁(yè)面中使用<style>指定相應(yīng)的CSS文件的地址。你可以通過(guò)修改相應(yīng)的CSS文件達(dá)到你想要的效果。
4、 瀏覽相關(guān)文檔和示例
每一個(gè)組件都包含詳細(xì)的API文檔,并且提供了常用的例子。學(xué)習(xí)完后,回顧一下所有的API,做到心中有數(shù)。因?yàn)閷?duì)于API理解的好壞將影響你對(duì)yui的使用效果。
1.2 組件介紹
Yui組件分成2類:工具包和控件庫(kù)
Yui 工具包
Yui 工具包利用DOM腳本來(lái)簡(jiǎn)化瀏覽器內(nèi)的開(kāi)發(fā)(in-browser devolvement),使用DHTML和AJAX的特性開(kāi)發(fā)所有的Web程序。
動(dòng)畫(huà)(Animation):在你的頁(yè)面中通過(guò)指定位置,大小,透明度或者頁(yè)面元素的其他特性來(lái)創(chuàng)建一個(gè)"電影效果(cinematic effects)"。這些效果將在你的頁(yè)面發(fā)生變化的時(shí)候給用戶更好的體驗(yàn)。
連接管理(Connection Manager):這個(gè)工具包幫助你管理XMLHttpRequest(一般被稱為AJAX)事務(wù),它提供對(duì)表單提交(form posts),錯(cuò)誤捕獲(error handling)和callbacks的全面支持。該工具包也支持文件的上傳管理。
DOM:DOM工具包提供更簡(jiǎn)單的DOM腳本的功能調(diào)用方式,包含元素的位置和CSS樣式的管理。
拖放(Drag and Drop):創(chuàng)建可拖放的對(duì)象。為了提供豐富的交互功能(比如拖動(dòng)一個(gè)對(duì)象到目標(biāo)位置)你可能需要編寫(xiě)很多代碼。這個(gè)工具包可以在所有支持的瀏覽器中捕獲所有的操作事務(wù)并保證其穩(wěn)定地運(yùn)行。
事件(Event):這個(gè)神奇的管理類庫(kù)給你提供一種簡(jiǎn)單安全的方法訪問(wèn)瀏覽器的事件(比如點(diǎn)擊和鍵盤(pán)操作)。這個(gè)事件封包中還包含了自定義事件對(duì)象,它為你的程序交互提供一種發(fā)布和訂閱事件的機(jī)制。
yui控件:
yui控件庫(kù)為你頁(yè)面提供一組高交互性性的可視化元素。這些元素完全在客戶端創(chuàng)建維護(hù),不需要請(qǐng)求服務(wù)器進(jìn)行頁(yè)面刷新。
這些控件包括:
自動(dòng)完成(AutoComplete)控件:自動(dòng)完成控件為文本輸入提供一種漸進(jìn)式的用戶體驗(yàn)(streamline user interactions)。控件會(huì)提供相似項(xiàng)列表和基于多樣化的數(shù)據(jù)格式的提前鍵入功能(type-ahead functionality based on a variety of data-source formats),并且可以通過(guò)XMLHttpRequest訪問(wèn)服務(wù)端的數(shù)據(jù)。
日歷(Calendar)控件:一個(gè)用來(lái)日期選擇的動(dòng)態(tài)圖形控件。
容器(Container)控件:一組模仿windows樣式的控件,他們包括Tooltip, Panel, Dialog?和 SimpleDialog。其中Module?和 Overlay控件提供一個(gè)可擴(kuò)展的平臺(tái),你可以控制自定義的模仿windows樣式的控件。
日志(Logger)控件:提供一個(gè)快速和簡(jiǎn)單的記錄日志的方式,它直接將日志信息輸出到屏幕控制臺(tái)(on-screen console)、Firefox的擴(kuò)展組件FireBug,或者Safari的Javascrīpt控制臺(tái)。yui的Debug組件將完整的記錄輸出信息和調(diào)試信息。
菜單(Menu)控件:利用此控件只需要幾行簡(jiǎn)單的代碼就可以設(shè)計(jì)一個(gè)動(dòng)態(tài)樣式的菜單??梢酝耆褂胘avascrīpt構(gòu)造一個(gè)菜單,can be layered on top of semantic unordered lists。
滑塊(Slider)控件:提供一個(gè)可滑動(dòng)的組件,它允許使用者在一定的范圍內(nèi)(x軸,y軸)改變滑塊的位置。
樹(shù)形(TreeView)控件:提供一個(gè)節(jié)點(diǎn)可縮放的樹(shù)形控件。節(jié)點(diǎn)可以是鏈接,自定義屬性,并且可以動(dòng)態(tài)加載。節(jié)點(diǎn)元素的展現(xiàn)可以通過(guò)CSS修改,比如文件夾視圖,TO-DO任務(wù)列表或者其他可視化處理
第三章 yui的CSS資源
為了讓CSS能符合不同等級(jí)的瀏覽器(A-Grade browsers)的標(biāo)準(zhǔn),我們想了很多。我們把這些作為yui類庫(kù)的一部分共享出來(lái),希望能在這里得到促進(jìn),獲得一個(gè)簡(jiǎn)潔的,可維護(hù)并在瀏覽器中表現(xiàn)優(yōu)秀的設(shè)計(jì)。
頁(yè)面網(wǎng)格樣式(CSS Page Grids):7個(gè)基本的用css組織子組件的頁(yè)面框架,支持130種不通的頁(yè)面布局。
標(biāo)準(zhǔn)的CSS字體(Standard CSS Fonts):標(biāo)準(zhǔn)的跨瀏覽器字體樣式和大小展現(xiàn)。
標(biāo)準(zhǔn)的CSS排列(Standard CSS Reset):使用這些CSS聲明來(lái)排除頁(yè)面的空白部分并且公共元素的樣式兼容各種瀏覽器的展現(xiàn)。
![]() |
YUI version 0.12.0 更新,增加了 TabView控件,以及API的文檔以及所有例子也都做了調(diào)整
YUI version 0.12.0: TabView Control, Improved API Documentation, and More The TabView Control: Written by YUI Animation and Dom author Matt Sweeney, this dynamic tab solution is the newest YUI addition and features robust support both for progressive enhancement and for high-gloss richness. Check out Matt's roster of TabView examples for an idea of what the new control can do; view source on the examples to see how they're implemented. |
posted on 2006-12-21 16:12 PeterChan 閱讀(3338) 評(píng)論(0) 編輯 收藏 所屬分類: Ajax