• 什么是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. PagerTabStrip在ViewPager的页面中添加标题显示

    package com.qf.day18_viewpager_demo_05; import java.util.ArrayList; import java.util.List; import an ...

  2. C#中方法的参数的四种类型

    C#中方法的参数有四种类型:       1. 值参数类型  (不加任何修饰符,是默认的类型)       2. 引用型参数  (以ref 修饰符声明)       3. 输出型参数  (以out 修 ...

  3. SQL优化技巧--远程连接对象引起的CTE性能问题

    背景 最近SSIS的开发过程中遇到几个问题.其中使用CTE时,遇到一个远程连接对象,结果导致严重的性能问题,为了应急我就修改了代码. 之前我写了一篇介绍CTE的随笔包含了CTE的用法等: http:/ ...

  4. python中列表、元组、字典内部功能介绍

    一.列表(list) 常用功能的介绍:

  5. 【API】获取优酷视频信息接口

    序:        自己的网站中需要接入一个视频模块,虚拟主机的空间小所以只能引用第三方的链接.感觉国内优酷好不错,所以查了一下优酷的接口. 0x00:        先去优酷API开放中心申请一个开 ...

  6. 【mysql】数据库使用的一些规范

    一.MySQL存在的问题 优化器对复杂SQL支持不好 对SQL标准支持不好 大规模集群方案不成熟,主要指中间件 ID生成器,全局自增ID 异步逻辑复制,数据安全性问题 Online DDL HA方案不 ...

  7. Attribute 用法

    public class Program { //定制特性也可以应用在其他定制特性上, //应用AttributeUsage,来控制如何应用新定义的特性 [AttributeUsage(Attribu ...

  8. CentOS系统启动流程你懂否

    一.Linux内核的组成 相关概念: Linux系统的组成部分:内核+根文件系统 内核:进程管理.内存管理.网络协议栈.文件系统.驱动程序. IPC(Inter-Process Communicati ...

  9. CentOS 6.3下配置iSCSI网络存储

    一.简介 iSCSI(internet SCSI)技术由IBM公司研究开发,是一个供硬件设备使用的.可以在IP协议的上层运行的SCSI指令集,这种指令集合可以实现在IP网络上运行SCSI协议,使其能够 ...

  10. 移动Windows用户文件夹的方法研究

    这种方法可能导致升级Windows失败.请谨慎使用. Windows 8.1 使用有效.其他系统请酌情修改. —————————————————————————— 复制文件内容(带权限等信息):有的说 ...