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
{key:"name",
{key:"stdno",
{key:"age",
];
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, |
parse |
|
editor |
定義可編輯的列,可用的值爲”textbox”,”textarea” |
descFunction |
遞減排序的函數function(a,b) |
ascFunction |
遞增排序的函數function(a,b) |
2.
var
"myContainer",
myColumnSet,
myDataSource,
);
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:排序的列, |
pageCurrent |
表格的當前頁 |
3.
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結構中的對象
};
XML
var myDataSource = new YAHOO.util.DataSource("query.action");
myDataSource.responseType = YAHOO.util.DataSource.TYPE_XML;
myDataSource.responseSchema = {
};
Plain Text Data
var myDataSource = new YAHOO.util.DataSource("query.action");
myDataSource.responseType = YAHOO.util.DataSource.TYPE_TEXT;
myDataSource.responseSchema = {
};
4.
這裏主要指通過javascript訪問DataTable數據時採用的方式。
var rs = YAHOO.Claim.commonDataTable.getRecordSet();
var
obj =
rs.getRecord(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,也可以動態創建新的module。module是沒有預定義樣式的,必須手動定義。
使用Module必需的引入
build/yahoo-demo/yahoo-dom-event.js
build/container/container_core-min.js
初始化的方式:
constructor:YAHOO.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初始化方式
constructor:YAHOO.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擴展出來的一個組件,類似於操作系統的窗口。他不同於瀏覽器的彈出窗口,是內嵌在頁面文件中的一種動態Html的element。他在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,缺省爲shadow,none爲無陰影,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的初始化
constructor:YAHOO.widget.Dialog(dialogId);
dialogId爲頁面中已經申明的element
Dialog的配置集
屬性名稱 |
含義 |
postmethod |
窗口提交的方式,async:異步,form:標準的submit,none:不提交 |
buttons |
dialog中的button數組列表, |
同時繼承了Overlay,Panel的屬性
單個按鈕對象的定義方式:
handler:按鈕的click事件響應函數
isDefault:是否缺省按鈕},
6.8.6.
SimpleDialog
從Dialog上擴展出來的一個組件,主要用於處理用戶選擇Yes/NO,OK/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的初始化
constructor:YAHOO.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的初始化
constructor:YAHOO.widget.TabView(tableViewId);
創建的方式:
1.頁面中存在id
<div id="demo" class="yui-navset">
</div>
注:
yui-navset爲css文件中定義的TableView的樣式
yui-nav爲css文件中定義的Tab頁標籤的樣式
2.完全使用JavaScript創建TabView
<script type="text/javascript">
var myTabs = new YAHOO.widget.TabView("demo");
</script>
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的<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
2
3
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。