對話框(Dialog)是一個特殊的窗口(window),可以包含在頂部的工具欄和在底部的按鈕。默認情況下,對話框(Dialog)不能改變大小,但是用戶可以設置 resizable 屬性為 true,使其可以改變大小。

這種就是對話框了。
EasyUI有兩種創建方式:
第一種:通過已存在的DOM節點元素標簽創建
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>無標題文檔</title><!-- 導入js文件 --><!-- 導入jquery核心js文件 --><script type="text/javascript" src="jquery.min.js"></script><!-- 導入easyui核心js文件 --><script type="text/javascript" src="jquery.easyui.min.js"></script><!-- 導入本地語言的js文件--><script type="text/javascript" src="locale/easyui-lang-zh_CN.js"></script><!-- 導入css --><!-- 導入easyui的默認css文件--><link type="text/css" rel="stylesheet" href="themes/default/easyui.css"/><!-- 導入圖標的css文件 --><link type="text/css" rel="stylesheet" href="themes/icon.css"/></head><body><div id="dd" class="easyui-dialog" title="我的對話框" style="width:400px;height:200px;" data-options="iconCls:'icon-save',resizable:true,modal:true"> 提示內容</div> </body></html>
第二種:通過js動態創建對話框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>無標題文檔</title><!-- 導入js文件 --><!-- 導入jquery核心js文件 --><script type="text/javascript" src="jquery.min.js"></script><!-- 導入easyui核心js文件 --><script type="text/javascript" src="jquery.easyui.min.js"></script><!-- 導入本地語言的js文件--><script type="text/javascript" src="locale/easyui-lang-zh_CN.js"></script><!-- 導入css --><!-- 導入easyui的默認css文件--><link type="text/css" rel="stylesheet" href="themes/default/easyui.css"/><!-- 導入圖標的css文件 --><link type="text/css" rel="stylesheet" href="themes/icon.css"/></head><body><!--<div id="dd" class="easyui-dialog" title="我的對話框" style="width:400px;height:200px;" data-options="iconCls:'icon-save',resizable:true,modal:true"> 提示內容</div> --> <div id="dd">對話框內容</div><script type="text/javascript">$("#dd").dialog({title: '我的對話框', //標題collapsible:true, //是否可折疊minimizable:true, //最小化按鈕maximizable:true,//最大化按鈕resizable:true,//是否改變窗口大小width: 400, height: 200, closed: false, cache: false, href: 'beautiful.html', });</script></body></html>以上所述是小編給大家介紹的EasyUI創建對話框的兩種方式,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持!
新聞熱點
疑難解答