• 什么是dialog

对话框是一种特殊的窗口，它在顶部有一个工具栏，在底部有一个按钮栏。默认情况下，对话框（dialog）只有一个显示在头部右侧的关闭工具。

用户可以配置对话框行为来显示其他工具（比如：可折叠 collapsible、可最小化 minimizable、可最大化 maximizable，等等）。

dialog依赖 window和linkbutton，当需要dialog提供某个功能，而API上又没有找到的时候，可以试着去window和linkbutton上找找看

  • 使用html标签创建dialog
<div class="easyui-dialog" title="对话框" style="width: 500px;height: 500px">对话框</div>

对于一个普通的<div>，一旦添加上了easyui-dialog作为class样式后，就会变成一个“漂亮”的对话框了

推断一下，其他EasyUI组件也是这么个使用方法，就是在div或其他标签上，添加指定的EasyUI样式即可

  • 使用js创建dialog
<div id="dialog">对话框</div>
<script type="text/javascript">
    $(function () {
        $("#dialog").dialog({
            title: "对话框"
            width: 500,
            height: 200
        });
    })
</script>

html标签提供了容器，js操作这个容器，加工成一个EasyUI的组件。

  • 如何设置属性？

如果使用标签创建，就添加 data-options 属性，如：data-options="iconCls:'icon-save',resizable:true,modal:true"

如果使用JS创建，就传递一个JSON对象给dialog方法即可。

个人以为，只要需要将一个页面元素渲染成EasyUI组件，那么尽量还是使用JS去创建于设置这个元素

HTML只负责网页的骨架，由EasyUI去控制页面的样式与组件的行为。

扩展：现在也有一部分意见认为前端开发中需要分离CSS框架与JS框架，其实也有其合理性，但是对于页面的美观性没有太大需求的项目而言，特别是对于后端系统而言，没有必要拆分。况且美观是一门玄学，假如到了那个必要的时候，团队中肯定需要专门的美工团队，这里就不展开了。

  • 属性

属性都可以在官网上找到，其基本的使用也都有。这里就不在赘述了，只对部分属性做一个使用说明

toolbar:顶部工具栏

buttons：底部按钮

这两个属性的值，都是JSON数组或选择器，举例：

选择器：

    <script type="text/javascript">
        $(function () {
            $("#dialog").dialog({
                title: "对话框",
                iconCls: "icon-save",
                width: 500,
                height: 200,
                resizable: true,
                toolbar: "#tb",
                buttons: "#bts"
            });
        })
    </script>
</head>
<body>
<div id="dialog">对话框</div>
<div id="tb">
    <a href="#" class="easyui-linkbutton">按钮1</a>
    <a href="#" class="easyui-linkbutton">按钮2</a>
</div>
<div id="bts">
    <a href="#" class="easyui-linkbutton">按钮3</a>
    <a href="#" class="easyui-linkbutton">按钮3</a>
</div>
</body>

JSON数组

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<%
    String homePage = request.getContextPath();
%>
<!DOCTYPE HTML>
<html>
<head>
    <title>JS创建dialog</title>
......
    <script type="text/javascript">
        $(function () {
            $("#dialog").dialog({
                title: "对话框",
                iconCls: "icon-save",
                width: 500,
                height: 200,
                resizable: true,

                modal: true,

                toolbar: [
                    {
                        text: '编辑',
                        iconCls: 'icon-edit',
                        handler: function () {
                            alert('编辑')
                        }
                    }, {
                        text: '帮助',
                        iconCls: 'icon-help',
                        handler: function () {
                            alert('帮助');
                        }
                    }
                ],
                buttons: [{
                    text: '保存',
                    handler: function () {
                        alert("保存");
                    }
                }, {
                    text: '关闭',
                    handler: function () {
                        alert("关闭");
                    }
                }]
            });
        })    
　　</script>
</head>
<body>
<div id="dialog">对话框</div>
</body>
</html>

modal:是否模态，true - 对话框显示的时候，背景是无法操作的，这个属性继承自window，当页面操作需要阻塞的时候会用到这个

