Jquery EasyUI Dialog的使用

最新推荐文章于 2024-03-18 21:28:52 发布
最新推荐文章于 2024-03-18 21:28:52 发布
阅读量7.8k 收藏
点赞数
分类专栏： jQuery 文章标签： easyui 对话框 国际化 jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010202304/article/details/44949769
版权

jquery easyui设置对话框，具体实现步骤如下：

首先第一步肯定是先新建一个JSP页面(跳过)

第二步是引入所需的js和css文件：

<%-- EsayUI样式表--%>
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
<%-- EasyUI中的图片样式--%>
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<%--jquery基础库--%>
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<%-- EasyUI基础库--%>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<%-- EasyUI的国际化中文包--%>
<script src="../locale/easyui-lang-zh_CN.js" type="text/javascript"></script>

 

第三步html代码：

<body>
 <h1>Dialog</h1>
 <div style="margin-bottom: 10px;"><a href="#" οnclick="open1()">open1</a>
  <a href="#" οnclick="close1()">close1</a>
 </div>
 <div id="dd" icon="icon-save" style="padding: 5px; width: 400px; height: 200px;">
  <p>dialog content.</p>
  <p>dialog content.</p>
  <p>dialog content.</p>
  <p>dialog content.</p>
  <p>dialog content.</p>
  <p>dialog content.</p>
  <p>dialog content.</p>
  <p>dialog content.</p>
 </div>
</body>

第四步jquery代码：

<script>
   $(function(){
        $('#dd').dialog({
      	    title:'对话框',
      	    collapsible:true, //设置可折叠
      	    minimizable:true,
      	    maximizable:true,
      	    resizable:true,
   
   	    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',
           handler:function(){
         $('#dd').dialog('close');
           }
      }]
        });
   });
   function open1(){
        $('#dd').dialog('open');
   }
   function close1(){
        $('#dd').dialog('close');
   }
</script>

效果图：

事件

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

 

方法

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

 

 

 


 

