我封装的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>
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值