第二讲 EasyUI控件dialog的使用

最新推荐文章于 2024-04-11 16:55:56 发布
最新推荐文章于 2024-04-11 16:55:56 发布
阅读量933 收藏
点赞数
分类专栏： jquery easyui
首先介绍，在jsp种实用EasyUI的组件，必须引入相应的js文件，将EasyUI的js文件拷贝到项目中，在使用的页面引入相应的js文件。

需要引入五个基本的js文件和css样式文件

顺序是这样的
首先引入：<script type="text/javascript" src="easyUI1.3/jquery-1.7.2.min.js"></script> 因为他是基于jquery的，所以这个必须引入，而且是第一个引入，浏览器加载的时候首先加载到它。

其次引入：
<script type="text/javascript" src="easyUI1.3/jquery.easyui.min.js"></script>

然后是国际化文件，中文的
<script type="text/javascript" src="easyUI1.3/locale/easyui-lang-zh_CN.js"></script>

最后css样式
 <link rel="stylesheet" href="easyUI1.3/themes/default/easyui.css" type="text/css"></link>
  <link rel="stylesheet" href="easyUI1.3/themes/icon.css" type="text/css"></link>


文件引入我们可以写自己的dialog了，首先写一个最简单的：

<div id="dd" class="easyui-dialog" title="My Dialog" style="width:400px;height:200px;" data-options="iconCls:'icon-save',resizable:true,modal:true" >  
    第一种dialog   
</div> 

效果是这样的：
第二讲 EasyUI控件dialog的使用 - zghbwjl - zghbwjl的博客
这也是一种写法

还有一种写法是这样的：
<script type="text/javascript">
  $(function(){
  $('#d_').dialog({   
     title: 'My Dialog2',   
     width: 400,   
     height: 200,   
     closed: false,   
     cache: false,   
     modal: true  
  });   
    });
 
  </script>

 <div id="d_">  
    第二种dialog写法   
</div> 

通过id获得div然后给他设置
效果图：
第二讲 EasyUI控件dialog的使用 - zghbwjl - zghbwjl的博客


这是纯粹的dialog，那么我想在dialog上面加toolbar怎么加呢？

这样实现，也是两种方式，第一种：
<div class="easyui-dialog" style="width:600px;height:300px"
data-options="title:'My Dialog3',toolbar:'#tb',modal:true">
第一种 有toolbar的dialog
</div>
  <div id="tb">
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true">edit</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-help',plain:true">help</a>
</div>
 效果图：
第二讲 EasyUI控件dialog的使用 - zghbwjl - zghbwjl的博客
 

 

第二种：
<div class="easyui-dialog" style="width:600px;height:300px"
data-options="title:'My Dialog4',modal:true,
toolbar:[{
text:'Edit',
iconCls:'icon-edit',
handler:function(){alert('edit')}
},{
text:'Help',
iconCls:'icon-help',
handler:function(){alert('help')}
}]">
第二种 有toolbar的dialog
</div>
效果图：

第二讲 EasyUI控件dialog的使用 - zghbwjl - zghbwjl的博客


那么我想加按钮怎么加呢？

如下：

第一种：
<div class="easyui-dialog" style="width:600px;height:300px"
data-options="title:'My Dialog5',buttons:'#bb',modal:true">
有按钮的第一种dialog的写法
</div>
<div id="bb">
<a href="#" class="easyui-linkbutton" οnclick="alert('save')">Save</a>
<a href="#" class="easyui-linkbutton" οnclick="alert('close')">Close</a>
</div>
效果图：
第二讲 EasyUI控件dialog的使用 - zghbwjl - zghbwjl的博客
 

 

第二种：
<div class="easyui-dialog" style="width:600px;height:300px"
data-options="title:'My Dialog6',modal:true,
buttons:[{
text:'Save',
handler:function(){
alert('save');
}
},{
text:'Close',
handler:function(){
alert('close');
}
}]">
有按钮的第二种dialog的写法
</div>
  
效果图：
第二讲 EasyUI控件dialog的使用 - zghbwjl - zghbwjl的博客

完整的代码：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    
  <script type="text/javascript" src="easyUI1.3/jquery-1.7.2.min.js"></script>
  <script type="text/javascript" src="easyUI1.3/jquery.easyui.min.js"></script>
  <link rel="stylesheet" href="easyUI1.3/themes/default/easyui.css" type="text/css"></link>
  <link rel="stylesheet" href="easyUI1.3/themes/icon.css" type="text/css"></link>
  <script type="text/javascript" src="easyUI1.3/locale/easyui-lang-zh_CN.js"></script>
  
  
  <script type="text/javascript">
  $(function(){
  $('#d_').dialog({   
     title: 'My Dialog2',   
     width: 400,   
     height: 200,   
     closed: false,   
     cache: false,   
     modal: true  
  });   
    });
 
  </script>
  </head>
  
  <body>
  <div id="dd" class="easyui-dialog" title="My Dialog" style="width:400px;height:200px;" data-options="iconCls:'icon-save',resizable:true,modal:true" >  
    第一种dialog   
</div> 
<div id="d_">  
    第二种dialog写法   
</div> 
 
  <div class="easyui-dialog" style="width:600px;height:300px"
data-options="title:'My Dialog3',toolbar:'#tb',modal:true">
第一种 有toolbar的dialog
</div>
<div id="tb">
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true">edit</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-help',plain:true">help</a>
</div>
<div class="easyui-dialog" style="width:600px;height:300px"
data-options="title:'My Dialog4',modal:true,
toolbar:[{
text:'Edit',
iconCls:'icon-edit',
handler:function(){alert('edit')}
},{
text:'Help',
iconCls:'icon-help',
handler:function(){alert('help')}
}]">
第二种 有toolbar的dialog
</div>
 
  <div class="easyui-dialog" style="width:600px;height:300px"
data-options="title:'My Dialog5',buttons:'#bb',modal:true">
有按钮的第一种dialog的写法
</div>
<div id="bb">
<a href="#" class="easyui-linkbutton" οnclick="alert('save')">Save</a>
<a href="#" class="easyui-linkbutton" οnclick="alert('close')">Close</a>
</div>
<div class="easyui-dialog" style="width:600px;height:300px"
data-options="title:'My Dialog6',modal:true,
buttons:[{
text:'Save',
handler:function(){
alert('save');
}
},{
text:'Close',
handler:function(){
alert('close');
}
}]">
有按钮的第二种dialog的写法
</div>
 
  </body>
</html>


