YAHOO工具庫(二)

6.5.     DataTable

DataTable的引入

<!—需要的CSS -->

build/datatable/assets/datatable.css

<!--必須的引入 -->

build/yahoo-dom-event/yahoo-dom-event.js

<!-- 可選項,用到XHR取數方式時需要 -->

build/connection/connection-min.js

<!—可選項,用到調整列寬時需要 -->

build/dragdrop/dragdrop-min.js

<!-- Source files -->

build/datasource/datasource-beta-min.js

build/datatable/datatable-beta-min.js

DataTable的使用

 

1.     定義表頭

var myColumnHeaders [

{key:"name"text:"姓名"},  

{key:"stdno"text:"學號"},  

{key:"age"text:"年齡"type:"number"}  

];

YAHOO.widget.ColumnSet的屬性說明

屬性名稱

含義

key

列的屬性名

text

列的顯示名稱

type

列的類型,包括"string", "number", "date", "currency", "checkbox", "select", "email", "link",缺省爲”string”

resizeable

Boolean值,是否可通過拖動改變列寬度

sortable

Boolean值,是否可排序

abbr

 

children

定義子表頭,類型爲YAHOO.widget.ColumnSet

width

列寬度,單位爲px

className

定義本列單元格的樣式名稱

formatter

定義本列單元格的格式化函數

function(elCell, oRecord, oColumn, oData)

parse

 

editor

定義可編輯的列,可用的值爲”textbox””textarea”

descFunction

遞減排序的函數function(a,b)

ascFunction

遞增排序的函數function(a,b)

 

2.     創建datatable

