jQueryEasyUI Dialog的基本使用

最新推荐文章于 2023-07-28 14:36:07 发布
最新推荐文章于 2023-07-28 14:36:07 发布
阅读量509 收藏
点赞数
分类专栏： JQueryEasyUI
<html xmlns= "http://www.w3.org/1999/xhtml" >
<head runat= "server" >
     <title>Dialog</title>
     <link href= "/jquery-easyui-1.2.4/themes/default/easyui.css" rel= "stylesheet" type= "text/css" />
     <link href= "/jquery-easyui-1.2.4/themes/icon.css" rel= "stylesheet" type= "text/css" />
     <script src= "/jquery-easyui-1.2.4/jquery-1.6.4.min.js" type= "text/javascript" ></script>
     <script src= "/jquery-easyui-1.2.4/jquery.easyui.min.js" type= "text/javascript" ></script>
     <script type= "text/javascript" >
         $(function () {
             $( '#dlg' ).dialog({
                 title: '对话框' ,
                 iconCls: "icon-edit" ,
                 collapsible: true ,
                 minimizable: true ,
                 maximizable: true ,
                 resizable: true ,
                 width: 300,
                 height: 200,
                 modal: true
             });
         });
     </script>
</head>
<body>
     <div id= "dlg" >
         Content
     </div>
</body>
</html>

或

<html xmlns= "http://www.w3.org/1999/xhtml" >
<head runat= "server" >
     <title>Dialog</title>
     <link href= "/jquery-easyui-1.2.4/themes/default/easyui.css" rel= "stylesheet" type= "text/css" />
     <link href= "/jquery-easyui-1.2.4/themes/icon.css" rel= "stylesheet" type= "text/css" />
     <script src= "/jquery-easyui-1.2.4/jquery-1.6.4.min.js" type= "text/javascript" ></script>
     <script src= "/jquery-easyui-1.2.4/jquery.easyui.min.js" type= "text/javascript" ></script>
</head>
<body>
     <div id= "dlg" class = "easyui-dialog" style= "width:300px; height:200px;" title= "对话框" iconCls= "icon-edit" >
         Content
     </div>
</body>
</html>

效果图：

2、工具栏、按钮栏

<script type= "text/javascript" >
     $( function () {
         $( '#dlg' ).dialog({
             title: '对话框' ,
             iconCls: "icon-edit" ,
             collapsible: true ,
             minimizable: true ,
             maximizable: true ,
             resizable: true ,
             width: 300,
             height: 200,
             modal: true ,
             href: "Content.aspx" ,
             onClose: function () {
                 alert( "Close" );
             },
             toolbar: [{
                 text: 'Add' ,
                 iconCls: 'icon-add' ,
                 handler: function () {
                     alert( 'add' );
                 }
             }, '-' , {
                 text: 'Save' ,
                 iconCls: 'icon-save' ,
                 handler: function () {
                     alert( 'save' );
                 }
             }],
             buttons: [{
                 text: 'Ok' ,
                 iconCls: 'icon-ok' ,
                 handler: function () {
                     alert( 'ok' );
                 }
             }, {
                 text: 'Cancel' ,
                 iconCls: 'icon-cancel' ,
                 handler: function () {
                     $( '#dlg' ).dialog( 'close' );
                 }
             }]
         });
     });
</script>

效果图：


3、参数

属性名

类型

描述

默认值

title

字符串

对话框的标题文本

New Dialog

collapsible

布尔

定义是否显示可折叠按钮

false

minimizable

布尔

定义是否显示最小化按钮

false

maximizable

布尔

定义是否显示最大化按钮

false

resizable

布尔

定义对话框是否可编辑大小

false

toolbar

数组

对话框上的工具条，每个工具条包括:

text,

iconCls,

disabled,

handler

etc.

null

buttons

数组

对话框底部的按钮，每个按钮包括:

text,

iconCls,

handler

etc.

null

4、事件

