EasyUI創(chuàng)建對話框的兩種方式

更新時(shí)間：2016年08月23日 10:33:36 作者：Java大S

對話框（Dialog）是一個特殊的窗口（window），可以包含在頂部的工具欄和在底部的按鈕。接下來通過本文給大家介紹easyui創(chuàng)建對話框的兩種方式，非常不錯，感興趣的朋友一起看下吧

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

這種就是對話框了。

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="我的對話框" style="width:400px;height:200px;" data-options="iconCls:'icon-save',resizable:true,modal:true"> 
提示內(nèi)容
</div> 
</body>
</html>

第二種：通過js動態(tài)創(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="我的對話框" style="width:400px;height:200px;" data-options="iconCls:'icon-save',resizable:true,modal:true"> 
提示內(nèi)容
</div> --> 
<div id="dd">對話框內(nèi)容</div>
<script type="text/javascript">
$("#dd").dialog({
title: '我的對話框', //標(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)建對話框的兩種方式，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: