当前位置: 首页 > 编程笔记 >

EasyUI创建对话框的两种方式

崔高远
2023-03-14
本文向大家介绍EasyUI创建对话框的两种方式,包括了EasyUI创建对话框的两种方式的使用技巧和注意事项,需要的朋友参考一下

对话框(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创建对话框的两种方式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对小牛知识库网站的支持!

 类似资料:
  • pre { white-space: pre-wrap; } 对话框(Dialog)是一个特殊的窗口(window),可以包含在顶部的工具栏和在底部的按钮。默认情况下,对话框(Dialog)不能改变大小,但是用户可以设置 resizable 属性为 true,使其可以改变大小。 创建对话框(Dialog) 对话框(Dialog)非常简单,可以从 DIV 标记创建,如下所示:     <div i

  • 问题内容: 创建对话框的最简单方法是: 在一个窗口中,我提供用于信封寻址的数据,还从尺寸列表中设置字体类型 当单击“确定”时,在同一窗口或下一个窗口中,我将预览到给定名称和使用所选字体大小后的信封外观 它的外观应类似于: 替代文字http://img15.imageshack.us/img15/7355/lab10aa.gif 我应该使用Jdialog吗?还是JOptionPane就足够了?下一步

  • 我正在编写一个javafx程序,我需要创建和使用我自己的Stage based (Javafx。Stage)对话框,用于显示消息和确认。到目前为止,我已经编写了所有必要的代码,但是我有一个问题: 对话框必须停止执行其余代码,直到给出类似“是”或“否”或“重试”之类的响应。当我使用我的对话框,如“DialogBox.ShowMessage”时,会出现一个带有消息和按钮的阶段。但是,正如您可能认为的那

  • 我做了一个程序来搜索.txt文件。 如果我单击一个文件,这意味着“打开”对话框应该出现,该对话框将包含所有已安装程序的列表。 我可以使用什么Java代码来使“打开时”对话框出现?

  • 通过给指向页面的链接增加data-rel="dialog"的属性,可以把任何指向的页面表现对对话框。当应用了对话框的属性之后,qjmobile框架会给新页面增加圆角,页面周围增加margin,以及深色的背景,使得对话框浮在页面之上 HTML 代码: <a href="foo.html" data-rel="dialog">Open dialog</a> 对话框的转场 Transitions 因为

  • 问题内容: 我是android开发的新手。我想在我的应用程序中使用开发一个。当我单击“搜索”按钮时,应当与一起出现,表明在切换到另一个按钮之前进度一直在进行。请给我推荐示例代码。 问题答案: 使用。不过,您应该在new上进行工作,并在完成时使用a 回调到。这是我的方法: