脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → easyui 对话框

EasyUI创建对话框的两种方式

 更新时间：2016年08月23日 10:33:36   作者：Java大S  
对话框（Dialog）是一个特殊的窗口（window），可以包含在顶部的工具栏和在底部的按钮。接下来通过本文给大家介绍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设置图片等比例缩小的方法

    jQuery设置图片等比例缩小的方法

    这篇文章主要介绍了jQuery设置图片等比例缩小的方法,涉及jQuery针对页面元素属性动态判定与设置相关操作技巧,需要的朋友可以参考下
    2017-04-04
  • jQuery搜索同辈元素方法

    jQuery搜索同辈元素方法

    这篇文章主要介绍了jQuery搜索同辈元素方法,实例分析了next、nextAll、nextUtil、prev、prevAll等方法的使用技巧,并给出了一个完整的实例进行了总结归纳,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-02-02
  • 如何使用jQuery技术开发ios风格的页面导航菜单

    如何使用jQuery技术开发ios风格的页面导航菜单

    这篇文章主要介绍了如何使用jQuery技术开发ios风格的页面导航菜单,需要的朋友可以参考下
    2015-07-07
  • 修改jquery.lazyload.js实现页面延迟载入

    修改jquery.lazyload.js实现页面延迟载入

    jquery.lazyload.js并未真正的实现页面延迟载入，它的实现原理是页面载入完毕后将html中所有img标签的src属性都替换为空，把src的初始值存储到一个自定义的属性中，当页面滚动到img标签位置时再将图片载入进来。
    2010-12-12
  • Jquery 设置标题的自动翻转

    Jquery 设置标题的自动翻转

    我们平时在开发web程序的时候，想把一个新闻源滚动显示新闻的条目的标题及内容摘要，而且是每次一条，有点类似csdn的滚动广告。
    2009-10-10
  • jQuery制作仿Mac Lion OS滚动条效果

    jQuery制作仿Mac Lion OS滚动条效果

    本文是通过nanoscrollerjs简单实现Mac OS 系统滚动条效果特效，以及本插件的使用方法和参数，非常不错，这里推荐给大家。
    2015-02-02
  • jQuery插件ContextMenu自定义图标

    jQuery插件ContextMenu自定义图标

    这篇文章主要为大家详细介绍了jQuery插件ContextMenu自定义图标的相关代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-03-03
  • jQuery新的事件绑定机制on()示例应用

    jQuery新的事件绑定机制on()示例应用

    从jQuery1.7开始，jQuery引入了全新的事件绑定机制，on()和off()两个函数统一处理事件绑定，下面通过示例为大家介绍下
    2014-07-07
  • jQuery Easyui 下拉树组件combotree

    jQuery Easyui 下拉树组件combotree

    项目中做角色授权时，需要做一个下拉框带树结构的 并且可以多选的组件，就想到了easyui的combotree，下面通过实例代码给大家介绍下Easyui 下拉树组件combotree
    2016-12-12
  • jquery不常用方法汇总

    jquery不常用方法汇总

    本文给大家汇总介绍了几个jQuery中不常用的方法，记录一下，分享给大家，有需要的小伙伴可以参考下。
    2015-07-07

最新评论