var myDataTable new YAHOO.widget.DataTable(

"myContainer"      //datatable綁定的頁面element(DIV)

myColumnSet,      //表頭定義, YAHOO.widget.ColumnSet

myDataSource,     //數據源

   {caption:"My Caption",summary:"摘要"  //datatable的配置集

); 

DataTable的配置集

屬性名稱

含義

caption

表格的表頭文字

summary

表格摘要

paginator

Boolean值,是否分頁,缺省爲false

paginatorOptions

{

containers:

rowsPerPage: 每頁顯示的記錄數,

pageLinks: 最多顯示的頁面鏈接數,0爲全部

currentPage:當前頁

dropdownOptions:下拉框選擇項,null表示不使用下拉框

}

initialRequest

XHR方式下,附加的請求參數

fixedWidth

固定表格寬度

scrollable

表格有滾動條,滾動時表格表頭保持不動,Boolean

rowSingleSelect

只允許選擇一行,Boolean

contextMenu

表格的上下文菜單,右鍵彈出,YAHOO.widget.ContextMenu

sortedBy

{colKey:排序的列,

  dir: 排序的方向,"desc""asc" }

pageCurrent

表格的當前頁

 

3.     DataTable的數據源

DS_JSArray

以對象數組的方式使用,可以是在客戶端定義對象數組,也可以通過DWR的方式調用JAVA的方法獲取一個JAVA類的List列表,在回調函數中以數組方式使用。

var commonDataSource = new YAHOO.util.DataSource(data);

//data可以爲用javascript定義的對象數組,也可以是DWR方式下回調函數的參數

commonDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;

JSON

使用JSON對象時

var myDataSource = new YAHOO.util.DataSource("query.action");

myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;

myDataSource.responseSchema = {

resultsList: "result.data",// 結果集所在的JSON結構中的對象

    fields: ["id","username","email","monicker","edit","del"]

};

XML

var myDataSource = new YAHOO.util.DataSource("query.action");

myDataSource.responseType = YAHOO.util.DataSource.TYPE_XML;

myDataSource.responseSchema = {

    resultNode: "Item", // 結果集所在的XML結構中的結點

    fields: ["Company","Title","Name","Phone","Email"] //表格的列

};

Plain Text Data

var myDataSource = new YAHOO.util.DataSource("query.action");

myDataSource.responseType = YAHOO.util.DataSource.TYPE_TEXT;

myDataSource.responseSchema = {

    recordDelim: ""n", // 記錄的分割符

    fieldDelim: ",", // 字段的分割符

    fields: ["Company","Title","Name","Phone","Email"] //表格的列

};

4.     DataTable數據的訪問

這裏主要指通過javascript訪問DataTable數據時採用的方式。

var rs = YAHOO.Claim.commonDataTable.getRecordSet();

var obj = rs.getRecord(i); //獲取第i行的數據對象

對象obj的屬性就是定義表頭時指定的各列的key值,可以通過obj[key]訪問該行上的各列屬性值。

5.     測試

6.6.     DragDrop

6.7.     TreeView

6.8.     Container

一組模擬windows控件的組件

Container下的控件繼承關係

 

Overlay

Module

ToolTip

Dialog

SimpleDialog

Panel

Container的引入

<!-- Dependencies -->

build/yahoo-dom-event/yahoo-dom-event.js

<!—可選項:如果不使用Dialog/SimpleDialog則不需要 -->

build/connection/connection-min.js

<!—可選項:使用動畫效果時用到 -->

build/animation/animation-min.js

<!-- Source file -->

build/container/container-min.js

6.8.1.        Container下的控件

由於Container下的控件的創建方式和屬性控制方式基本相同,可以在創建組件時通過config對象指定控件的各項屬性,也可以在創建後通過myContainer.cfg.setAttribute來設置控件屬性,通過對這些屬性的控制來實現控件的不同動作表現。因此對於各個子控件的屬性在下面採用配置集的方式用一個表格來說明。

Module

一種最基礎的控件模塊,通過Module可以創建一個從HTML中繼承下來的javascript對象,你可以操作頁面中的module,也可以動態創建新的modulemodule是沒有預定義樣式的,必須手動定義。

使用Module必需的引入

build/yahoo-demo/yahoo-dom-event.js

build/container/container_core-min.js

 

初始化的方式:

constructorYAHOO.widget.Module(ModuleId,{配置集});

moduleId如果頁面中已經定義了moduleId,則可以直接調用render函數將設置的各種屬性直接應用到module上,如果頁面中沒有定義這個id,則必須調用render(DOM中已經存在的element)module插入到DOM中。

顯示/隱藏Module

方式一:

myModule.show();

myModule.hide();

方式二:

myModule.cfg.setProperty("visible", true);

myModule.cfg.setProperty("visible", false);

配置集的說明

屬性名稱

含義

備註

visible

Module是否可見,Boolean

 

monitorresize

設置是否創建一個不可見的屏幕元素用來監聽DOM中文字大小的改變,Boolean

 

 

6.8.2.        Overlay

Module的一種擴展,但和Module不同的是Overlay可以通過絕對方式定位,並且是浮動窗口,不會影響頁面中原有的內嵌標籤的佈局。與Module相同的是:也沒有預先定義樣式,必須手動設置。

初始化的方式

Module相同

位置設定

1.絕對定位:

myOverlay.cfg.setProperty("x", 100);

myOverlay.cfg.setProperty("y", 200);

myOverlay.cfg.setProperty("xy", [100,200]);

2.居中

窗口中居中:myOverlay.center();

屏幕居中:myOverlay.cfg.setProperty("fixedcenter", true);

3.對齊

// myOverlay's右上角對齊myContextEl的左上角

myOverlay.cfg.setProperty("context", ["myContextEl", "tr", "tl"]);

設置過對齊方式後可以直接使用align來改變對齊方式

// myOverlay's 右上角對齊 "myContextEl"'s 左下角.

myOverlay.align("tr", "bl");

注:對齊方式的寫法: top->t ,left ->l, ,bottom->,right->r

top-left 就表示爲tl

 

配置集

屬性名稱

含義

x

設置元素的left屬性

y

設置元素的top屬性

xy

設置元素的top,left屬性

context

停靠位置,[element, Overlay的頂角, 被停靠的element頂角]

effect

Overlay顯示或隱藏時的特效對象.

fixedcenter

窗口大小改變或滾屏時保持居中

width

設置元素的width

height

設置元素的height

zIndex

設置Overlay的遮蓋順序

constraintoviewport

設置爲true時保持在視窗邊界以內

iframe

設置爲true時在Overlay後將存在一個ifram,防止被Z序高的element覆蓋

 

已知的特效:

YAHOO.widget.ContainerEffect.SLIDE

YAHOO.widget.ContainerEffect.FADE          逐步變淡

OverlayManage

用於管理多個Overlay的組件,能夠模擬類似於多窗口管理系統的交互,使得各個Overlay之間的能夠正確的覆蓋、獲得焦點/失去焦點。

使用這一功能需要的代碼很簡單,只需要通過register方法登記所有需要納入窗口管理的Overlay就可以了。

//示例:

YAHOO.namespage(“demo”);

YAHOO.demo.manager = new YAHOO.widget.OverlayManager();

YAHOO.demo.manager.register( [Overlay的數組列表] );

6.8.3.        Tooltip

對象定義:YAHOO.widget.Tooltip

overlay上擴展出來的控件,小的浮動窗口,動態生成,提供了預定義的樣式。

 

Tooltip的引入

<!-- CSS -->

build/container/assets/container.css

<!-- Dependencies -->

build/yahoo-dom-event/yahoo-dom-event.js

<!—如果要改變頁面元素的屬性需要引入-->

build/animation/animation-min.js

<!-- Source file -->

build/container/container-min.js

Tooltip初始化方式

constructorYAHOO.widget.Tooltip(tooltipId , { 配置集 } );

tooltipId可以是頁面中未聲明的控件。

 

Tooltip配置集

屬性名稱

含義

text

提示文字

context

鼠標停靠element ID

container

缺省爲document.body,指明容器元素

preventoverlap

缺省爲true,指明是否使用覆蓋方式

showdelay

顯示tooltip的延遲時間,單位毫秒

hidedelay

隱藏tooltip的延遲時間,單位毫秒

autodismissdelay

The number of milliseconds to wait before automatically dismissing a Tooltip after the mouse has been resting on the context element.

同時還繼承了Module,Overlay的所有屬性

 

6.8.4.        Panel

overlay擴展出來的一個組件,類似於操作系統的窗口。他不同於瀏覽器的彈出窗口,是內嵌在頁面文件中的一種動態Htmlelement。他在overlay的基礎上擴展了一些窗口的功能,如關閉、拖放等。Panel使用了預定義的樣式表

Panel的引入

<!-- CSS -->

build/container/assets/container.css

<!-- Dependencies -->

build/yahoo-dom-event/yahoo-dom-event.js

<!—可選項:如果用到動畫時需要引入 -->

build/animation/animation-min.js

<!—可選項:如果用到拖放時需要引入-->

build/dragdrop/dragdrop-min.js

<!-- Source file -->

build/container/container-min.js

Panel的初始化

constructor

YAHOO.widget.Panel(panelId); //使用缺省配置選項

YAHOO.widget.Panel(panelId,{自定義的配置項}); //使用自定義的配置項

Panel的配置集

屬性名稱

含義

close

是否顯示關閉按鈕,true/false

draggable

是否可以拖動

underlay

陰影顯示方式 shadow,none,matte,缺省爲shadownone爲無陰影,matte爲白色邊界

modal

Panel獲得焦點時,是否允許使用Panel以外的控件獲得焦點,類似於MFC的模態/無模態對話框

keylisteners

響應按鍵事件的監聽器列表

Panel同時還繼承了Module,Overlay的屬性

6.8.5.        Dialog

Panel上擴展出來的組件,類似於Windows的窗口,在瀏覽器中提供了一種不用頁面跳轉就能使用交互來獲取用戶輸入的交互方式,用戶輸入的數據都是通過一個標準的HTML Form獲取的,並支持多種的獲取輸入數據的方式:普通的Form的提交,XMLHttpRequest,或者完全通過腳本來讀取。

Dialog的引入

<!-- CSS -->

build/container/assets/container.css

<!-- Dependencies -->

build/yahoo-dom-event/yahoo-dom-event.js

<!—可選項: Animation (only required if enabling Animation) -->

build/animation/animation-min.js

<!—可選項: Drag & Drop (only required if enabling Drag & Drop) -->

build/dragdrop/dragdrop-min.js

<!--可選項: Connection (only required if performing asynchronous submission) -->

build/connection/connection-min.js

<!-- Source file -->

build/container/container-min.js

Dialog的初始化

constructorYAHOO.widget.Dialog(dialogId);

dialogId爲頁面中已經申明的element

Dialog的配置集

屬性名稱

含義

postmethod

窗口提交的方式,async:異步,form:標準的submitnone:不提交

buttons

dialog中的button數組列表,

同時繼承了OverlayPanel的屬性

單個按鈕對象的定義方式:

 { text:按鈕上的文本,

handler:按鈕的click事件響應函數

isDefault:是否缺省按鈕},

 

6.8.6.        SimpleDialog

Dialog上擴展出來的一個組件,主要用於處理用戶選擇Yes/NOOK/Cancel的交互

SimpleDialog的引入

<!-- CSS -->

build/container/assets/container.css

<!-- Dependencies -->

build/yahoo-dom-event/yahoo-dom-event.js

<!—可選項:用到動畫效果時使用 -->

build/animation/animation-min.js

<!—可選項:用到拖放功能時使用-->

build/dragdrop/dragdrop-min.js

<!—可選項:用到異步提交方式時使用) -->

