`
kong0itey
  • 浏览: 305861 次
社区版块
存档分类
最新评论

我封装的jqueryui的弹出框代码(原创)

阅读更多
我封装的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.弹出框jquery.弹出...

    jquery ui messager 消息框

    jQuery UI Messager是一款基于jQuery和jQuery UI库的插件,用于在Web应用程序中创建美观、功能丰富的消息框。它提供了一种优雅的方式来显示各种类型的通知,如警告、错误、信息和成功消息,增强了用户交互体验。这个...

    Jquery自带弹出框效果

    当我们谈论“Jquery自带的弹出框效果”时,实际上是指jQuery UI中的几个对话框组件,如`dialog()`函数。这些弹出框不仅提供了基本的提示功能,还能实现复杂的交互式窗口,为用户界面添加丰富的用户体验。 1. **...

    jquery 弹出框

    在提供的文件`jqueryUI.js`中,就包含了jQuery UI库的部分功能,其中包括弹出框的实现。 **jQuery UI Dialog** jQuery UI的`dialog`方法可以将任何HTML元素转换为一个交互式的弹出框。要使用它,首先需要在页面上...

    jQuery UI弹出层应用实例

    通过实践这些代码,你将能更深入地理解jQuery UI弹出层的工作原理,提升你在网页交互设计上的能力,为创建更加生动、友好的用户体验打下基础。此外,这也有助于理解前端开发中的“分离关注点”原则,即HTML负责结构...

    jquery div 弹出框

    "jQuery div 弹出框"是指使用jQuery技术来创建一个可自定义的、浮动于页面上的对话框或提示框,通常称为模态窗口。这种弹出框通常用于显示警告、确认信息、详细内容或表单等。以下将详细讲解如何实现jQuery div弹出...

    CSS3动画过渡的jquery动态弹出框插件_弹出框_

    4. **封装和模块化**:将弹出框功能封装为一个独立的插件,遵循良好的编程实践,便于其他项目复用和维护。 5. **性能优化**:避免过度使用动画导致页面性能下降,合理利用事件委托和节流(throttle)或防抖(debounce)...

    jquery弹出框

    5. API设计:为了方便复用和扩展,可以将弹出框的逻辑封装成一个可配置的函数或对象,提供参数来定制弹出框的样式和行为。 总的来说,"jquery弹出框"项目涉及了jQuery库的使用、DOM操作、事件处理、CSS样式和动画...

    jquery弹出框带实例

    4. **jQuery插件**:为了实现更丰富的弹出框效果,开发者经常使用jQuery插件,如jQuery UI中的Dialog组件或Bootstrap的Modal。这些插件提供了更多的定制选项,如拖动、大小调整、自动关闭等功能。 5. **自定义样式*...

    jquery弹出注册框代码.zip

    jquery弹出注册框代码是一款点击登录或者注册按钮后,渐变弹出一个对话框,可以直接登录或者注册,注册框也可自动判断输入正确与否。 jquery弹出注册框代码注册...jquery弹出注册框代码登录演示图: 点击查看演示:

    自定义 jquery 弹出框 demo1

    这段CSS代码将弹出框定位在屏幕中央,并添加了阴影效果,使得其更加突出。关闭按钮的位置被设置在右上角,且无背景色和边框,点击即可触发关闭动作。 最后,我们使用jQuery来控制弹出框的显示和关闭。首先,确保...

    jQuery投资网站弹出框确认表单代码.zip

    `jQuery投资网站弹出框确认表单代码.zip`提供的资源正解决了这个问题,它包含了一个基于jQuery和layer插件的弹出框确认表单。这个功能允许用户在进行重要操作前进行二次确认,增加了用户体验的友好性和安全性。 ...

    jquery Dialog 弹出框 很漂亮 实用

    jQuery Dialog 是一个功能强大的弹出框插件,它是 jQuery UI 库的一部分,广泛应用于网页交互设计中,提供美观且可自定义的对话框效果。在实际项目中,它以其高效和易用性受到开发者的喜爱。 Dialog 弹出框的核心...

    Jquery 弹出框

    - jQuery UI库提供了一个强大的`dialog`组件,可以轻松创建具有标准样式和行为的弹出框。首先需要引入jQuery UI的CSS和JS文件。 - 使用示例: ```javascript $("#dialog").dialog({ autoOpen: false, // 默认不...

    jQuery点击显示弹出框关闭按钮代码.zip

    本资源"jQuery点击显示弹出框关闭按钮代码.zip"包含了一个利用jQuery实现的弹出框功能,该功能在用户点击某个元素时显示一个弹出框,并且弹出框内带有关闭按钮。下面我们将详细探讨相关的jQuery知识和实现步骤。 ...

    jQuery UI Multiselect (jQuery UI 多选框)

    **jQuery UI Multiselect** 是一个基于 **jQuery UI** 框架的插件,它针对HTML的`&lt;select&gt;`元素提供了增强的多选功能。这个控件设计得更加直观...在实际项目中,结合jQuery UI的其他组件,可以构建出更强大的用户界面。

    4个JqueryUI框架

    XUI的组件设计充分考虑了触摸操作的友好性,包括滑动面板、下拉菜单、弹出框等,适合开发响应式和触摸友好的移动应用。XUI还支持自定义主题,使开发者可以轻松打造出与品牌风格一致的移动界面。 以上四个框架均是...

    jQuery UI弹出层应用实例特效代码

    在本文中,我们将深入探讨jQuery UI中的弹出层(Dialog)应用实例,这是一个非常实用的交互元素,常用于展示信息、提示用户或者进行简单的表单输入。jQuery UI库提供了丰富的功能和可定制化选项,使得创建弹出层变得...

    jquery UI 1.7源代码

    《jQuery UI 1.7源代码深度解析》 jQuery UI是基于jQuery库的交互式用户界面组件集合,它为Web开发者提供了丰富的可定制组件,包括日期选择器、对话框、拖放功能、滑块等。在本文中,我们将深入探讨jQuery UI 1.7的...

    jqueryUI 提示框显示工具

    这行代码告诉 jQuery UI 为 `#tooltipButton` 元素创建一个提示框,当鼠标悬停在按钮上时,就会显示预先设定的 `title` 内容。 **三、自定义提示框** 默认的提示框样式可能无法满足所有设计需求,jQuery UI 提供了...

Global site tag (gtag.js) - Google Analytics