我封装的jqueryui的弹出框代码
function DialogHelper() {
/** **********私有属性*********** */
var title = "提示消息";
// 设置消息正文
var content = "";
// 设置按钮
var buttons = {
'确定' : function() {
$(this).dialog('close');
}
};
var width = 250;
var height = 154;
var modal = false;
var dialogDiv = $("<div><p><span class=\"ui-icon ui-icon-info\" style=\"float: left; margin: 0 7px 20px 0;\"></span></p></div>");
/** **********getter和setter*********** */
var setTitle = function(val) {
title = val;
}
var getTitle = function() {
return title;
}
var setContent = function(val) {
content = val;
}
var getContent = function() {
return content;
}
var setButtons = function(val) {
buttons = val;
}
var getButtons = function() {
return buttons;
}
var setWidth = function(val) {
width = val;
}
var getWidth = function() {
return width;
}
var setHeight = function(val) {
height = val;
}
var getHeight = function() {
return height;
}
var setModal = function(val) {
modal = val;
}
var getModal = function() {
return modal;
}
var setDialogDiv = function(val) {
dialogDiv = val;
}
var getDialogDiv = function() {
return dialogDiv;
}
/** **********open方法,弹出对话框*********** */
var open = function() {
if (arguments.length == 1 && (typeof arguments[0] == "string"))
setContent(arguments[0]);
if (arguments.length == 2 && (typeof arguments[0] == "string")
&& (typeof arguments[1] == "string")) {
setTitle(arguments[0]);
setContent(arguments[1]);
}
var dlg = dialogDiv.clone(); // 这个克隆很重要,否则反复添加正文。
dlg.children().filter("p").html(
dialogDiv.children().filter("p").html()
+ getContent());
dlg.dialog({
autoOpen : true,
show : 'scale',
hide : 'scale',
position : 'center',
height : getHeight(),
width : getWidth(),
modal : getModal(),
title : getTitle(),
buttons : getButtons()
});
}
/** **********对外界暴露一些公共方法*********** */
return {
setTitle : setTitle,
setContent : setContent,
setButtons : setButtons,
setWidth : setWidth,
setHeight : setHeight,
setModal : setModal,
setDialogDiv : setDialogDiv,
open : open
}
// TODO:可能有内存泄露
}
使用方法
<script type="text/javascript" src="${webroot }/js/jquery-1.6.2.min.js"></script>
<link rel="stylesheet" href="${webroot }/js/jqueryui/css/ui-lightness/jquery-ui-1.8.16.custom.css" />
<script type="text/javascript" src="${webroot }/js/jqueryui/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="${webroot }/js/dialoghelper.js"></script>
<script type="text/javascript">
$(function(){
var dialogHelper = new DialogHelper();
dialogHelper.open("测试");
});
</script>
分享到:
相关推荐
弹出框jquery.弹出框jquery.弹出框jquery.弹出框jquery.弹出框jquery.弹出框jquery.弹出框jquery.弹出框jquery.弹出框jquery.弹出框jquery.弹出框jquery.弹出框jquery.弹出框jquery.弹出框jquery.弹出框jquery.弹出...
jQuery UI Messager是一款基于jQuery和jQuery UI库的插件,用于在Web应用程序中创建美观、功能丰富的消息框。它提供了一种优雅的方式来显示各种类型的通知,如警告、错误、信息和成功消息,增强了用户交互体验。这个...
当我们谈论“Jquery自带的弹出框效果”时,实际上是指jQuery UI中的几个对话框组件,如`dialog()`函数。这些弹出框不仅提供了基本的提示功能,还能实现复杂的交互式窗口,为用户界面添加丰富的用户体验。 1. **...
在提供的文件`jqueryUI.js`中,就包含了jQuery UI库的部分功能,其中包括弹出框的实现。 **jQuery UI Dialog** jQuery UI的`dialog`方法可以将任何HTML元素转换为一个交互式的弹出框。要使用它,首先需要在页面上...
通过实践这些代码,你将能更深入地理解jQuery UI弹出层的工作原理,提升你在网页交互设计上的能力,为创建更加生动、友好的用户体验打下基础。此外,这也有助于理解前端开发中的“分离关注点”原则,即HTML负责结构...
"jQuery div 弹出框"是指使用jQuery技术来创建一个可自定义的、浮动于页面上的对话框或提示框,通常称为模态窗口。这种弹出框通常用于显示警告、确认信息、详细内容或表单等。以下将详细讲解如何实现jQuery div弹出...
4. **封装和模块化**:将弹出框功能封装为一个独立的插件,遵循良好的编程实践,便于其他项目复用和维护。 5. **性能优化**:避免过度使用动画导致页面性能下降,合理利用事件委托和节流(throttle)或防抖(debounce)...
5. API设计:为了方便复用和扩展,可以将弹出框的逻辑封装成一个可配置的函数或对象,提供参数来定制弹出框的样式和行为。 总的来说,"jquery弹出框"项目涉及了jQuery库的使用、DOM操作、事件处理、CSS样式和动画...
4. **jQuery插件**:为了实现更丰富的弹出框效果,开发者经常使用jQuery插件,如jQuery UI中的Dialog组件或Bootstrap的Modal。这些插件提供了更多的定制选项,如拖动、大小调整、自动关闭等功能。 5. **自定义样式*...
jquery弹出注册框代码是一款点击登录或者注册按钮后,渐变弹出一个对话框,可以直接登录或者注册,注册框也可自动判断输入正确与否。 jquery弹出注册框代码注册...jquery弹出注册框代码登录演示图: 点击查看演示:
这段CSS代码将弹出框定位在屏幕中央,并添加了阴影效果,使得其更加突出。关闭按钮的位置被设置在右上角,且无背景色和边框,点击即可触发关闭动作。 最后,我们使用jQuery来控制弹出框的显示和关闭。首先,确保...
`jQuery投资网站弹出框确认表单代码.zip`提供的资源正解决了这个问题,它包含了一个基于jQuery和layer插件的弹出框确认表单。这个功能允许用户在进行重要操作前进行二次确认,增加了用户体验的友好性和安全性。 ...
jQuery Dialog 是一个功能强大的弹出框插件,它是 jQuery UI 库的一部分,广泛应用于网页交互设计中,提供美观且可自定义的对话框效果。在实际项目中,它以其高效和易用性受到开发者的喜爱。 Dialog 弹出框的核心...
- jQuery UI库提供了一个强大的`dialog`组件,可以轻松创建具有标准样式和行为的弹出框。首先需要引入jQuery UI的CSS和JS文件。 - 使用示例: ```javascript $("#dialog").dialog({ autoOpen: false, // 默认不...
本资源"jQuery点击显示弹出框关闭按钮代码.zip"包含了一个利用jQuery实现的弹出框功能,该功能在用户点击某个元素时显示一个弹出框,并且弹出框内带有关闭按钮。下面我们将详细探讨相关的jQuery知识和实现步骤。 ...
**jQuery UI Multiselect** 是一个基于 **jQuery UI** 框架的插件,它针对HTML的`<select>`元素提供了增强的多选功能。这个控件设计得更加直观...在实际项目中,结合jQuery UI的其他组件,可以构建出更强大的用户界面。
本文将深入探讨如何利用jQuery创建美观的弹出框样式,以提升用户体验。 首先,让我们理解“弹出框”的概念。在网页设计中,弹出框是一种常见的用户界面元素,用于在不离开当前页面的情况下显示额外信息或交互功能。...
XUI的组件设计充分考虑了触摸操作的友好性,包括滑动面板、下拉菜单、弹出框等,适合开发响应式和触摸友好的移动应用。XUI还支持自定义主题,使开发者可以轻松打造出与品牌风格一致的移动界面。 以上四个框架均是...
在本文中,我们将深入探讨jQuery UI中的弹出层(Dialog)应用实例,这是一个非常实用的交互元素,常用于展示信息、提示用户或者进行简单的表单输入。jQuery UI库提供了丰富的功能和可定制化选项,使得创建弹出层变得...
《jQuery UI 1.7源代码深度解析》 jQuery UI是基于jQuery库的交互式用户界面组件集合,它为Web开发者提供了丰富的可定制组件,包括日期选择器、对话框、拖放功能、滑块等。在本文中,我们将深入探讨jQuery UI 1.7的...