YAHOO YUI工具庫

1.1. YAHOO工具庫提供的方法 l namespace 用於創建一個全局的命名空間,使用YUI時,首先會自動創建widget,util,example三個命名空間,使用時也可以自定義命名空間。類似於在程序中建了了一個static變量。 l lang javascript擴展的語言工具,用於判別對象的類型。 l lang.extend 用於從一個對象上擴展出另一個對象,模擬了類的繼承的方式,但不同的是,在創建子對象時,父對象的構造函數不會自動調用。父對象的引用存放在了子對象的supperclass中,構成了一個鏈狀繼承關係。在2.2.2的版本中,YAHOO.lang.extend和YAHOO.extend指向同一函數對象。 l lang.augment 將一個對象的屬性(部分或全部)複製到另一個對象,但並非真正意義上的複製,只是一種引用。YAHOO.augment=YAHOO.lang.augment。 l log 用來調試的一個工具,將信息顯示到log控件。 l env 環境信息和YUI組件信息 l YUI_config.listener 可以定義自己的回調函數,當有新的YUI組件加載到頁面時將會調用YUI_config.listener指向的函數。 2. YUI提供的Dom操作 特點:對於大部分DOM操作提供了批量操作的功能,而對用戶只需使用統一的函數接口就能完成單個或批量的操作,主要得益於DOM內部的batch方法。 2.1. Element的查找 YAHOO.util.Dom.get(element) 調用document.getElementById(element),獲取指定的頁面元素。 YAHOO.util.Dom.getElementsBy(method,tagName,rootNode) 在rootNode的子節點中按照用戶提供的method方法在所有標籤爲tagName的element中查找符合條件的節點。rootNode不指定則在整個Document中查找,method是一個method(elementID)類型的函數對象,該函數對象的返回值爲Boolean值。 YAHOO.util.Dom.getElementsByClassName(className, tagName, rootNode) 返回指定根節點下所有標籤爲tagName,class爲className的DOM節點數組。根節點爲可選參數,不指定時在整個頁面中查找 YAHOO.util.Dom.inDocument(el) 判斷元素el是否在當前的DOM中,支持批量操作。 2.2. 樣式控制和訪問 YAHOO.util.Dom.hasClass(element, className) 判斷element標籤上是否指明瞭className的class,支持批量操作 YAHOO.util.Dom.addClass(element, className) 給指定標籤增加名爲className的class,支持批量操作. YAHOO.util.Dom.removeClass(element, className) 刪除element上的名爲className的class,支持批量操作 YAHOO.util.Dom.replaceClass(element, oldClassName, newClassName) 替換element上的oldClassName樣式爲newClassName,支持批量操作 YAHOO.util.Dom.getStyle(element, property) 獲取element的style中的property屬性,支持批量操作 YAHOO.util.Dom.setStyle(element,property,pValue) 設置element的style的property屬性爲pValue,支持批量操作 注:本節中的class指的是CSS中定義的class。 2.3. 位置控制和訪問 位置控制的相關函數 YAHOO.util.Dom.setX YAHOO.util.Dom.setY YAHOO.util.Dom.setXY YAHOO.util.Dom.getX YAHOO.util.Dom.getXY 返回元素座標 [ left,top ] YAHOO.util.Dom.getRegion 獲取元素的座標Region對象{left,top,right,bottom} 可支持批量操作 獲取頁面可視面積的高度和寬度 YAHOO.util.Dom.getClientWidth YAHOO.util.Dom.getClientHeight 獲取Document的高度和寬度 YAHOO.util.Dom.getDocumentWidth YAHOO.util.Dom.getDocumentHeight 獲取頁面可視區域的高度和寬度(不包含滾動條) YAHOO.util.Dom.getViewportHeight YAHOO.util.Dom.getViewportWidth Region對象:{left,top,right,bottom} YUI提供的一個對象,用於完成多個矩形區域間的計算(如相交,包含。 YAHOO.util.Region.contains(region) 判斷是否包含了region區域 YAHOO.util.Region.getArea 計算面積 YAHOO.util.Region.intersect(region) 計算與region區域的交迭區域 YAHOO.util.Region.union(region) 計算與region區域求並集(即包含兩個區域的最小區域) Point對象:{x,y} YUI提供的對象,用於定義座標點。 3. YUI提供的element工具 YUI提供了一組操作頁面element的工具,是對標準HTML elements的一種封裝,能夠直接通操作element的實例,使得增加監聽器,操作DOM,設置/獲取element的屬性等工作變得很簡單。部分方法是直接調用YUI的DOM工具集提供的方法,如對class操作的相關方法、獲取element的相關方法等等,在此不再重複。 YAHOO.util.Element(elementId) 創建element,如果elementId在Document中還不存在,仍然可以通過YUI對他進行屬性設置,增加監聽器等操作, Element工具集會自動等到該elementId可用後執行這些操作,實際上真正的操作是等到contentReady事件發生後才進行的。 YAHOO.util.Element.appendChild(child) 在DOM結構中element下增加子節點 YAHOO.util.Element.getElementsByTagName(tag) 獲取tagName爲tag的所有頁面元素 YAHOO.util.Element.hasChildNodes 判斷是否具有子節點 YAHOO.util.Element.insertBefore(element, before) 在元素before前插入element YAHOO.util.Element.removeChild(child) 刪除DOM中元素的child子節點 YAHOO.util.Element.replaceChild (newNode , oldNode) 替換子節點oldNode爲newNode 4. YUI提供的Event工具集 YUI提供的Event工具集簡化了瀏覽器中事件驅動程序的編寫,提供了一種簡單的接口來定製事件和檢查瀏覽器中的event對象。YUI事件工具集提供了自定義事件對象(Custom Event),通過自定義事件對象可以“發佈”自己感興趣的時刻或事件,頁面中的YUI組件能夠響應這些自定義的事件並做出迴應。 YUI對事件響應的順序:通過YUI Event工具集添加的事件,默認是在冒泡過程中執行事件處理函數的。從DOM節點上來說,是從子節點向根節點響應事件。 Event需要的引入 build/yahoo/yahoo-min.js build/event/event-min.js Event和Custom Event分別定義在YAHOO.util.Event和YAHOO.util.CustomEvent中 Event工具集提供的方法 YAHOO.util.Event.addListener(element,eventType,fn,obj,override) 參數: element:爲綁定事件的元素id,可以是一個數組,以支持批量操作 eventType:爲事件類型 fn:爲事件響應的回調函數 obj:當override爲true時,爲回調函數傳入的參數對象;當override爲false時,該參數被忽略。 override: 返回值類型:Boolean 功能:給指定的element綁定事件響應函數 YAHOO.util.Event.removeListener:function(element,eventType,fn) 參數: element:爲綁定事件的元素id, eventType:事件類型 fn:爲事件響應函數 返回值類型:Boolean 功能:給指定的element解除綁定事件 YAHOO.util.Event.purgeElement ( el , recurse , sType ) 參數: el:爲綁定事件的元素id, recurse:Boolean值,是否解除子節點的事件綁定 sType:事件類型 返回值類型:Boolean 功能:給指定的element解除綁定的同一類型的事件,也可以解除子節點上綁定的這一類型的事件 YAHOO.util.on addListener的函數別名 YAHOO.util.Event.onAvailable( p_id , p_fn , p_obj , p_override ) 參數: p_id:爲綁定事件的元素id, p_fn:爲事件響應函數 p_obj:同addListener的obj參數 p_override:同addListener的override參數 返回值類型:無 功能:當指定的element的p_id出現時,執行事件響應函數。如果在頁面初始化之前執行這一函數,當頁面加載時(可能還未完成時),就會執行響應的事件響應函數;如果放在頁面加載之後執行這一函數,將以固定的時間輪詢,當element可用時響應這一事件。這個輪詢的的時間是可以配置的,缺省的時間是10秒一次。 YAHOO.util.Event.onContentReady( p_id , p_fn , p_obj , p_override ) 參數: p_id:爲綁定事件的元素id, p_fn:爲事件響應函數 p_obj:同addListener的obj參數 p_override:同addListener的override參數 返回值類型:無 功能:與onAvailable類似,但不同的是事件響應函數是等到element可以安全的修改的時候才響應。 YAHOO.util.Event.onDOMReady ( p_fn , p_obj , p_scope ) 參數: p_fn:爲事件響應函數 p_obj:同addListener的obj參數 p_scope:同addListener的override參數 返回值類型:無 功能:當DOM第一次可用時執行響應函數。 YAHOO.util.Event.preventDefault ( event) 參數: event:事件對象 返回值類型:無 功能:阻止事件的缺省行爲發生。 YAHOO.util.Event.getListeners ( el , sType ) 參數: el:HTML element sType:事件類型,String類型 返回值類型:Object{ type:事件類型 fn:addListener添加的事件響應函數 obj:提供給事件響應函數的參數對象 adjust:否獲取缺省的事件監聽器 index:UI事件監聽器列表中的位置 } 功能:阻止事件的缺省行爲發生。 YAHOO.util.Event.getTime( event) 參數: event:事件對象 返回值類型:Date對象 功能:獲取事件發生時的時間。 YAHOO.util.Event.getTarget(ev , resolveTextNode) 參數: evt:事件對象 resolveTextNode: 返回值類型: HTML element 功能:獲取事件發生時的頁面標籤。對於IE即window.event.srcElement 5. YUI提供的CSS樣式 5.1. Fonts 字體的規範樣式,需要引入build/fonts/fonts-min.css 5.2. Reset 規範了所有HTML element的缺省樣式,需要引入build/fonts/reset-min.css 5.3. Grids 提供了用於頁面排版的CSS樣式,需要引入build/fonts/grids-min.css 6. YUI組件 6.1. Connection Manager 提供了訪問XMLHttpRequest對象的一個簡單接口 對象定義: YAHOO.util.Connect.asyncRequest Connection的引入: build/yahoo/yahoo-min.js build/event/event-min.js build/connection/connection-min.js Connection的使用 1. 創建對象 var transaction = YAHOO.util.Connect.asyncRequest(’GET’, sUrl, callback, null); 第一個參數:指明http請求的方式,可用的方式包括GET、POST、HEAD、PUT、Delete,但PUT和Delete可能在一些A級瀏覽器上不支持。 第二個參數:請求的URL 第三個參數:回調函數,用於服務器返回數據時調用的客戶端處理程序 第四個參數:POST方式時,提供給URL的POST參數信息。 [注]:A級瀏覽器A-Grade browsers是YUI對瀏覽器的一個等級劃分,具體劃分原則詳見http://developer.yahoo.com/yui/articles/gbs/index.html 2. 定義回調函數 l 在異步事物中,可以創建回調函數處理服務器的響應和相關數據,如果你不關心服務器的返回信息,也可以忽略這些回調函數,所有這些回調函數對象都是可選的,然而在大多數情況下,應該至少提供以下三個回調函數: success:服務器做出有效響應時的回調函數 failure:服務器響應了但提供了錯誤信息時的回調函數 argument:success和failure爲了處理返回信息需要的參數,可以是對象、字符串、數字或者包含了數據的數組。 l 在使用YAHOO.util.Connect.setForm上載文件時,需要定義upload回調函數代替success和failure l 在回調函數中this將失去作用範圍,這種情況下需要通過一個指向父對象的引用的參數來訪問對象的成員。爲了能夠使用對象的方法作爲回調函數,並維持成員的作用範圍,需要定義回調函數對象的成員scope,作爲this的值。 6.2. Button 對象定義:YAHOO.widget.Button 與傳統HTML Form的按鈕類似,不同的是它的label可以與 value不一致。還可以創建帶菜單的按鈕,或者radio button、checkbox 分類: 可以創建幾種類型的按鈕: button:普通的下壓式按鈕,可以在按鈕按下時執行用戶指定的代碼 link:按下時導航至相應的URL submit:作用相當於form的提交按鈕 reset:form的reset按鈕 checkbox: radio: menubutton:按下時顯示隱藏按鈕 splitbutton:按下時執行命令或顯示菜單的按鈕 使用Button必需的引入: build/fonts/fonts-min.css build/button/assets/button.css build/yahoo-dom-event/yahoo-dom-event.js build/element/element-beta-min.js build/container/container_core-min.js build/menu/menu-min.js build/button/button-beta-min.js 初始化的方式: 1.使用替換的方式 constructor:YAHOO.widget.Button(sourceElementId,{配置集}) Button的構造器首先根據sourceElementId在DOM中查找,一旦找到,就通過DOM的 replaceChild方法替換掉 2.使用新建的方式 constructor:YAHOO.widget.Button({配置集}) 這種情況下根據配置集中指明的父id(Container)創建按鈕,如果配置集中沒有指明按鈕則使用YAHOO.Dom.generateId生成button的ID, Button的配置集 屬性名稱 含義 備註 id 替換後的新的element id label 按鈕上顯示的文字 check 按鈕選中/未選中的狀態 checkbox用到 type 指明button的類型 缺省爲button container 按鈕的父id 使用新建方式時會用到 srcelement 使用替換方式時 menu 按鈕對應的菜單YAHOO.widget.menu title 按鈕title 沒有指定label時使用title href 按鈕導航URL 僅在按鈕類型爲link時有效 target 中的target 僅在按鈕類型爲link時有效 tabindex 按tab切換焦點時的順序號 onclick click事件的響應函數 onclick:{ fn: Function, // 事件的響應函數. obj: Object, // An object to pass back to the handler. scope: Object // The object to use for the scope of the handler. } } 6.3. ButtonGroup 對象定義:YAHOO.widget.ButtonGroup ButtonGroup是一組按鈕,同組中只能有一個按鈕被選中。根節點爲
6.4. AutoComplete 用戶在文本輸入框中輸入文字時,該組件通過輸入的內容查找符合輸入條件的內容,並顯示出所有符合條件的內容,供用戶能夠很快的完成正確的輸入。 AutoComplete的引入 build/yahoo-dom-event/yahoo-dom-event.js build/connection/connection-min.js build/animation/animation-min.js build/autocomplete/autocomplete-min.js 控制AutoComplete的配置集 屬性名稱 含義 備註 animVert 控制下拉框向下展開的動畫效果 animHoriz 控制下拉框水平方向展開的動畫效果 animSpeed 控制動畫的速度 delimChar 一行顯示多條記錄時的分隔符,可以是字符串數組或字符串 maxResultsDisplayed 結果集的最大顯示行數 minQueryLength 進行查詢前的輸入的字符個數 queryDelay 用戶鍵入字符後多少秒開始查詢,默認0.5 autoHighlight 查詢出來的結果集顯示後,是否高亮顯示第一條,默認爲true highlightClassName 高亮顯示的樣式名,默認爲yui-ac-highlight prehightlightClassName 鼠標移動到下拉框的一行上時,那一行的樣式,默認爲yui-ac-prehighlight useShadow 下拉框是否有陰影 useIFrame 下拉框欠套在一個iframe中,用於解決IE中覆蓋
,每一個tab頁面項使用 TableView的引入 /build/tabview/assets/tabview.css build/tabview/assets/border_tabs.css build/yahoo-dom-event/yahoo-dom-event.js build/element/element-beta-min.js build/connection/connection-min.js build/tabview/tabview-min.js TableView的初始化 constructor:YAHOO.widget.TabView(tableViewId); 創建的方式: 1.頁面中存在id 注: yui-navset爲css文件中定義的TableView的樣式 yui-nav爲css文件中定義的Tab頁標籤的樣式 2.完全使用JavaScript創建TabView TableView的配置集 屬性名稱 含義 activeIndex 當前激活的Tab頁面編號,第一頁爲0 activeTab YAHOO.widget.Tab,指向被激活的Tab頁, element 被綁定的HTML元素 orientation 頁面標籤所在的位置,top,bottom,left,right 默認爲top tabs 標籤頁(Tab)的數組列表,只讀 Tab的配置集 屬性名稱 含義 active 當前Tab頁面是否激活,Boolean值 cacheData Tab頁加載數據的時候是否隱藏,只有dataSrc可用的時候有效 content 激活頁面的文字標籤 contentEl dataLoaded 數據是否加載完成 dataSrc 如果設置了這一屬性,當Tab頁被激活時,頁面數據從這個URL處加載,需要用到Connection Manager dataTimeout Tab頁加載的超時時間,單位微秒,只有在設置了dataSrc纔有效 disabled 是否禁止激活本Tab頁,缺省爲false label Tab頁的標籤 labelEl Tab頁的HTML容器元素 loadMethod 數據請求的方式,缺省爲GET,只有在設置了dataSrc纔有效 TabView用到的CSS定義 Class 描述 yui-navset TabView的
yui-nav TabView的 yui-content TabView的
的下一級
disabled Tab頁面不可用時的樣式,應用在上 selected Tab頁面激活時的樣式,應用在上 loading Tab頁面加載時的樣式,TabView的
的下一級
的樣式 7. 常見問題 7.1. YUI提供的javascript的文件引入 關於引入的版本: YUI對於需要引入的js文件都提供了多個版本: 1 min是去掉空格後的版本,在正式項目中建議使用min版。 2 debug是調試的版本,主要結合YUI的log組件使用。 3 beta版 4 不帶後綴的爲便於閱讀的版本 yahoo-dom-event.js是包含了yahoo.js,dom.js,event.js的內容,使用了前者後就無需再引入後面三個文件。 關於引入的順序: 1.大部分組件都是依賴於事件驅動,並通過YUI提供的工具集進行DOM操作的,因此yahoo.js,dom.js,event.js或者這三個文件的合成文件yahoo-dom-event.js必須早於其他YUI的js文件引入 2.Autocomplete如果需要從服務器取數據時,要用到YUI提供的datasource.js,因此datasource.js必須在autocomplete.js之前引入;如果是以XHR(JSON,XML等)的方式取數,還要用到YUI提供的connection,因此connection.js也必須在autocomplete.js之前引入;如果用到了動畫方式展開下拉框,則需要保證animation.js在autocomplete.js之前引入。 3.Datatable中列寬度的調整,Container組件中的Overlay以及從Overlay繼承下來的Dialog,SimpleDialog的窗口拖動,需要用到dragdrop.js,因此dragdrop.js必須在datatable.js和container.js之前引入;如果要用到Dialog的動畫顯示效果,則需要先引入animation.js。
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章