• 什么是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. IDEA中，将文件夹加入classpath

    加载文件时遇到某些文件加载不到,可能是因为该文件不在classpath中. 加入方法: 1.File - Project Structure 2.如图 modules - 选择需要加入的文件夹, 点击 ...

  2. 什么是ODBO---OLE DB for OLAP

      我怎么一步一步追到ODBO了?   mondrian核心api->olap4j->jedox也在用olap4j->ODBO? ODBO是什么呢? OLE DB for OLAP ...

  3. [转]三大WEB服务器对比分析（apache ,lighttpd,nginx）

    原博文地址:http://www.blogjava.net/daniel-tu/archive/2008/12/29/248883.html 一．软件介绍(apache  lighttpd  ngin ...

  4. ORACLE中伪表 dual 的用法

     dual是一个虚拟表,用来构成select的语法规则,oracle保证dual里面永远只有一条记录.我们可以用它来做很多事情,如下: 1.查看当前用户,可以在 SQL Plus中执行下面语句 sel ...

  5. lumen可以使用laravel-ide-helper

    1.laravel-ide-helper 地址https://github.com/barryvdh/laravel-ide-helper 在项目根目录执行composer安装命令 composer ...

  6. JavaScript Patterns 4.9 Configuration Objects

    Configuration Objects Passing a large number of parameters is not convenient. A better approach is t ...

  7. lamp安装

    一.简介 什么是LAMPLAMP是一种Web网络应用和开发环境,是Linux, Apache, MySQL, Php/Perl的缩写,每一个字母代表了一个组件,每个组件就其本身而言都是在它所代表的方面 ...

  8. oracle数据泵示例

    主要的导出示例: 1.导出指定表空间: expdp system/xxx DIRECTORY=dump_dir tableapace=xxx dumpfile=xxx_%DATE:~0,4%%DATE ...

  9. 企业邮箱在Android(安卓)系统手机上POP3/IMAP协议的设置方法

    此处以三星(系统版本4.4.2)为例,介绍下使用安卓系统自带的客户端如何设置pop/imap协议方式方法 以下我们将使用test@zhuyuming.so 为测试案例,请您操作时更换成您自己的邮箱账号 ...

  10. 使用VIM插件ctags来阅读C代码

    说明 Ctags是vim下方便代码阅读的工具.尽管ctags也可以支持其它编辑器,但是它正式支持的只有vim.并且vim中已经默认安装ctags,它可以帮助程序员很容易地浏览源代码:ctags最先是用 ...