JQuery EasyUI 對(duì)話框的使用方法
更新時(shí)間：2010年10月24日 16:19:34 作者：
jQuery EasyUI 對(duì)話框(Dialog)用法與EasyUI的窗口用法極為相似，最終的效果圖也只與窗口的效果圖差幾個(gè)按鈕
下面看一下EasyUI的對(duì)話框效果圖
js代碼：
<script language="javascript" type="text/javascript">
function Open_Dialog() {
$('#mydialog').show();
$('#mydialog').dialog({
collapsible: true,
minimizable: true,
maximizable: true,
toolbar: [{
text: '添加',
iconCls: 'icon-add',
handler: function() {
alert('添加數(shù)據(jù)')
}
},{
text: '保存',
iconCls: 'icon-save',
handler: function() {
alert('保存數(shù)據(jù)')
}
}],
buttons: [{
text: '提交',
iconCls: 'icon-ok',
handler: function() {
alert('提交數(shù)據(jù)');
}
}, {
text: '取消',
handler: function() {
$('#mydialog').dialog('取消');
}
}]
});
}
</script>
HTML代碼
<span onclick="Open_Dialog()">彈框</span>
<div id="mydialog" style="display:none;padding:5px;width:400px;height:200px;" title="彈框練習(xí)">
<input id="txRoleID" type="hidden" runat="server" value="0" />
<label class="lbInfo">角色名稱(chēng)：</label>
<input id="txRolename" type="text" class="easyui-validatebox" required="true" runat="server" /><br />
<label class="lbInfo"> </label><input type="submit" onserverclick="saveRole" value="保存" runat="server" />
<label id="lbmsg" runat="server"></label>
</div>
下面來(lái)介紹Window的具體用法，首先來(lái)看屬性大多數(shù)的屬性和窗口(Window)的屬性是相同的，下面列出一些 Dialog私有的屬性：
事件
Dialog的事件和窗口(Window)的事件相同。
方法
除了”header”和”body”以外，Dialog的函數(shù)方法和窗口(Window)的相同
js代碼：
復(fù)制代碼 代碼如下:
<script language="javascript" type="text/javascript">
function Open_Dialog() {
$('#mydialog').show();
$('#mydialog').dialog({
collapsible: true,
minimizable: true,
maximizable: true,
toolbar: [{
text: '添加',
iconCls: 'icon-add',
handler: function() {
alert('添加數(shù)據(jù)')
}
},{
text: '保存',
iconCls: 'icon-save',
handler: function() {
alert('保存數(shù)據(jù)')
}
}],
buttons: [{
text: '提交',
iconCls: 'icon-ok',
handler: function() {
alert('提交數(shù)據(jù)');
}
}, {
text: '取消',
handler: function() {
$('#mydialog').dialog('取消');
}
}]
});
}
</script>
HTML代碼
復(fù)制代碼 代碼如下:
<span onclick="Open_Dialog()">彈框</span>
<div id="mydialog" style="display:none;padding:5px;width:400px;height:200px;" title="彈框練習(xí)">
<input id="txRoleID" type="hidden" runat="server" value="0" />
<label class="lbInfo">角色名稱(chēng)：</label>
<input id="txRolename" type="text" class="easyui-validatebox" required="true" runat="server" /><br />
<label class="lbInfo"> </label><input type="submit" onserverclick="saveRole" value="保存" runat="server" />
<label id="lbmsg" runat="server"></label>
</div>
下面來(lái)介紹Window的具體用法，首先來(lái)看屬性大多數(shù)的屬性和窗口(Window)的屬性是相同的，下面列出一些 Dialog私有的屬性：
| 屬性名 | 類(lèi)型 | 描述 | 默認(rèn)值 |
|---|---|---|---|
| title | 字符串 | 對(duì)話框的標(biāo)題文本 | New Dialog |
| collapsible | 布爾 | 定義是否顯示可折疊按鈕 | false |
| minimizable | 布爾 | 定義是否顯示最小化按鈕 | false |
| maximizable | 布爾 | 定義是否顯示最大化按鈕 | false |
| resizable | 布爾 | 定義對(duì)話框是否可編輯大小 | false |
| toolbar | 數(shù)組 | 對(duì)話框上的工具條，每個(gè)工具條包括: text, iconCls, disabled, handler etc. | null |
| buttons | 數(shù)組 | 對(duì)話框底部的按鈕，每個(gè)按鈕包括: text, iconCls, handler etc. | null |
Dialog的事件和窗口(Window)的事件相同。
方法
除了”header”和”body”以外，Dialog的函數(shù)方法和窗口(Window)的相同
您可能感興趣的文章:
- jQuery Dialog 彈出層對(duì)話框插件
- 基于jQuery的彈出警告對(duì)話框美化插件(警告，確認(rèn)和提示)
- jQuery UI Dialog 創(chuàng)建友好的彈出對(duì)話框?qū)崿F(xiàn)代碼
- jquery刪除提示框彈出是否刪除對(duì)話框
- 修改jquery里的dialog對(duì)話框插件為框架頁(yè)(iframe) 的方法
- Confirmer JQuery確認(rèn)對(duì)話框組件
- jQuery EasyUI API 中文文檔 - Dialog對(duì)話框
- jQuery UI庫(kù)中dialog對(duì)話框功能使用全解析
- jBox 2.3基于jquery的最新多功能對(duì)話框插件 常見(jiàn)使用問(wèn)題解答
- jquery實(shí)現(xiàn)點(diǎn)擊彈出對(duì)話框
相關(guān)文章
jQuery實(shí)現(xiàn)橫向帶緩沖的水平運(yùn)動(dòng)效果(附demo源碼下載)
這篇文章主要介紹了jQuery實(shí)現(xiàn)橫向帶緩沖的水平運(yùn)動(dòng)效果,涉及jQuery中鼠標(biāo)事件及animate方法使用技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2016-01-01
jQuery實(shí)現(xiàn)輸入框下拉列表樹(shù)插件特效代碼分享
這篇文章主要介紹了jQuery實(shí)現(xiàn)輸入框下拉列表樹(shù)特效，推薦給大家，有需要的小伙伴可以參考下。2015-08-08
下面小編就為大家?guī)?lái)一篇jQuery使用經(jīng)驗(yàn)小技巧(推薦)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05
這篇文章主要介紹了jquery清空表單數(shù)據(jù)的示例,需要的朋友可以參考下2014-02-02
尋尋覓覓，覓覓尋尋終于找到了一些關(guān)于jquery性能優(yōu)化的文章，果斷收藏當(dāng)然不能忘了加上自己的一些總結(jié)及理解。2014-05-05
這篇文章主要介紹了JQuery中使用on方法綁定hover事件實(shí)例,本文用于一些特殊環(huán)境下,需要的朋友可以參考下2014-12-12
自己以前做的列表雙向選擇器，感覺(jué)有點(diǎn)挫，昨天閑著沒(méi)事改進(jìn)了一下，把元素改成了select option這樣就支持shift多選，感覺(jué)好多了2013-08-08
這篇文章主要介紹了JQuery獲得內(nèi)容和屬性方法解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-05-05
jQuery leonaScroll 1.1 自定義滾動(dòng)條插件(推薦)
這篇文章主要介紹了jQuery leonaScroll 1.1 自定義滾動(dòng)條插件(推薦)的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-09-09
jQuery幫助之CSS尺寸(五)outerHeight、outerWidth
在前面我們分別通過(guò)innerHeight()和innerWidth()來(lái)獲得第一個(gè)匹配元素內(nèi)部區(qū)域的高度和寬度，我們?cè)趹?yīng)用中往往除了需要內(nèi)部的尺寸，同樣還需要知道外部的高度和寬度.2009-11-11