运行你会发现，首先出来的是嗲；dialog2，为什么呢？因为它是最后加载的？只能这样理解，哈哈...
wuyongde0922
关注
专栏目录
EasyUI Dialog组件
qq_31781327的博客
04-23 326
**1.对话框常用属性介绍** 1.1dialog组件定义：jQuery EasyUI 对话框（Dialog）用法与EasyUI的窗口用法极为相似，最终的效果图仅与窗口的效果图相差几个按钮，该对话框是一种特殊类型的窗口，它在顶部有一个工具栏，在底部有一个按钮栏。 1.2dialog对话框组件常用属性 属性名 属性值类型 描述
easyUI之dialog控件和form控件的使用，大厂面试必备技能问题
最新发布
m0_60635609的博客
04-15 911
正式学习前端大概 3 年多了，很早就想整理这个书单了，因为常常会有朋友问，前端该如何学习，学习前端该看哪些书，我就讲讲我学习的道路中看的一些书，虽然整理的书不多，但是每一本都是那种看一本就秒不绝口的感觉。以下大部分是我看过的，或者说身边的人推荐的书籍，每一本我都有些相关的推荐语，如果你有看到更好的书欢迎推荐呀。大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。// 联想到$(“#dd”).dialog(“open”);二，form（表单）控件的使用。
easyui-dialog实例
01-15
easyui 做的 dailog简单技术。
EasyUI Dialog控件
李守宏
04-30 3791
代码Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--> Dialog $(function(){ $('#dd').dialog({
easyUI之dialog控件和form控件的使用
m0_60666841的博客
04-11 805
在book.js中增加一列来放操作，在操作列的每一行放入单元格放修改的a标签代码如下：field : ‘操作’,title : ‘操作’,return ‘效果如下：一，dialog（对话框窗口）控件的使用在userManage.jap中添加如下代码为修改添加点击事件：当点击人员信息维护时对话框窗口会自动弹出，因此添加closed属性为true，默认为关闭closed：定义是否可以关闭的窗口同时在book.js中写如下方法，实现当点击修改时弹出对话框窗口。
easyui dialog 一文读懂dialog基本使用方法
热门推荐
前端小白
12-05 1万+
easyui dialog 打开方法，默认关闭。设置模态框
jquery easyui滚动条部分设置
阳光之线
09-12 3473
在使用dialog插件时，默认是屏幕居中的，但是当页面出现滚动条时，dialog并没有随着滚动条往下滚动，这时就需要用户滑动滚动条来定位dialog，这不人性化，在说出解决方案前先来普及一下jquery关于定位的几个方法 [javascript] view plaincopy //获取浏览器显示区域的高度    $(window).
easyUI框架之Dialog、Layout、DateBox、Pagination
哈哈
07-28 539
二、引入使用easyUI引入js文件的顺序不要搞反了，有的童鞋经常会发现我引入了js文件为什么会报一些莫名奇妙的问题，最多的应该就是未定义undefined，其实大多时候都是js文件引入顺序的问题。我们知道网页在加载我们的index页面的时候，会从上往下以此加载，那么有一些js文件依赖jquery文件，顺序搞错了的话，将会先加载其他的js，最后再加载jquery，这就导致出现上述未定义的问题，所以要注意引入的顺序
easyUi：其他插件的使用
小王的博客
09-16 420
easyUi的使用
jQuery EasyUI API 中文文档 - Dialog对话框
10-28
jQuery EasyUI API 中文文档 - Dialog对话框使用说明，需要的朋友可以参考下。
easyui1.3控件
10-14
2. **基础控件**：EasyUI 包含了如按钮（button）、文本框（textbox）、下拉框（combobox）、复选框（checkbox）、单选按钮（radio）等常见的HTML表单元素的增强版本，提供更丰富的交互和样式。 3. **布局组件**：...
easyUI dialog弹出框动态计算数量和价格总结
qq_41945261的博客
03-29 614
最近在做一个项目时用到了easyUI 弹出款动态添加服务项目和计算价格，因为刚接触easyUI所以好多都是现查的文档，还有一些是问的老员工，很感谢老员工提供的解决思路，终于一路磕磕绊绊实现了功能，现在把功能实现记录下来以便回顾 完成图效果是这样的 这里面可以分为几个部分 ，点击添加打开弹窗展示服务项目，点击添加把数据添加到已选服务项目中，再次点击的时候如果服务项目存在就会增加数量，计算原价...
EasyUI 框架中 Dialog 对话框
强者惜字如金，弱者废话连篇！
01-05 324
EasyUI 框架中 Dialog 对话框 <!-- html文件 --> <!-- 按钮 --> <a href="#" class="easyui-linkbutton" onclick="openAdd1()" plain="true">选择商品</a> <!-- 弹框 --> <div id="wu-dialog-1" class="easyui-dialog" data-options="clos
easyui的学习笔记--------dialog的使用
lks的博客
03-11 2771
dialog的使用 为了方便以后的使用记录一下easyui的使用： 功能：点击链接，弹出一个dialog的框 建议：将其中的页面和js分离开，尽量通过js控制页面中的展示的信息和样式等，降低页面的简洁性； 弹出 var dg; function openDiaLog() { dg = $('#dg').datagrid({ me
easyui 更改dialog弹出的位置
weixin_30297281的博客
02-09 630
方法一： 在弹出dialog的时候不用$('#dialogDiv').dialog('open');打开。用$('#dialogDiv').window('open');打开。再用window的resize方法重新布局就可以了。类似：var top = $("#struBtn").offset().top + 30;var left = $("#struBtn").offset().l...
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
easyUI dialog 弹窗 居中显示
gtlishujie的博客
02-08 6448
自从使用了jquery easyUI 以来对于dialog弹出框的显示位置一直是块心病，想了多种办法处理。总是觉得不是最好的，今天看见网上一博客局的挺有道理的，就运用到自己的项目中试了试，觉的挺好就记录下来分享下，具体如下：默认情况下应该是在屏幕居中显示的。但是有的时候没有居中只要重新纠正下就可以了$('#add_dialog').dialog('open'); //打开添加对话框 $('#add...
对于JqueryEasyUI中dialog隐藏，只有点击按钮后才显示的书写方法
Java_Code
06-29 435
首先 在当前页面中书写隐藏的DIV eg: 这个地方要注意样式中要书写 display：none 然后在js中书写下面的代码 roleDialog = $('#roleDialog').show().dialog({ modal : true, title : '关联角色', modal: true, closable: true, ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值