jquery easyui dialog可以两种方式使用
1)定义div,使用iframe
<div id="openRoleDiv" class="easyui-window" closed="true" modal="true" title="标题" style="width:500px;height:350px;">
<iframe scrolling="auto" id='openXXXIframe' frameborder="0" src="" style="width:100%;height:100%;"></iframe>
</div>
需要显示dialog时使用以下2行即可
$('#openXXXIframe')[0].src='xxxEdit.action';
$('#openRoleDiv').dialog('open');
2)不使用iframe(请参见easyui的demo)
<div id="dd" style="padding:5px;width:400px;height:200px;">
Dialog Content.
</div>
$(function(){
$('#dd').dialog({
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');
}
}]
});
});
打开用$('#dd').dialog('open');
dialog方法和属性的使用
a)setTitle修改dialog的标题$('#xxxDivId').dialog('setTitle', 'New Title');
查看easyui的代码发现setTitle的实际执行内容为
$('#xxxDivId').panel('options').title = 'New Title';
$('#xxxDivId').panel("header").find("div.panel-title").html('New Title');
b)options的使用
var tt = $('#xxxDivId').panel('options').closable; //这里是panel,不是dialog
alert(tt);//返回该对话框是否可以关闭
c)定位
$('#p').panel('move',{
left:100,
top:100
});
分享到:
相关推荐
这份文档分为几个主要部分,涵盖了EasyUI的核心概念、基本用法和组件的详细说明。 1. **基础概念**:这部分通常会介绍如何引入 jQuery 和 jQuery EasyUI 库到项目中,以及如何设置基本的页面结构和样式。此外,还会...
本教程“jQueryEasyUI从零开始学源码part1”旨在帮助初学者深入理解jQuery EasyUI的工作原理,通过源码分析来提升开发技能。 首先,我们需要了解jQuery EasyUI的基础概念。jQuery是一个轻量级的JavaScript库,简化...
jQuery EasyUI 包括以下几个主要部分: - **JS 文件**:这是框架的基础,包含了所有组件的核心功能。主要文件有 `jquery.easyui.min.js`,它是整个库的压缩版本,包含了所有组件的代码。 - **CSS 样式表**:这些...
在该压缩包中,有几个关键文件和目录: 1. `jquery.easyui.min.js`:这是jQuery EasyUI的核心库,已经进行了压缩和混淆,以减小文件大小并提高页面加载速度。它包含了一系列的UI组件,如对话框(dialog)、表单...
在jQuery EasyUI中,API主要包括以下几个核心部分: 1. **基本概念**:jQuery EasyUI是建立在jQuery库之上的,所以首先要熟悉jQuery的基本操作,如选择器、事件处理、DOM操作等。同时,EasyUI将一些常见的用户界面...
它主要由以下几个部分组成: 1. **组件(Widgets)**:包括布局(Layout)、表格(Grid)、表单(Form)、菜单(Menu)、对话(Dialog)、面板(Panel)等,这些组件覆盖了日常开发中常见的交互元素。 2. **数据...
这个文件通常会包含以下几个主要部分: 1. **jQuery集成**:EasyUI是基于jQuery构建的,所以首先会导入jQuery库,然后在其基础上扩展各种UI组件。 2. **核心函数和API**:这是EasyUI的核心部分,包括数据处理、...
Dialog 组件的方法扩展自 Window 组件,并新增了几个方法用于特定操作。 - **window('dialog')**: 返回外部窗口对象,可以用于获取对话框的 jQuery 对象。 - **$.fn.window.defaults**: 可以重写对话框的默认配置...
"jQuery EasyUI 3.1中文帮助手册"提供了详细的组件用法、示例代码以及常见问题解答,是学习和使用EasyUI的重要参考。初学者可以通过阅读手册,逐步了解和掌握每个组件的使用方法,并通过实践加深理解。 总之,...
以下是其中几个关键组件的详解: 1. Accordion(可折叠标签) Accordion组件允许将多个面板组织在一起,每个面板可以被折叠或展开,以节省页面空间。在实例中,你可以创建一个包含多个标题的Accordion,并通过设置...
版本1.5.2是该框架的一个稳定版本,包含了前几个版本的改进和优化。 总的来说,jQuery EasyUI 是一个高效、灵活的前端开发工具,它大大简化了构建用户界面的过程,使开发者能够专注于应用程序的业务逻辑,而不是UI...
在学习和使用 jQuery EasyUI 时,需要注意以下几点: 1. 熟悉 HTML 结构:EasyUI 的组件通常需要特定的 HTML 结构才能正确工作,了解这些结构能避免很多错误。 2. CSS 和主题:EasyUI 提供了一套默认的 CSS 样式,但...
在jQuery EasyUI v1.3.5的官方API中文版中,开发者可以找到关于框架所有功能的详细文档,这些文档通常包括以下几个方面: 1. **基础概念**:首先,你需要理解jQuery EasyUI的基础概念,如主题、CSS样式、JavaScript...
在jQuery EasyUI 1.12中,我们主要可以关注以下几个核心知识点: 1. **基本使用**:jQuery EasyUI 提供了一系列的JavaScript函数和CSS样式,通过简单的调用这些函数,开发者可以快速地生成如表格、表单、对话框、...
在压缩包内的文件名称列表中,有以下几个关键文件: 1. `index.html`:这是项目的主页面,通常包含了HTML结构,并引用了EasyUI所需的CSS和JS文件,以及可能的数据源链接。 2. `css`:这个文件夹包含了EasyUI的样式...
总的来说,要创建一个使用jQuery EasyUI的通用查询组件,需要对jQuery、EasyUI组件、以及可能的第三方插件如My97DatePicker有深入理解,并能结合前端和后端技术实现数据交互。这样的组件提高了代码的复用性,简化了...
它主要由几个部分组成,包括布局(Layout)、表格(Grid)、对话框(Dialog)、表单(Form)、菜单(Menu)、按钮(Button)等组件,以及数据绑定、分页、排序等功能。这些组件都基于HTML5和CSS3,实现了丰富的交互...
jQuery EasyUI 的中文版 API 文档(CHM 格式)通常包含以下几部分: 1. **快速入门**:介绍如何引入 EasyUI 脚本和 CSS 文件,以及基本的使用方法。 2. **组件介绍**:详细讲解每个组件的 HTML 结构、属性、事件、...
在深入探讨之前,我们先来理解一下几个关键概念: 1. **jQuery**:这是一个轻量级的JavaScript库,简化了HTML文档遍历、事件处理、动画以及Ajax交互,是Web开发中的常用工具。 2. **EasyUI**:基于jQuery的UI框架...
在`jquery-easyui-1.2.5`压缩包中,主要包含以下几个部分: 1. `dist`目录:这是编译后的发布版本,包含了jQuery EasyUI的CSS样式文件、JavaScript库文件以及本地化资源文件。其中,`easyui.css`和`easyui.min.css`...