`

Jquery-UI Pop Up

阅读更多
封装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.css、jquery-ui.js下载

    总的来说,jQuery UI为开发者提供了强大且易于使用的用户界面组件,通过`jquery-ui.css`和`jquery-ui.js`,我们可以快速构建交互性丰富的Web应用,提高用户的操作体验。然而,合理地配置和优化这两个文件,以适应...

    jquery-ui-1.8.16

    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.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-1.8.2.custom.min.js`和`jquery-ui-1.8.4.custom.css`是jQuery UI早期版本的实例,它们展示了如何通过定制和最小化来满足特定项目的需要。尽管版本较旧,但理解这些文件背后的原理和用途,有助...

    jquery-ui-datepicker中文版

    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-ui-1.10.2.custom` 版本,这是一个定制化的版本,包含了对 jQuery 1.9.1 的支持。 首先,让我们从 `jquery-ui-1.10.2.custom` 的核心组件开始。这个版本提供了包括但不...

    jquery插件jquery-ui-1.8.2.custom.min.js

    《jQuery UI与jQuery插件深度解析——以jquery-ui-1.8.2.custom.min.js为例》 在Web开发领域,jQuery库以其简洁易用的API和强大的功能深受开发者喜爱。而jQuery UI作为jQuery的一个扩展,提供了丰富的用户界面组件...

    jquery-ui.min.js

    在本文中,我们将深入探讨jQuery UI的核心功能,尤其是标题所提及的`jquery-ui.min.js`文件,以及其在实际开发中的应用。 首先,`jquery-ui.min.js`是jQuery UI的压缩和优化版本,用于提高页面加载速度并减少网络...

    jquery-ui-1.11.2日期控件datepicker

    ${ctx}/plugins/jquery-ui-1.11.2/jquery-ui.css" &gt; ${ctx}/plugins/jquery-ui-1.11.2/external/jquery/jquery.js"&gt; ${ctx}/plugins/jquery-ui-1.11.2/jquery-ui.js"&gt; ${ctx}/plugins/jquery-ui-1.11.2/jquery-ui-...

    jquery-ui-1.7.3.custom 完整开发包

    其中,主文件(如 `jquery-ui.js` 或 `jquery-ui.min.js`)包含了所有组件和功能。此外,还可能有按功能分隔的单独文件,如 `draggable.js`、`resizable.js` 等,这些文件分别对应拖放、可调整大小等交互功能。...

    jquery-ui-1.10.3.min.js

    jquery-ui-1.10.3.min.js

    jquery-ui-1.9.2.custom.min.js

    在我们讨论的文件 "jquery-ui-1.9.2.custom.min.js" 中,我们可以看到这是该库的一个特定版本——1.9.2的自定义最小化版本。这个文件的核心在于“定制”和“最小化”,这两个特点使得它在实际项目中更具灵活性和效率...

    jquery-ui.css

    jquery-ui.css

    jquery-uijquery-ui-1.7.3.custom.zip

    jquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-ui

    jquery插件jquery-ui-1.8.18.custom.min.js及css文件

    首先,`jquery-ui-1.8.18.custom.min.js` 是 jQuery UI 的一个特定版本,1.8.18 表示该版本发布于2012年,是jQuery UI的一个稳定版本。"custom" 指的是这个版本是经过定制的,意味着开发者可能根据项目需求,只包含...

    jquery-ui-1.12.1.custom_jqueryui_

    在标题"jquery-ui-1.12.1.custom_jqueryui_"中,"custom"一词暗示了这是一个自定义版本,意味着开发者可能根据需求选择了特定的组件和主题,以优化项目中的性能和功能。 描述中的"jquery ui 1.12.1 for html"进一步...

    jquery-ui-1.10..3.min.js

    jquery-ui-1.10.3.js 版本 1积分下载 jquery-ui-1.10.3.js 版本 1积分下载 jquery-ui-1.10.3.js 版本 1积分下载

    jquery-ui-1.10.0.custom.zip

    &lt;link rel="stylesheet" href="jquery-ui-1.10.0.custom/css/ui-lightness/jquery-ui.min.css"&gt; &lt;script src="jquery.js"&gt; &lt;script src="jquery-ui-1.10.0.custom/js/jquery-ui.min.js"&gt; 基本对话框"&gt; 这是一...

    jquery-ui-1.10.4.custom

    这个名为 "jquery-ui-1.10.4.custom" 的压缩包文件,很显然是一个自定义版本的 jQuery UI,版本号为 1.10.4。在本文中,我们将深入探讨 jQuery UI 的核心功能、使用场景以及其自定义版本的特性。 ### jQuery UI 的...

Global site tag (gtag.js) - Google Analytics