Jquery Easyui對話框組件Dialog使用詳解(14)
更新時間:2016年12月19日 16:51:26 作者:Jsakura
這篇文章主要為大家詳細介紹了Jquery Easyui對話框組件Dialog的使用方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下
Dialog對話框組件依賴于Window(窗口)組件、linkbutton 組件
加載方式
Class加載
<div class="easyui-dialog"
title="彈出框"
data-options="iconCls:'icon-add',resizable:true,modal:true"
style="width: 400px;height: 200px;">
彈出框內容
</div>
JS調用加載
<div id="box">
彈出框內容
</div>
<div id="tt">
<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>
<script>
$(function () {
$('#box').dialog({
width : 400,
height : 200,
title : '彈出框標題',
modal : true,
// 是否顯示可折疊按鈕
collapsible : false,
// 是否顯示最小化按鈕
minimizable : false,
// 是否顯示最大化按鈕
maximizable : false,
// 是否可以改變對話框窗口大小
resizable : false,
// 設置對話框窗口頂部工具欄
//buttons : '#tt',
toolbar : [{
text : '編輯',
iconCls : 'icon-edit',
handler : function () {
alert('edit');
},
}, {}],
// 對話框窗口底部按鈕
buttons : [{
text : '保存',
iconCls : 'icon-ok',
handler : function () {
alert('save');
}
},{}]
})
});
</script>
屬性列表
窗口屬性擴展自 Window(面板),窗口新增或重新定義的屬性如下

Dialog 是繼承自 Window 組件的,所以 Window 組件和 Panel 組件均可用
事件列表
窗口的事件完整繼承自 Window(面板)。所以,直接參考 Window 面板的事件即可。
//Dialog 事件
$('#box').dialog({
width : 600,
height : 400,
modal : true,
onClose : function () {
alert('關閉后觸發(fā)!');
},
});
方法列表
對話框的方法擴展自 Window(窗口),對話框新增方法如下

//返回外部窗口對象
//console.log($('#box').window('dialog'));
//使用$.fn.window.defaults 重寫默認值對象。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
您可能感興趣的文章:
- jQuery組件easyui對話框實現(xiàn)代碼
- Jquery EasyUI中彈出確認對話框以及加載效果示例代碼
- jQuery EasyUI API 中文文檔 - Dialog對話框
- JQuery EasyUI 對話框的使用方法
- jQuery插件easyUI實現(xiàn)通過JS顯示Dialog的方法
- jQuery EasyUI Dialog拖不下來如何解決
- jQuery前端框架easyui使用Dialog時bug處理
- Jquery Easyui表單組件Form使用詳解(30)
- Jquery Easyui選項卡組件Tab使用詳解(10)
- Jquery Easyui分割按鈕組件SplitButton使用詳解(17)
相關文章
ASP.NET jQuery 實例2 (表單中使用回車在TextBox之間向下移動)
每次當用戶在一個文本框輸入完數(shù)據(jù)后,更希望在敲入回車鍵后,焦點會自動移動到下一個文本框2012-01-01
jquery 顯示*天*時*分*秒實現(xiàn)時間計時器
用jquery實現(xiàn)時間計時器,從之前的某個時間段到現(xiàn)在距離多少天多少時多少分多少秒,示例代碼如下,大家拷貝即可使用2014-05-05
jquery自定義類似$.ajax()的方法實現(xiàn)代碼
$.ajax()的方法想必大家都不會陌生,下面為大家介紹下使用jquery自定義類實現(xiàn)類似$.ajax()的方法,感興趣的朋友可以參考下2013-08-08

