封装Dialog 方法
Step1:引入必要的 Css 文件 :jquery-ui-1.10.0.custom.css
Step2:引入必要的JS文件:jquery-1.9.0.min.js 和 jquery-ui-1.10.0.custom.min.js
Step3:定义自己的JS文件:
重写 Dialog 方法
function addWindow(divId, title, url, heightVal, widthVal, closeMethod) {
$('#' + divId).dialog({
title: title,
modal: true,
close:function(){
$('#' + divId).empty();
if (closeMethod) {
closeMethod();
} else {
$(this).dialog('destroy');
}
},
open: function(){
lockScrollbar($(this));
$(this).focus();
//load popup screen, in case timeout, force parent screen redirect to timeout screen.
$(this).load(encodeURI(url), function (responseText) {
if (responseText.indexOf('timeoutdiv') != -1) {
$('#' + divId).html("");
document.location.href = $("#contextPath").val() +"timeout.action";
}
});
},
height: heightVal,
width: widthVal
});
}
function lockScrollbar(div){
$(div).bind('mousewheel DOMMouseScroll', function(e) {
var scrollTo = null;
if (e.type == 'mousewheel') {
//IE/Opera
scrollTo = (e.originalEvent.wheelDelta * -1);
}
else if (e.type == 'DOMMouseScroll') {
//Mozilla
scrollTo = 40 * e.originalEvent.detail;
}
if (scrollTo) {
e.preventDefault();
$(this).scrollTop(scrollTo + $(this).scrollTop());
}
});
}
使用封装的Dialog方法:
step1:定义一个 DIV 隐藏起来
<div id="createInternationalDiv" class="hide"></div>
step2:定义一个按钮
<input type="button" class="btn btn-danger" value="<s:text name='rsc.button.createCode' />" onclick="createCode();"/>
step3:定义一个按钮单击函数:
function createCode() {
addWindow('createInternationalDiv', '标题', 'international.create.input.action', 500, 950);
}
参考网址: Jquery ui 中文手册 http://www.jqueryui.net/
分享到:
相关推荐
总的来说,jQuery UI为开发者提供了强大且易于使用的用户界面组件,通过`jquery-ui.css`和`jquery-ui.js`,我们可以快速构建交互性丰富的Web应用,提高用户的操作体验。然而,合理地配置和优化这两个文件,以适应...
jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-...
这个压缩包包含两个关键文件:`jquery-ui-1.8.16.custom.min.js` 和 `jquery-ui-1.8.16.custom.css`,这些都是jQuery UI的特定版本,即1.8.16。这个版本在当时是一个广泛使用的稳定版本,提供了丰富的功能和组件。 ...
总的来说,`jquery-ui-1.8.2.custom.min.js`和`jquery-ui-1.8.4.custom.css`是jQuery UI早期版本的实例,它们展示了如何通过定制和最小化来满足特定项目的需要。尽管版本较旧,但理解这些文件背后的原理和用途,有助...
jquery-ui-日期框扩展成时间框 jquery-ui时间框 基于别人的代码进行修改 jquery-ui-1.8.16.custom.css文件末尾加入以下代码 .ui-timepicker-div .ui-widget-header{ margin-bottom: 8px; } .ui-timepicker-div dl{ ...
在这个主题中,我们将深入探讨的是 `jquery-ui-1.10.2.custom` 版本,这是一个定制化的版本,包含了对 jQuery 1.9.1 的支持。 首先,让我们从 `jquery-ui-1.10.2.custom` 的核心组件开始。这个版本提供了包括但不...
《jQuery UI与jQuery插件深度解析——以jquery-ui-1.8.2.custom.min.js为例》 在Web开发领域,jQuery库以其简洁易用的API和强大的功能深受开发者喜爱。而jQuery UI作为jQuery的一个扩展,提供了丰富的用户界面组件...
在本文中,我们将深入探讨jQuery UI的核心功能,尤其是标题所提及的`jquery-ui.min.js`文件,以及其在实际开发中的应用。 首先,`jquery-ui.min.js`是jQuery UI的压缩和优化版本,用于提高页面加载速度并减少网络...
${ctx}/plugins/jquery-ui-1.11.2/jquery-ui.css" > ${ctx}/plugins/jquery-ui-1.11.2/external/jquery/jquery.js"> ${ctx}/plugins/jquery-ui-1.11.2/jquery-ui.js"> ${ctx}/plugins/jquery-ui-1.11.2/jquery-ui-...
其中,主文件(如 `jquery-ui.js` 或 `jquery-ui.min.js`)包含了所有组件和功能。此外,还可能有按功能分隔的单独文件,如 `draggable.js`、`resizable.js` 等,这些文件分别对应拖放、可调整大小等交互功能。...
jquery-ui-1.10.3.min.js
在我们讨论的文件 "jquery-ui-1.9.2.custom.min.js" 中,我们可以看到这是该库的一个特定版本——1.9.2的自定义最小化版本。这个文件的核心在于“定制”和“最小化”,这两个特点使得它在实际项目中更具灵活性和效率...
jquery-ui.css
jquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-ui
首先,`jquery-ui-1.8.18.custom.min.js` 是 jQuery UI 的一个特定版本,1.8.18 表示该版本发布于2012年,是jQuery UI的一个稳定版本。"custom" 指的是这个版本是经过定制的,意味着开发者可能根据项目需求,只包含...
在标题"jquery-ui-1.12.1.custom_jqueryui_"中,"custom"一词暗示了这是一个自定义版本,意味着开发者可能根据需求选择了特定的组件和主题,以优化项目中的性能和功能。 描述中的"jquery ui 1.12.1 for html"进一步...
jquery-ui-1.10.3.js 版本 1积分下载 jquery-ui-1.10.3.js 版本 1积分下载 jquery-ui-1.10.3.js 版本 1积分下载
<link rel="stylesheet" href="jquery-ui-1.10.0.custom/css/ui-lightness/jquery-ui.min.css"> <script src="jquery.js"> <script src="jquery-ui-1.10.0.custom/js/jquery-ui.min.js"> 基本对话框"> 这是一...
这个名为 "jquery-ui-1.10.4.custom" 的压缩包文件,很显然是一个自定义版本的 jQuery UI,版本号为 1.10.4。在本文中,我们将深入探讨 jQuery UI 的核心功能、使用场景以及其自定义版本的特性。 ### jQuery UI 的...