Je_WangZhe
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Easyui通过Dialog打印.rar
12-21
将Easyui的DataGrid内容放入Dialog中，打印该Dialog
JQueryEasyUI 组件dialog
寂寞的一只狗的博客
03-11 524
1.dialog组件定义 jQuery EasyUI 对话框（Dialog）用法与EasyUI的窗口用法极为相似，最终的效果图仅与窗口的效果图相差几个按钮， 该对话框是一种特殊类型的窗口，它在顶部有一个工具栏，在底部有一个按钮栏。 继承关系：window 和linkbutton 创建实例标签元素：dialog组件使用标签元素定义 2.dialog组件定义
easyUI之dialog控件和form控件的使用，成功入职阿里月薪45K
最新发布
m0_60750088的博客
03-18 789
整理面试题，不是让大家去只刷面试题，而是熟悉目前实际面试中常见的考察方式和知识点，做到心中有数，也可以用来自查及完善知识体系。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》[外链图片转存中…(img-THmHAVGv-1710768520717)]
jquery easyui dialog的几个使用问题
bbrruucc的博客
09-15 563
jquery easyui dialog可以两种方式使用 1)定义div,使用iframe 需要显示dialog时使用以下2行即可 $('#openXXXIframe')[0].src='xxxEdit.action'; $('#openRoleDiv').dialog('open'); 2)不使用iframe(请参见easyui的demo) Dia...
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（对话框窗口）
Lzxccas的博客
06-28 3947
Dialog（对话框窗口）Dialog（对话框窗口）+Window（窗口）+Panel（面板）Dialog属性Dialog事件+方法Window属性,事件,方法Panel属性,事件,方法案列 实现过程 Dialog（对话框窗口）+Window（窗口）+Panel（面板） 今天我们涉及到的内容较多 我们一个一个整理 但我们着重学习的还是Dialog 该对话框是一种特殊类型的窗口，它在顶部有一个工具栏，在底部有一个按钮栏。对话框窗口右上角只有一个关闭按钮用户可以配置对话框的行为显示其他工具,如collaps
Jquery Easyui对话框组件Dialog使用详解（14）
10-20
主要为大家详细介绍了Jquery Easyui对话框组件Dialog的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
jQuery EasyUI Dialog拖不下来如何解决
11-23
使用jquery easyui可以很容易的创建很炫的前台页面，最近在使用过程中发现dialog存在一个问题：  用户将dialog拖出页面后，dialog就不能拖下来了，除非要重新打开页面，这个问题对于用户体验来说是非常重要的， ...
jQuery前端框架easyui使用Dialog时bug处理
10-25
本文介绍了在jQuery前端框架easyui开发UI时，使用Dialog时发现遮罩无法覆盖页面内容，而且对话框也显示不出来，经过一番研究，才发现问题所在，这里分享给大家，有相同情况的小伙伴可以参考下
修改jquery中dialog的title属性方法(推荐)
10-21
下面小编就为大家带来一篇修改jquery中dialog的title属性方法(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
easyui 提示框组件_Jquery Easyui对话框组件Dialog使用详解（14）
weixin_39636540的博客
12-20 339
Dialog对话框组件依赖于Window(窗口)组件、linkbutton 组件加载方式Class加载title="弹出框"data-options="iconCls:'icon-add',resizable:true,modal:true"style="width: 400px;height: 200px;">弹出框内容JS调用加载弹出框内容data-options="iconCls:'i...
jquery-easyui-打印
01-21
实现javascript打印功能，打印整个页面就很简单，但如果指定打印某一个区域就有点难点，这里有一个jQuery插件PrintArea可实现打印页面某区域功能。 使用说明 需要使用jQuery库文件和PrintArea库文件
Easyui使用Dialog打印
05-20
将Easyui的DataGrid内容放入Dialog中，打印该Dialog
jquery easyUI dialog事件
xiaozhu0301的博客
07-09 4674
扩展自$.fn.window.defaults。使用$.fn.dialog.defaults重写默认值对象。 该对话框是一种特殊类型的窗口，它在顶部有一个工具栏，在底部有一个按钮栏。对话框窗口右上角只有一个关闭按钮用户可以配置对话框的行为显示其他工具,如collapsible,minimizable,maximizable工具等。 默认弹框是对于浏览器窗口剧中的，如果想对于当前
easyUI-Dialog（对话框窗口）
weixin_34267123的博客
05-03 142
2019独角兽企业重金招聘Python工程师标准>>> ...
easyUI（Dialog组件）
m0_46690290的博客
06-28 791
*DataGrid组件 DataGrid组件简介 示例 目标 实现步骤 界面 效果图 DataGrid组件简介 DataGrid以表格形式展示数据，并提供了丰富的选择、排序、分组和编辑数据的功能支持。DataGrid的设计用于缩短开发时间，并且使开发人员不需要具备特定的知识。它是轻量级的且功能丰富。单元格合并、多列标题、冻结列和页脚只是其中的一小部分功能。 使用过程中可以查看官方文档：DataGrid组件的 依赖关系，案例，DataGrid属性，事件和方法，以及demo 示例 1.两种方式（静态代码块HTM
jQuery-EasyUI学习（十四）Dialog（对话框窗口）
quge_name_harder的博客
11-26 504
一、Dialog（对话框窗口）           该对话框是一种特殊类型的窗口，它在顶部有一个工具栏，在底部有一个按钮栏。对话框窗口右上角只有一个关闭按钮用户可以配置对话框的行为显示其他工具,如collapsible,minimizable,maximizable工具等。 二、例子 &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Trans...
easyui dialog 一文读懂dialog基本使用方法
热门推荐
前端小白
12-05 1万+
easyui dialog 打开方法，默认关闭。设置模态框
EasyUi之dialog对话框
珊瑚海的博客
01-05 851
dialog对话框介绍
easyui dialog 如何修改title
05-25
你可以使用 `setTitle` 方法来修改 EasyUI Dialog 的标题。示例代码如下： ```javascript $('#dlg').dialog('setTitle', 'New Title'); ``` 其中，`#dlg` 是你的 EasyUI Dialog 的 jQuery 选择器，`'setTitle'` 是...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值