Dialog的事件和窗口(Window)的事件相同。

5、方法

Dialog的函数方法和窗口(Window)的相同。


二子戴代
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery-EasyUI学习（十四）Dialog（对话框窗口）
quge_name_harder的博客
11-26 519
一、Dialog（对话框窗口）           该对话框是一种特殊类型的窗口，它在顶部有一个工具栏，在底部有一个按钮栏。对话框窗口右上角只有一个关闭按钮用户可以配置对话框的行为显示其他工具,如collapsible,minimizable,maximizable工具等。 二、例子 &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Trans...
JQueryEasyUI 组件dialog
寂寞的一只狗的博客
03-11 537
1.dialog组件定义 jQuery EasyUI 对话框（Dialog）用法与EasyUI的窗口用法极为相似，最终的效果图仅与窗口的效果图相差几个按钮， 该对话框是一种特殊类型的窗口，它在顶部有一个工具栏，在底部有一个按钮栏。 继承关系：window 和linkbutton 创建实例标签元素：dialog组件使用标签元素定义 2.dialog组件定义
jquery easyui dialog的几个使用问题
bbrruucc的博客
09-15 569
jquery easyui dialog可以两种方式使用 1)定义div,使用iframe 需要显示dialog时使用以下2行即可 $('#openXXXIframe')[0].src='xxxEdit.action'; $('#openRoleDiv').dialog('open'); 2)不使用iframe(请参见easyui的demo) Dia...
jquery easyui dialog
山川尽美的专栏
09-22 903
最近项目用到jquery easyui ，针对dialog 作如下笔记： 这里的流程是：点击“”修改“”按钮的时候，弹出dialog 内容：可以动态获取 注意：class="easyui-dialog" ，加入他的话，对话框默认就是打开的，加载整个页面的话就会弹出，影响功能，所以此处不加class。 调用： var $editmenuWin; $editmenuWin =
jQuery EasyUI 窗口 - 创建对话框
unber的博客
05-09 193
对话框（Dialog）是一个特殊的窗口（window），可以包含在顶部的工具栏和在底部的按钮。默认情况下，对话框（Dialog）不能改变大小，但是用户可以设置 resizable 属性为 true，使其可以改变大小。上面的代码我们创建了一个带有工具栏（toolbar）和按钮（button）的对话框（dialog）。这是对话框（dialog）、工具栏（toolbar）、内容（content）和按钮（buttons）的标准配置。准备工具栏（Toolbar）和按钮（Button）创建对话框（Dialog）
jQuery EasyUI window窗口使用实例代码
10-18
jQuery EasyUI 是一个基于 jQuery 的前端框架，它提供了一系列易于使用的组件，如窗口（window）、表格（datagrid）、对话框（dialog）等，帮助开发者快速构建用户界面。在本实例中，我们将关注如何使用 jQuery ...
JQuery EasyUI的使用
10-22
### EasyUI 的基本概念 - **EasyUI 集成的组件**：EasyUI 包含了大量的UI组件，如对话框（Dialog）、表单（Form）、面板（Panel）、菜单（Menu）、树形控件（Tree）、表格（Grid）、tabs（选项卡）等，这些组件可以...
jquery easyui滚动条部分设置介绍
10-26
在jQuery EasyUI框架中，创建的对话框（dialog）通常会自动居中显示在屏幕上，但这仅限于页面没有出现滚动条的情况。一旦页面内容超出视口，出现滚动条，dialog就会保持在原始的居中位置，导致用户需要手动滚动页面...
jQuery EasyUI API 中文文档 – Dialog对话框
12-03
**jQuery EasyUI API 中文文档 - Dialog对话框** 在jQuery EasyUI框架中，Dialog对话框是一种常见的用户交互组件，它扩展了$.fn.window.defaults，并通过$.fn.dialog.defaults重写了默认配置。Dialog主要用于显示...
jquery easyui使用心得
10-25
<script type="text/javascript" src="js/jquery.min.js"></script><script type="text/javascript" src="js/jquery.easyui.min.js"></script> </head> <body> 基本使用</h2> ;"> <input class="easyui-textbox" ...
easyUI框架之Dialog、Layout、DateBox、Pagination
最新发布
哈哈
07-28 512
二、引入使用easyUI引入js文件的顺序不要搞反了，有的童鞋经常会发现我引入了js文件为什么会报一些莫名奇妙的问题，最多的应该就是未定义undefined，其实大多时候都是js文件引入顺序的问题。我们知道网页在加载我们的index页面的时候，会从上往下以此加载，那么有一些js文件依赖jquery文件，顺序搞错了的话，将会先加载其他的js，最后再加载jquery，这就导致出现上述未定义的问题，所以要注意引入的顺序
EasyUI中Dialog对话框的简单使用
BADAO_LIUMANG_QIZHI的博客
06-19 649
场景 效果 属性 该属性扩展自窗口（window）下面是为对话框（dialog）重写的属性。 名称 类型 描述 默认值 title string 对话框的标题文本。 New Dialog collapsible boolean 定义是否显示折叠按钮。 false minimizable boolean 定义是...
easyUI dialog打开对话框，显示列表数据，选取一条数据操作后赋值给父窗口 resultMap声明为全局，生成getset方法...
weixin_33695082的博客
01-03 540
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %> <%@ include file="/jsp/common/commonfile.jsp" %> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//E...
EasyUi dialog 弹框
羽下佳人的博客
12-18 1945
1、打开遮罩层 modal="true"   2、弹框默认打开，设置关闭 closed="true"   3、弹框打开，关闭调用事件 $('#dlg').dialog('open') $('#dlg').dialog('close') 4、按钮点击后有虚线：easyui.css样式表里面这句注释掉 a.l-btn .l-btn-focus { /*outline:...
easyui dialog的用法
热门推荐
whaleluo的博客
12-20 1万+
  &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Basic Dialog - jQuery EasyUI Demo&lt;/title&gt; &lt;link rel="stylesheet" typ
JQuery EasyUI dialog弹出框的 close 和 destroy
nice_xiaoshi的博客
05-28 1530
开发项目中（使用JQuery EasyUI），根据业务需要重叠弹出多个提示框的情况，会出现如下情况：页面出现两个div模块调用同一个弹出页面，页面的数据接受框元素不能实时存储数据解决方案： 　　　　使用$(this).dialog('close');来关闭dialog时，仅仅是隐藏，而不会完全消失，如果此时，另外一个按钮或者请求也需要弹出dialog时，页面上面会出现两个相同的dialog，...
easyui 更改dialog弹出的位置
weixin_30297281的博客
02-09 627
方法一： 在弹出dialog的时候不用$('#dialogDiv').dialog('open');打开。用$('#dialogDiv').window('open');打开。再用window的resize方法重新布局就可以了。类似：var top = $("#struBtn").offset().top + 30;var left = $("#struBtn").offset().l...
easyUI dialog 弹窗 居中显示
gtlishujie的博客
02-08 6413
自从使用了jquery easyUI 以来对于dialog弹出框的显示位置一直是块心病，想了多种办法处理。总是觉得不是最好的，今天看见网上一博客局的挺有道理的，就运用到自己的项目中试了试，觉的挺好就记录下来分享下，具体如下：默认情况下应该是在屏幕居中显示的。但是有的时候没有居中只要重新纠正下就可以了$('#add_dialog').dialog('open'); //打开添加对话框 $('#add...
jQuery EasyUI 中文详解：组件使用指南
此文档为中文详解，覆盖了各个组件的基本使用、参数、事件和方法。" jQuery EasyUI 的核心是通过简洁的 API 实现复杂的用户界面。以下是对部分组件的详细介绍： 1. **Accordion（可折叠标签）**：Accordion 允许将...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值