EasyUI筆記（三）Window視窗

標籤：top   class   tool   互動   tty   option   lan   節點   container   

Window（視窗）

視窗控制項是一個浮動和可拖拽的面板可以用作應用程式視窗。預設情況下,視窗可以移動,調整大小和關閉。它的內容也可以被定義為靜態html或要麼通過ajax動態載入。

1. 通過標籤視窗視窗。

 

  
<div id="win" class="easyui-window" title="My Window" style="width:600px;height:400px" 
  
 data-options="iconCls:‘icon-save‘,modal:true"> 
  
 Window Content 
  
</div> 
 

2. 通過Javascript建立視窗。

 

  
<div id="win"></div> 
 

 

  
$(‘#win‘).window({ 
  
 width:600, 
  
 height:400, 
  
 modal:true 
  
}); 
 

3. 建立複合布局視窗。

像往常一樣定義視窗布局。下面的例子顯示了如何將表單分為兩部分：北部和中間。

 

  
<div id="win" class="easyui-window" title="My Window" style="width:600px;height:400px" 
  
 data-options="iconCls:‘icon-save‘,modal:true"> 
  
 <div class="easyui-layout" data-options="fit:true"> 
  
 <div data-options="region:‘north‘,split:true" style="height:100px"></div> 
  
 <div data-options="region:‘center‘"> 
  
 The Content. 
  
 </div> 
  
 </div> 
  
</div> 
 

屬性

視窗的屬性擴充自panel(面板)，視窗新增或重新定義的屬性如下：

屬性名稱	屬性值類型	描述	預設值
title	string	視窗的標題文本。	New Window
collapsible	boolean	定義是否顯示可摺疊按鈕。	true
minimizable	boolean	定義是否顯示最小化按鈕。	true
maximizable	boolean	定義是否顯示最大化按鈕。	true
closable	boolean	定義是否顯示關閉按鈕。	true
closed	boolean	定義是否可以關閉視窗。	false
zIndex	number	視窗Z軸座標。	9000
draggable	boolean	定義是否能夠拖拽視窗。	true
resizable	boolean	定義是否能夠改變視窗大小。	true
shadow	boolean	如果設定為true，在表單顯示的時候顯示陰影。	true
inline	boolean	定義如何布局視窗，如果設定為true，視窗將顯示在它的父容器中，否則將顯示在所有元素的上面。	false
modal	boolean	定義是否將表單顯示為模式化視窗。	true

Dialog（對話方塊視窗）該對話方塊是一種特殊類型的視窗，它在頂部有一個工具列，在底部有一個按鈕欄。對話方塊視窗右上方只有一個關閉按鈕使用者可以配置對話方塊的行為顯示其他工具,如collapsible,minimizable,maximizable工具等。
 
通過已存在的DOM節點元素標籤建立。下面的例子顯示了一個可變大小的強制回應視窗。

 

  
<div id="dd" class="easyui-dialog" title="My Dialog" style="width:400px;height:200px;" 
  
 data-options="iconCls:‘icon-save‘,resizable:true,modal:true"> 
  
 Dialog Content. 
  
</div> 
 

使用Javascript建立對話方塊視窗也是允許的。現在讓我們建立一個強制回應視窗並調用‘refresh‘方法通過ajax讀取內容。

 

  
<div id="dd">Dialog Content.</div> 
 

 

  
$(‘#dd‘).dialog({ 
  
 title: ‘My Dialog‘, 
  
 width: 400, 
  
 height: 200, 
  
 closed: false, 
  
 cache: false, 
  
 href: ‘get_content.php‘, 
  
 modal: true 
  
}); 
  