build/connection/connection-min.js

<!-- Source file -->

build/container/container-min.js

SimpleDialog的初始化

constructorYAHOO.widget.SimpleDialog(dialogId,{配置集});

dialogId爲頁面中已經申明的element

SimpleDialog的配置集

屬性名稱

含義

text

對話框中顯示的提示信息

icon

按鈕圖標:

ICON_BLOCK,   

ICON_WARN,    

ICON_HELP,     

ICON_INFO,     

ICON_ALARM,   

ICON_TIP.       

 

6.9.     Grids

支持不規定寬度的設計

一組用於定義界面版式的樣式表(CSS文件)

6.10.            TabView

用來創建導航tab欄組件

可以從HTML中的已經存在的標籤來創建,也可以完全通過javascript創建,該組件的最上層元素爲<div>,每一個tab頁面項使用<li>

TableView的引入

<!-- Dependencies -->

<!-- core CSS -->

/build/tabview/assets/tabview.css

<!-- optional skin for border tabs -->

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

<!-- Source file -->

build/tabview/tabview-min.js

TableView的初始化

constructorYAHOO.widget.TabView(tableViewId); 

創建的方式:

1.頁面中存在id

<div id="demo" class="yui-navset">

    <ul class="yui-nav">

        <li class="selected"><a href="#tab1"><em>Tab One Label</em></a></li>

        <li><a href="#tab2"><em>Tab Two Label</em></a></li>

        <li><a href="#tab3"><em>Tab Three Label</em></a></li>

    </ul>           

    <div class="yui-content">

        <div><p>Tab One Content</p></div>

        <div><p>Tab Two Content</p></div>

        <div><p>Tab Three Content</p></div>

    </div>

