• 什么是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. iOS多线程实现1-pthread

    1 操作系统.进程.线程简单介绍 现在的程序都是在操作系统上跑,很少有裸机的,而且大部分的嵌入式应用也都支持操作系统,当然还有一些很低端的嵌入式设备没有操作系统. iPhone手机跑的是iOS操作系统 ...

  2. oc TableView 分割线(separator)部分显示问题

    问题:当TableView的cell不能显示完整个屏幕(屏幕有剩余),则没有显示cell的地方也会显示分割线,这不是我们想要的,正常情况下,如果没有cell则应没有分割线.如下图所示:左图为遇到问题, ...

  3. iOS KVC详细讲解

    iOS KVC详细讲解 什么是KVC? KVC即NSKeyValueCoding,就是键-值编码的意思.一个非正式的 Protocol,是一种间接访问对象的属性使用字符串来标识属性,而不是通过调用存取 ...

  4. Android四大组件之Activity & Fragement

    1.Activity的生命周期

  5. mysql substring_index substring left right方法

    函数简介: SUBSTRING(str,pos) , SUBSTRING(str FROM pos) SUBSTRING(str,pos,len) , SUBSTRING(str FROM pos F ...

  6. oracle基础知识

    -- 表 create table test (names varchar2(12),                    dates date,                    num    ...

  7. CMPP错误码说明

    与中国移动代码的对应关系. MI::zzzzSMSC返回状态报告的状态值为EXPIREDMJ:zzzzSMSC返回状态报告的状态值为DELETEDMK:zzzzSMSC返回状态报告的状态值为UNDEL ...

  8. HTML基础（二）——表单，图片热点，网页划区和拼接

    一.表单 <form id="" name="" method="post/get" action="负责处理的服务端&qu ...

  9. T-SQL—理解CTEs

    在推出SQLServer2005之后,微软定义了一个新的查询架构叫做公共表表达式--CTE.CTE是一个基于简单查询的临时结果集,在一个简单的插入.更新.删除或者select语句的执行范围内使用.再本 ...

  10. list、set、map、array间的相互转换

    list.set.map.array间的相互转换 list转set Set set = new HashSet(new ArrayList()); set转list List list = new A ...