PeterChan's Own Space

           

          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
          November 13, 2006 at 6:35 pm by Eric Miraglia | In Development | 16 Comments
          Today we released version 0.12 of the YUI Library. Here are the highlights:

          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.
          Improved Documentation: YUI developer Adam Moore (Event, Drag & Drop, Slider, TreeView) has created a new tool for generating API documentation, allowing us to generate unified, crosslinked API docs with an integral AutoComplete-powered search control. The new API documents provide developers with a clearer picture of class structures and provide separate categorization for properties and configuration options. You may never go back to Cheat Sheets again...
          ...But in Case You Still Like Cheat Sheets: Cheat Sheets are updated for version 0.12 and include new sheets for TabView and for Nate Koechley's CSS Reset, Fonts and Grids foundation. You can download all the YUI Cheat Sheets from the YUI Library website.
          Speaking of CSS Grids: Nate has rev'd the Grids package with baked-in support for 750px, 950px, and full-viewport ("liquid") layouts. Grids 0.12 triples the number of supported layouts and still weights in under 3KB before gzipping. We've built the YUI website on the Reset/Fonts/Grids foundation now and we're making use use of the new full-viewport support.
          Improvements Throughout the Library: There are enhancements to be found throughout the library, from Event's new onContentReady method to a significantly improved Calendar Control with a simplified interface for creating multi-month calendar displays (if you're upgrading from a previous version of Calendar, check out the step-by-step upgrade guide). For a full list of changes, see the release notes documentation that accompanies the distribution.
          We'll follow up with more information on some of these topics later in the week. For now, please make your way to SourceForge to download the latest YUI distribution; see the release notes in the distribution for a full manifest of changes throughout the library. As always, the YUI site on the Yahoo! Developer Network has all the latest documentation.

          posted on 2006-12-21 16:12 PeterChan 閱讀(3338) 評(píng)論(0)  編輯  收藏 所屬分類: Ajax


          只有注冊(cè)用戶登錄后才能發(fā)表評(píng)論。


          網(wǎng)站導(dǎo)航:
           

          導(dǎo)航

          統(tǒng)計(jì)

          常用鏈接

          留言簿(1)

          隨筆分類

          隨筆檔案

          文章分類

          友情鏈接

          推薦網(wǎng)站

          搜索

          最新評(píng)論

          閱讀排行榜

          評(píng)論排行榜

          主站蜘蛛池模板: 河间市| 贵德县| 南投县| 家居| 平南县| 闸北区| 横山县| 漯河市| 城口县| 青田县| 建水县| 清镇市| 花垣县| 内江市| 光山县| 惠安县| 广平县| 屯门区| 临颍县| 建宁县| 喀喇| 武宁县| 绥芬河市| 长阳| 马山县| 延寿县| 红安县| 台中县| 渑池县| 年辖:市辖区| 朔州市| 武义县| 沅江市| 丽江市| 澄城县| 阿瓦提县| 巩义市| 江阴市| 灯塔市| 休宁县| 阿巴嘎旗|