窗口 - dialog - 概述与基本使用的更多相关文章

  1. 窗口Dialog

    Dialog是窗口的意思,它是Window的子类.与frame相比,frame是我们大的窗口,而dialog便是那种弹出来和你说话的对话框. Dialog类的默认布局是BorderLayout Dia ...

  2. 控制窗口不能拖拉出主窗口 Dialog And Window

    /* 控制窗口不能拖拉出主窗口(覆写) */var easyuiPanelOnMove = function(left, top) { if ($(this).panel('options').reS ...

  3. jquery ui-----弹出窗口 dialog

    jquery ui 提供了强大的dialog功能,基本能满足开发的功能. 先上一个简单的例子: [代码] <script> $(function() {   $( "#dialo ...

  4. 窗口 - dialog - 与后端交互

    与后端交互,一般需要提交表单数据,所以,这次渲染得dialog其实是一个<form> <form id="loginForm"> <table ali ...

  5. SSM项目实战 之 EasyUI

    目录 EasyUI 简介 概述 使用EasyUI panel组件 简介 示例 JS形式及属性介绍 panel事件与方法 Window组件 概述 使用 行为 dialog 概述 使用 tabs组件 概述 ...

  6. JQuery Dialog(JS模态窗口,可拖拽的DIV) 效果实现代码

    效果图 调用示意图   交互示意图 如上图所示,这基本是JQueryDialog的完整逻辑流程了. 1.用户点击模态窗口的“提交”按钮时,调用JQueryDialog.Ok()函数,这个函数对应了用户 ...

  7. wxWidgets源码分析(7) - 窗口尺寸

    目录 窗口尺寸 概述 窗口Size消息的处理 用户调整Size消息的处理 调整窗口大小 程序调整窗口大小 wxScrolledWindow设置窗口大小 获取TextCtrl控件最合适大小 窗口尺寸 概 ...

  8. android中的Dialog

    一.Dialog概述 二.使用系统自带的Dialog 1.新建Builder AlertDialog.Builder builder = new AlertDialog.Builder(StoryAc ...

  9. (转)弹出窗口lhgDialog API文档

    应用到你的项目 如果您使用独立版本的lhgDialog窗口组件,您只需在页面head中引入lhgcore.lhgdialog.min.js文件,4.1.1+版本做了修改可以和jQuerya库同时引用, ...

随机推荐

  1. 初学HTML 常见的标签(一) 文本标签

    最近做iOS开发的过程中, 发现要涉及到JS和原生OC(Swift)的交互, 作为一个Developer, 本着克服一切问题的原则, 开始学习HTML, 在这里记录下自己的学习笔记, 方便以后的复习, ...

  2. iOS 学习 - 10下载(4) NSURLSession 会话 篇

    NSURLConnection通过全局状态来管理cookies.认证信息等公共资源,这样如果遇到两个连接需要使用不同的资源配置情况时就无法解决了,但是这个问题在NSURLSession中得到了解决.N ...

  3. 数据存储与IO（一）

    应用程序沙盒简介:iOS应用程序只能在系统为它分配的文件区域内读写文件,这个区域就是此应用程序的沙盒,Application目录下的GUID文件夹就是沙盒,这个文件夹是系统随机命名的.程序所有的非代码 ...

  4. 荷兰国旗 Flag of the Kingdom of the Netherlands

    问题描述:现有n个红白蓝三种不同颜色的小球,乱序排列在一起,请通过两两交换任意两个球,使得从左至右的球依次为红球.白球.蓝球.这个问题之所以叫做荷兰国旗,是因为将红白蓝三色的小球弄成条状物,并有序排列 ...

  5. 10、技术经理要阅读的书籍 - IT软件人员书籍系列文章

    技术经理是项目组中的重要角色.他需要负责软件项目中的重要部分,如果项目组没有架构师的话,技术经理还需要担负起架构师的职责.同时,技术经理要对项目中的所有重要的技术问题进行处理. 但是,在项目组内部,软 ...

  6. AEAI DP按钮权限配置说明

    1 背景概述 AEAI DP3.5版本以后支持对按钮权限进行灵活的管理配置,本文对配置过程进行详细说明,为相关使用人员提供指导和参考. 2 预期读者 数通畅联技术人员 AEAI DP开发平台使用人员 ...

  7. TechEd2013 Shanghai Hol Session PPT Share

    上个月去上海参加了TechEd 2013,并且参与了Hands-on-Lab环节,作为讲师引导大家完成<Local DB in WP8>实验的内容.由于实验的内容采用MVVM架构完成,因此 ...

  8. .net开发过程中遇到的错误，及解决办法记录

    一.在证书存储区中找不到清单签名证书. 解决方法:右击项目属性—>签名—>为ClickOnce清单签名,将勾掉的选项去掉. 参考:http://www.cnblogs.com/190196 ...

  9. 双十一来了，别让你的mongodb宕机了

    好久没过来吹牛了,前段时间一直赶项目,没有时间来更新博客,项目也终于赶完了,接下来就要面临双十一这场惊心动魄的处女秀考验, 我们项目中会有一个wcf集群,而集群地址则放在mongodb中,所以mong ...

  10. 使用Source Safe for SQL Server解决数据库版本管理问题（转载）

    简介 在软件开发过程中,版本控制是一个广为人知的概念.因为一个项目可能会需要不同角色人员的参与,通过使用版本控制软件,可以使得项目中不同角色的人并行参与到项目当中.源代码控制使得代码可以存在多个版本, ...