</div>

 

注:

yui-navsetcss文件中定義的TableView的樣式

yui-navcss文件中定義的Tab頁標籤的樣式   

 

2.完全使用JavaScript創建TabView

<script type="text/javascript">

var myTabs = new YAHOO.widget.TabView("demo");

     

    myTabs.addTab( new YAHOO.widget.Tab({

        label: 'Tab One Label',

        content: '<p>Tab One Content</p>',

        active: true

    }));

   

    myTabs.addTab( new YAHOO.widget.Tab({

        label: 'Tab Two Label',

        content: '<p>Tab Two Content</p>'

    }));

   

    myTabs.appendTo(document.body);

</script>

 

TableView的配置集

屬性名稱

含義

activeIndex

當前激活的Tab頁面編號,第一頁爲0

activeTab

YAHOO.widget.Tab,指向被激活的Tab頁,

element

被綁定的HTML元素

orientation

頁面標籤所在的位置,topbottomleftright 默認爲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<div>

yui-nav

TabView<ul>

yui-content

TabView<div>的下一級<div>

disabled

Tab頁面不可用時的樣式,應用在<ul>

selected

Tab頁面激活時的樣式,應用在<ul>

loading

Tab頁面加載時的樣式,TabView<div>的下一級<div>的樣式

 

7.            常見問題

7.1.     YUI提供的javascript的文件引入

關於引入的版本:

YUI對於需要引入的js文件都提供了多個版本:

1          min是去掉空格後的版本,在正式項目中建議使用min版。

2          debug是調試的版本,主要結合YUIlog組件使用。

3          beta

4          不帶後綴的爲便於閱讀的版本

 

yahoo-dom-event.js是包含了yahoo.jsdom.jsevent.js的內容,使用了前者後就無需再引入後面三個文件。

關於引入的順序:

1.大部分組件都是依賴於事件驅動,並通過YUI提供的工具集進行DOM操作的,因此yahoo.jsdom.jsevent.js或者這三個文件的合成文件yahoo-dom-event.js必須早於其他YUIjs文件引入

2.Autocomplete如果需要從服務器取數據時,要用到YUI提供的datasource.js,因此datasource.js必須在autocomplete.js之前引入;如果是以XHRJSONXML等)的方式取數,還要用到YUI提供的connection,因此connection.js也必須在autocomplete.js之前引入;如果用到了動畫方式展開下拉框,則需要保證animation.jsautocomplete.js之前引入。

3.Datatable中列寬度的調整,Container組件中的Overlay以及從Overlay繼承下來的DialogSimpleDialog的窗口拖動,需要用到dragdrop.js,因此dragdrop.js必須在datatable.jscontainer.js之前引入;如果要用到Dialog的動畫顯示效果,則需要先引入animation.js

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章