$(‘#dd‘).dialog(‘refresh‘, ‘new_content.php‘); 
 

屬性

對話方塊視窗的屬性擴充自window(視窗)，對話方塊視窗重新定義的屬性如下：

屬性名稱	屬性值類型	描述	預設值
title	string	對話方塊視窗標題文本。	New Dialog
collapsible	boolean	定義是否顯示可摺疊按鈕。	false
minimizable	boolean	定義是否顯示最小化按鈕。	false
maximizable	boolean	定義是否顯示最大化按鈕。	false
resizable	boolean	定義是否可以改變對話方塊視窗大小。	false
toolbar	array,selector	設定對話方塊視窗頂部工具列，可用值有： 1) 一個數組，每一個工具列中的工具屬性都和linkbutton相同。 2) 一個選取器指定工具列。 對話方塊視窗工具列可以聲明在<div>標籤裡面： <div class="easyui-dialog" style="width:600px;height:300px" data-options="title:‘我的對話方塊‘,toolbar:‘#tb‘,modal:true"> 對話方塊視窗內容。 </div> <div id="tb"> <a href="#" class="easyui-linkbutton" data-options="iconCls:‘icon-edit‘,plain:true"/a> <a href="#" class="easyui-linkbutton" data-options="iconCls:‘icon-help‘,plain:true"/a> </div> 對話方塊視窗工具列也可以通過數組進行定義： <div class="easyui-dialog" style="width:600px;height:300px"data-options="title:‘My Dialog‘,modal:true,toolbar:[{text:‘編輯‘,iconCls:‘icon-edit‘,handler:function(){alert(‘edit‘)}},{text:‘協助‘,iconCls:‘icon-help‘,handler:function(){alert(‘help‘)}}]">對話方塊視窗內容。 </div>	null
buttons	array,selector	對話方塊視窗底部按鈕，可用值有： 1) 一個數組，每一個按鈕的屬性都和linkbutton相同。 2) 一個選取器指定按鈕欄。 按鈕可以聲明在<div>標籤裡面： <div class="easyui-dialog" style="width:600px;height:300px" data-options="title:‘My Dialog‘,buttons:‘#bb‘,modal:true">  對話方塊視窗內容。 </div> <div id="bb"> <a href="#" class="easyui-linkbutton">儲存</a> <a href="#" class="easyui-linkbutton">關閉</a> </div> 按鈕也可以通過數組定義： <div class="easyui-dialog" style="width:600px;height:300px"data-options="title:‘我的對話方塊‘,modal:true,buttons:[{text:‘儲存‘,handler:function(){...}},{text:‘關閉‘,handler:function(){...}}]">對話方塊視窗內容。</div>	null

Messager（訊息視窗）

訊息視窗提供了不同的訊息框風格，包含alert(警告框), confirm(確認框), prompt(提示框), progress(進度框)等。所有的訊息框都是非同步。使用者可以在互動訊息之後使用回呼函數去處理結果或做一些自己需要處理的事情。

方法

方法名	方法參數	描述
$.messager.show	options	在螢幕右下角顯示一條訊息視窗。該選項參數是一個可配置的對象： showType：定義將如何顯示該訊息。可用值有：null,slide,fade,show。預設：slide。 showSpeed：定義視窗顯示的過度時間。預設：600毫秒。 width：定義訊息視窗的寬度。預設：250px。 height：定義訊息視窗的高度。預設：100px。 title：在頭部面板顯示的標題文本。 msg：顯示的訊息文本。 style：定義訊息表單的自訂樣式。 timeout：如果定義為0，訊息表單將不會自動關閉，除非使用者關閉他。如果定義成非0的樹，訊息表單將在逾時後自動關閉。預設：4秒。 程式碼範例： $.messager.show({title:‘我的訊息‘,msg:‘訊息將在5秒後關閉。‘,timeout:5000,showType:‘slide‘});// 訊息將顯示在頂部中間$.messager.show({title:‘我的訊息‘,msg:‘訊息將在4秒後關閉。‘,showType:‘show‘,style:{right:‘‘,top:document.body.scrollTop+document.documentElement.scrollTop,bottom:‘‘}});
$.messager.alert	title, msg, icon, fn	顯示警告視窗。參數： title：在頭部面板顯示的標題文本。 msg：顯示的訊息文本。 icon：顯示的表徵圖映像。可用值有：error,question,info,warning。 fn: 在視窗關閉的時候觸發該回呼函數。 程式碼範例： $.messager.alert(‘我的訊息‘,‘這是一個提示資訊！‘,‘info‘);
$.messager.confirm	title, msg, fn	顯示一個包含“確定”和“取消”按鈕的確認訊息視窗。參數： title：在頭部面板顯示的標題文本。 msg：顯示的訊息文本。 fn(b): 當使用者點擊“確定”按鈕的時侯將傳遞一個true值給回呼函數，否則傳遞一個false值。 程式碼範例 $.messager.confirm(‘確認對話方塊‘, ‘您想要退出該系統嗎？‘, function(r){if (r){    // 退出操作;}});
$.messager.prompt	title, msg, fn	顯示一個使用者可以輸入文本的並且帶“確定”和“取消”按鈕的訊息表單。參數： title：在頭部面板顯示的標題文本。 msg：顯示的訊息文本。 fn(val): 在使用者輸入一個值參數的時候執行的回呼函數。 程式碼範例： $.messager.prompt(‘提示資訊‘, ‘請輸入你的姓名：‘, function(r){if (r){alert(‘你的姓名是：‘ + r);}});
$.messager.progress	options or method	顯示一個進度訊息表單。 屬性定義為： title：在頭部面板顯示的標題文本。預設：空。 msg：顯示的訊息文本。預設：空。 text：在進度條上顯示的文本。預設：undefined。 interval：每次進度更新的間隔時間。預設：300毫秒。 方法定義為： bar：擷取進度條對象。 close：關閉進度視窗。 程式碼範例： 顯示進度訊息視窗。 $.messager.progress(); 關閉進度訊息視窗。 $.messager.progress(‘close‘);

執行個體代碼下載

EasyUI筆記（三）Window視窗