封装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-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-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-1.8.16.custom.min.js/jquery-ui-1.8.16.custom.css,我费了好长时间找到的,此东西可以配合jQuery UI开发指南一书使用。
jquery-ui.css、jquery-ui.js
jquery-ui-1.8.2.custom.min.js,jquery-ui-1.8.4.custom.css
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.8.18.custom
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.9.2.custom.min.js
jquery-ui-1.7.3.custom JQUERY UI
jquery-ui-1.7.3.custom 完整开发包
jquery插件jquery-ui-1.8.18.custom.min.js
jquery-ui.css
jquery-ui-1.10.3.js 版本 1积分下载 jquery-ui-1.10.3.js 版本 1积分下载 jquery-ui-1.10.3.js 版本 1积分下载
jqueryUi-181107亲测可用,对应jquery-ui.min.js文件。
jquery-ui-1.10.4.min.js下载
jquery-ui+jquery-ui-rails
呵呵,jquery-ui-1.7.1开发包!好就顶!
jquery-ui样式demo,非常实用,非常适合web开发