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创建对话框的两种方式，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
相关推荐
-
Jquery EasyUI中弹出确认对话框以及加载效果示例代码
复制代码 代码如下: //confirm function Confirm(msg, control) { $.messager.confirm("确认", msg, function (r) { if (r) { return true; } }); return false;} 复制代码 代码如下: //Loadfunction Load() { $("<div class=\"da
-
jQuery EasyUI API 中文文档 - Dialog对话框
扩展自 $.fn.window.defaults,用 $.fn.dialog.defaults 重写了 defaults. 依赖 window linkbutton 用法 复制代码 代码如下: <div id="dd" title="My Dialog" style="width:400px;height:200px;"> Dialog Content. </div> 复制代码 代码如下: $('#dd').dialog(
-
JQuery EasyUI 对话框的使用方法
下面看一下EasyUI的对话框效果图 js代码: 复制代码 代码如下: <script language="javascript" type="text/javascript"> function Open_Dialog() { $('#mydialog').show(); $('#mydialog').dialog({ collapsible: true, minimizable: true, maximizable: true, toolbar: [
-
EasyUI创建对话框的两种方式
对话框(Dialog)是一个特殊的窗口(window),可以包含在顶部的工具栏和在底部的按钮.默认情况下,对话框(Dialog)不能改变大小,但是用户可以设置 resizable 属性为 true,使其可以改变大小. 这种就是对话框了. EasyUI有两种创建方式: 第一种:通过已存在的DOM节点元素标签创建 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org
-
对Python中创建进程的两种方式以及进程池详解
在Python中创建进程有两种方式,第一种是: from multiprocessing import Process import time def test(): while True: print('---test---') time.sleep(1) if __name__ == '__main__': p=Process(target=test) p.start() while True: print('---main---') time.sleep(1) 上面这段代码是在window
-
Java创建线程的两种方式
前言 多线程是我们开发过程中经常遇到的,也是必不可少需要掌握的.当我们知道需要进行多线程开发时首先需要知道的自然是如何实现多线程,也就是我们应该如何创建线程. 在Java中创建线程和创建普通的类的对象操作是一样的,我们可以通过两种方式来创建线程: 1.继承Thread类,并重写run()方法. 2.实现Runnable接口,并实现run()方法. 方法一:继承Thread类 代码非常简单 首先重载一个构造函数,以便我们可以给线程命名. 重写run()方法. 这里我们先让线程输出线程名+start
-
JavaScript创建闭包的两种方式的优劣与区别分析
通常JavaScript创建闭包比较常用的有两种方式. 构造函数方式: new function() { var 变量... } 内联执行方式: (function() { var 变量... })(); 在JavaScript内部运行机制下他们有什么区别?用哪种方式创建比较好?它与其它方式创建的闭包相比有什么优势? 我是这样理解的: 区别: 第一个:子方法可以共享变量 第二个:内部子方法共享变量 比较: 我认为内联的比较好: 优势: 一般内联的创建是按需索要内存,因为只是局部执行的变量在内存里
-
Java创建多线程的两种方式对比
采用继承Thead类实现多线程: 优势:编写简单,如果需要访问当前线程,只需使用this即可,无需使用Thead.currentThread()方法. 劣势:因为这种线程类已经继承了Thead类,所以不能再继承其它类. 示例代码: 复制代码 代码如下: package org.frzh.thread; public class FirstThread extends Thread{ private int i; //重写run方法,run方法的方法体就是线程执
-
springboot创建线程池的两种方式小结
目录 springboot创建线程池两种方式 1.使用static代码块创建 2.使用@Configuration @bean注解,程序启动时创建 springboot开启线程池 定义线程池 使用 springboot创建线程池两种方式 1.使用static代码块创建 这样的方式创建的好处是当代码用到线程池的时候才会初始化核心线程数 具体代码如下: public class HttpApiThreadPool { /** 获取当前系统的CPU 数目*/ static int cpuNums =
-
关于Java创建线程的2种方式以及对比
目录 1. 继承Thread类 2. 实现Runnable接口: 创建线程的两种方式对比: 线程的完整生命周期: 总结 Java中两种创建线程的方式: 1. 继承Thread类 重写run()方法 new一个线程对象 调用对象的start()启动线程 class Handler extends Thread{ public void run(){ //重写run()方法 } public static void main(String[] args){ Thread thread=new Han
-
K8s创建资源的两种方法实例
目录 前言 kubectl run kubectl kubectl create/apply kubectl create 与 kubectl apply create apply 总结 前言 在 K8s 中,创建资源有两种方式: 直接使用 kubectl run 命令创建 使用 kubectl create/apply 命令从 YAML 文件创建 在本文中,我将通过示例解释这两种方法,以及它们分别应该在何时使用. kubectl run kubectl run 命令在 pod 中创建并运行特定
-
Oracle创建Database Link的两种方式详解
创建一个dblink,命名为dblink_name,从A数据库连到B数据库,B数据库的IP为192.168.1.73,端口为1521,实例名为oracle,登录名为tast,密码为test. 一菜单方式: 打开plsql,点击[File]-[New]-[Database link],打开如下图所示窗口 填好各项信息后,点击[Apply]即可完成Database Link的创建. 二SQL方式 -- Drop existing database link drop public database
-
Easyui和zTree两种方式分别实现树形下拉框
最近工作中需要用到树形下拉框,因为项目中树形结构使用的是zTree,然后就百度,结果出来效果不好看,后来就试着用了easyui的comboTree,虽然比较好看,但是跟整体的bootstrap风格有点儿不搭.现在贴出来两种方式及效果,以后备用. 方式一,使用zTree 前端代码: <div class="form-group"> <label>点击事件:</label> <input id="selectActionType"