• 什么是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. AES加密解密

    AES简介 美国国家标准技术研究所在2001年发布了高级加密标准(AES).AES是一个对称分组密码算法,旨在取代DES成为广泛使用的标准. 根据使用的密码长度,AES最常见的有3种密钥方案,用以适应 ...

  2. 【代码笔记】iOS-给背景图赋值颜色

    代码: - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. // ...

  3. iOS开发之AFN的基本使用

    本篇将从四个方面对iOS开发中经常使用到的AFNetworking框架进行讲解: 一.什么是 AFN 二.为什么要使用 AFN 三.AFN 怎么用 三.AFN和ASI的区别 一.什么是 AFN AFN ...

  4. ASP.NET处理301重定向方法 带示例 (demo)

    System.Web.HttpContext.Current.Response.Status = "301 Moved Permanently"; System.Web.HttpC ...

  5. 基于Tomcat + JNDI + ActiveMQ实现JMS的点对点消息传送

    前言 写了一个简单的JMS例子,之所以使用JNDI 是出于通用性考虑,该例子使用JMS规范提供的通用接口,没有使用具体JMS提供者的接口,这样可以保证我们编写的程序适用于任何一种JMS实现(Activ ...

  6. Git从零开始怎么学？

    最近,公司项目代码版本库管理,全部从svn 迁移到Git 最近了解了一段时间 近期会把整个Git使用过程陆续分享 如何从零开始使用Git

  7. Java常用排序算法+程序员必须掌握的8大排序算法+二分法查找法

    Java 常用排序算法/程序员必须掌握的 8大排序算法 本文由网络资料整理转载而来,如有问题,欢迎指正! 分类: 1)插入排序(直接插入排序.希尔排序) 2)交换排序(冒泡排序.快速排序) 3)选择排 ...

  8. ImitateLogin新增插件机制以及又一个社交网站的支持

    我的文章里已经多次介绍 imitate-login ,这是我最近一直在维护的一个使用c#模拟社交网站登录的开源项目,现在新增了对插件的支持以及一个新的网站(由于某种原因,会在文章结束部分介绍:而且仅会 ...

  9. CSS实现自定义手型气泡提示

    实现自定义的手型气泡提示 <html> <head> <meta charset="utf-8"> <title></titl ...

  10. spring服务定位器类

    此文章是基于 搭建SpringMVC+Spring+Hibernate平台 功能:通过持有的Spring应用场景ApplicationContext,可在任何地方获取bean. 1. 服务定位器类:S ...