EasyUI之对话框

这种就是对话框了。

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>

时间： 2024-10-05 05:06:53

EasyUI之对话框的相关文章

【jquery easyui】对话框的使用

一.下载在此我用的1.3.5版本,http://www.jeasyui.com/download/list.php 解压后,如图: 删除 demo文件夹. 二.建立基础模板 <!DOCTYPE html> <html> <head> <title>引入</title> <meta charset="UTF-8" />  <link rel="styleshe

扩展自 $.fn.window.defaults.通过 $.fn.dialog.defaults 重写默认的 defaults. 对话框(dialog)是一个特殊类型的窗口,它在顶部有一个工具栏,在底部有一个按钮栏.默认情况下,对话框(dialog)只有一个显示在头部右侧的关闭工具.用户可以配置对话框行为来显示其他工具(比如:可折叠 collapsible.可最小化 minimizable.可最大化 maximizable,等等). 依赖 window linkbutton 用法通过标记从已有

EasyUi中对话框。

html页面代码: <head id="Head1" runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <link href="EasyUI/themes/default/easyui.css" rel

JQuery EasyUI 对话框的使用方法

下面看一下EasyUI的对话框效果图 js代码: 复制代码代码如下: <script language="javascript" type="text/javascript"> function Open_Dialog() { $('#mydialog').show(); $('#mydialog').dialog({ collapsible: true, minimizable: true, maximizable: true, toolbar: [{

jQuery easyui 和 ueditor结合的问题

在easyui的对话框中嵌入ueditor后,发现ueditor的工具栏弹不出来,拖动对话框后发现弹出在对话框后面了,于是通过google浏览器开发工具查看,发现对话框的z-index为9020,于是修改ueditor的zIndex大于它即可: = .(, { : , :, : , : [ [, , , , , , , , , , , , , , , , ] ] }); 参见:http://www.zhengdecai.com/post/

ajax提交表单

ajax提交表单在项目中常用,前台无论是简单的html.jsp或者是使用了easyui框架,提交表单都会使用到ajax,extjs框架其实也是使用了ajax只不过对其进行了封装了,我们使用的时候就更固定了些. 总的来说ajax提交表单可以分为两种,一种是无返回结果的,就是将表单数据提交给后台,后台处理完就完了:另一种就是有返回结果的,后台执行成功或失败的信息需要返回到前台. 1,无返回结果的最简单的就是$("#formid").submit();直接将form表单提交到后台. 2,有

分针网—每日分享：ajax提交表单

ajax提交表单在项目中常用,前台无论是简单的html.jsp或者是使用了easyui框架,提交表单都会使用到ajax,extjs框架其实也是使用了ajax只不过对其进行了封装了,我们使用的时候就更固定了些. 总的来说ajax提交表单可以分为两种,一种是无返回结果的,就是将表单数据提交给后台,后台处理完就完了:另一种就是有返回结果的,后台执行成功或失败的信息需要返回到前台. 1. 无返回结果的最简单的就是$("#formid").submit();直接将form表单提交到后台. 2.

大三在校生的传智120天的1200小时.net(十四) 关于easyUI的模态对话框

会用easyUI的模态对话框会是我们的开发更加简洁,只需下载这个插件,把需要的文件拖到项目中,下面展示一个easyUI的模态对话框,以及使用方法和属性.这里是一个常用功能小展示,试试上easyUI自带的说明文档非常全面,*****学会查看文档很重要,看几次就会熟练***** <script type="text/javascript" src="../Script/jquery-1.8.3.js"></script> <script s

基于MVC+EasyUI的Web开发框架经验总结（17）--布局和对话框自动适应大小的处理

在我自己的<Web开发框架>中,用了很多年的EasyUI,最新版本EasyUI为1.4.5,随着版本的更新,其很多功能得到了很大的完善和提高,同时也扩展了一些新的功能,以前在布局和对话框弹出层的自动适应大小的问题,也在最近的一些版本得到了解决,本文在迁移到最新EasyUI版本的时候,总结了一些经验,希望对大家使用这个强大的Web界面组件有所帮助. 1.Web主界面的布局调整上面的布局是顶部内容+一级菜单.左边菜单,右边主内容为页面内容,页面内容是变化的内容,其他部分为不变的,这样的布局代码如