jQuery EasyUI 窗口插件 – Dialog 對(duì)話框

2018-09-06 22:32 更新

jQuery EasyUI 窗口插件 - Dialog 對(duì)話框

jQuery EasyUI 插件 jQuery EasyUI 插件

擴(kuò)展自 $.fn.window.defaults。通過 $.fn.dialog.defaults 重寫默認(rèn)的 defaults。

對(duì)話框（dialog）是一個(gè)特殊類型的窗口，它在頂部有一個(gè)工具欄，在底部有一個(gè)按鈕欄。默認(rèn)情況下，對(duì)話框（dialog）只有一個(gè)顯示在頭部右側(cè)的關(guān)閉工具。用戶可以配置對(duì)話框行為來顯示其他工具（比如：可折疊 collapsible、可最小化 minimizable、可最大化 maximizable，等等）。

依賴

  • window
  • linkbutton

用法

通過標(biāo)記從已有的 DOM 節(jié)點(diǎn)創(chuàng)建對(duì)話框（dialog）。下面的實(shí)例演示了一個(gè)帶有可調(diào)整尺寸特性的模態(tài)對(duì)話框。

<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 創(chuàng)建對(duì)話框（dialog）?，F(xiàn)在讓我們創(chuàng)建一個(gè)模態(tài)對(duì)話框，然后調(diào)用 'refresh' 方法來通過 ajax 加載它的內(nèi)容。

<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');

屬性

該屬性擴(kuò)展自窗口（window）下面是為對(duì)話框（dialog）重寫的屬性。

名稱 類型 描述 默認(rèn)值
title string 對(duì)話框的標(biāo)題文本。 New Dialog
collapsible boolean 定義是否顯示折疊按鈕。 false
minimizable boolean 定義是否顯示最小化按鈕。 false
maximizable boolean 定義是否顯示最大化按鈕。 false
resizable boolean 定義對(duì)話框是否可調(diào)整尺寸。 false
toolbar array,selector 對(duì)話框的頂部工具欄，可能的值：
1、數(shù)組，每個(gè)工具的選項(xiàng)都與鏈接按鈕（linkbutton）一樣。
2、選擇器，指示工具欄。

對(duì)話框工具欄可以在 <div>標(biāo)簽中聲明： 
<div class="easyui-dialog" style="width:600px;height:300px" 		data-options="title:'My Dialog',toolbar:'#tb',modal:true">
	Dialog Content.
</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>
對(duì)話框工具欄也可以通過數(shù)組定義： 
<div class="easyui-dialog" style="width:600px;height:300px" 		data-options="title:'My Dialog',modal:true, 			toolbar:[{ 				text:'Edit', 				iconCls:'icon-edit', 				handler:function(){alert('edit')} 			},{ 				text:'Help', 				iconCls:'icon-help', 				handler:function(){alert('help')} 			}]">
	Dialog Content.
</div>
null
buttons array,selector 對(duì)話框的底部按鈕，可能的值：
1、數(shù)組，每個(gè)按鈕的選項(xiàng)都與鏈接按鈕（linkbutton）一樣。
2、選擇器，指示按鈕欄。

按鈕可以在 <div>標(biāo)簽中聲明： 
<div class="easyui-dialog" style="width:600px;height:300px" 		data-options="title:'My Dialog',buttons:'#bb',modal:true">
	Dialog Content.
</div>
<div id="bb">
	<a href="#" class="easyui-linkbutton">Save</a>
	<a href="#" class="easyui-linkbutton">Close</a>
</div>
按鈕也可以通過數(shù)組定義： 
<div class="easyui-dialog" style="width:600px;height:300px" 		data-options="title:'My Dialog',modal:true, 			buttons:[{ 				text:'Save', 				handler:function(){...} 			},{ 				text:'Close', 				handler:function(){...} 			}]">
	Dialog Content.
</div>
null

事件

該事件擴(kuò)展自面板（panel）。

方法

該方法擴(kuò)展自窗口（window），下面是為對(duì)話框（dialog）添加的方法。

名稱 參數(shù) 描述
dialog none 返回外部對(duì)話框（dialog）對(duì)象。
jQuery EasyUI 插件 jQuery EasyUI 插件
以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)