EasyUI創(chuàng)建對(duì)話框的兩種方式
對(duì)話框(Dialog)是一個(gè)特殊的窗口(window),可以包含在頂部的工具欄和在底部的按鈕。默認(rèn)情況下,對(duì)話框(Dialog)不能改變大小,但是用戶可以設(shè)置 resizable 屬性為 true,使其可以改變大小。
這種就是對(duì)話框了。
EasyUI有兩種創(chuàng)建方式:
第一種:通過已存在的DOM節(jié)點(diǎn)元素標(biāo)簽創(chuàng)建
<!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>無標(biāo)題文檔</title> <!-- 導(dǎo)入js文件 --> <!-- 導(dǎo)入jquery核心js文件 --> <script type="text/javascript" src="jquery.min.js"></script> <!-- 導(dǎo)入easyui核心js文件 --> <script type="text/javascript" src="jquery.easyui.min.js"></script> <!-- 導(dǎo)入本地語言的js文件--> <script type="text/javascript" src="locale/easyui-lang-zh_CN.js"></script> <!-- 導(dǎo)入css --> <!-- 導(dǎo)入easyui的默認(rèn)css文件--> <link type="text/css" rel="stylesheet" href="themes/default/easyui.css"/> <!-- 導(dǎo)入圖標(biāo)的css文件 --> <link type="text/css" rel="stylesheet" href="themes/icon.css"/> </head> <body> <div id="dd" class="easyui-dialog" title="我的對(duì)話框" style="width:400px;height:200px;" data-options="iconCls:'icon-save',resizable:true,modal:true"> 提示內(nèi)容 </div> </body> </html>
第二種:通過js動(dòng)態(tài)創(chuàng)建對(duì)話框
<!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>無標(biāo)題文檔</title> <!-- 導(dǎo)入js文件 --> <!-- 導(dǎo)入jquery核心js文件 --> <script type="text/javascript" src="jquery.min.js"></script> <!-- 導(dǎo)入easyui核心js文件 --> <script type="text/javascript" src="jquery.easyui.min.js"></script> <!-- 導(dǎo)入本地語言的js文件--> <script type="text/javascript" src="locale/easyui-lang-zh_CN.js"></script> <!-- 導(dǎo)入css --> <!-- 導(dǎo)入easyui的默認(rèn)css文件--> <link type="text/css" rel="stylesheet" href="themes/default/easyui.css"/> <!-- 導(dǎo)入圖標(biāo)的css文件 --> <link type="text/css" rel="stylesheet" href="themes/icon.css"/> </head> <body> <!--<div id="dd" class="easyui-dialog" title="我的對(duì)話框" style="width:400px;height:200px;" data-options="iconCls:'icon-save',resizable:true,modal:true"> 提示內(nèi)容 </div> --> <div id="dd">對(duì)話框內(nèi)容</div> <script type="text/javascript"> $("#dd").dialog({ title: '我的對(duì)話框', //標(biāo)題 collapsible:true, //是否可折疊 minimizable:true, //最小化按鈕 maximizable:true,//最大化按鈕 resizable:true,//是否改變窗口大小 width: 400, height: 200, closed: false, cache: false, href: 'beautiful.html', }); </script> </body> </html>
以上所述是小編給大家介紹的EasyUI創(chuàng)建對(duì)話框的兩種方式,希望對(duì)大家有所幫助,如果大家有任何疑問請給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
jQuery Json數(shù)據(jù)格式排版高亮插件json-viewer.js使用方法詳解
這篇文章主要為大家詳細(xì)介紹了jQuery Json數(shù)據(jù)格式排版高亮插件json-viewer.js的使用方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-06-06在easyUI開發(fā)中,出現(xiàn)jquery.easyui.min.js函數(shù)庫問題的解決辦法
easyUI是jquery的一個(gè)插件,是民間的插件,easyUI使用起來很方便,里面有網(wǎng)頁制作的最重要的三大方塊:javascript代碼、html代碼和Css樣式,但是很容易出現(xiàn)jquery.easyui.min.js函數(shù)庫問題,小編教大家如何解決問題,需要的朋友可以參考下2015-09-09jQuery插件EasyUI設(shè)置datagrid的checkbox為禁用狀態(tài)的方法
這篇文章主要介紹了jQuery插件EasyUI設(shè)置datagrid的checkbox為禁用狀態(tài)的方法,涉及jQuery插件EasyUI相關(guān)屬性設(shè)置技巧,需要的朋友可以參考下2016-08-08jQuery中DOM樹操作之使用反向插入方法實(shí)例分析
這篇文章主要介紹了jQuery中DOM樹操作之使用反向插入方法,實(shí)例分析了反向插入方法與插入方法回調(diào)的使用技巧,需要的朋友可以參考下2015-01-01jQuery中closest()函數(shù)用法實(shí)例
這篇文章主要介紹了jQuery中closest()函數(shù)用法,實(shí)例分析了closest()函數(shù)的功能、定義及匹配元素的各種技巧,需要的朋友可以參考下2015-01-01