首页 新闻 赞助 找找看

万能JQUERY弹出层解释与优化

0
悬赏园豆:10 [已解决问题] 解决于 2013-05-22 11:37

麻烦大神们帮我看下下面这个万能弹出层还能如何优化?并帮忙注释下下面代码的意思!谢谢!优化的前提一定是要万能的.....

Function.prototype.binding = function () {
if (arguments.length < 2 && typeof arguments[0] == "undefined") return this;
var __method = this, args = jQuery.makeArray(arguments), object = args.shift();
return function () {
return __method.apply(object, args.concat(jQuery.makeArray(arguments)));
}
}
var oldleft,oldtop,mx,my,nowtop, nowleft;
var md = false;
var Class = function (subclass) {
subclass.setOptions = function (options) {
this.options = jQuery.extend({}, this.options, options);
var reg = /(myok|myno).*?/;
for (var key in options) {
if (reg.test(key)) {
$(this).bind(key, options[key]);
}
}
}
var fn = function () {
if (subclass._init && typeof subclass._init == 'function') {
this._init.apply(this, arguments);
}
}
if (typeof subclass == 'object') {
fn.prototype = subclass;
}
return fn;
}

var pop = new Class({
options: {
title: "标题",
content: "暂无内容",
myclass: null,
myok: function () { }, ////自定义按钮事件
myno: function () { }, ////confirm 事件取消按钮事件
type: "alert"
},00
_init: function (opt) {
this.setOptions(opt); ////载入设置
////创建弹出层
var wid = ($("body").width() - 200) / 2;
var hit = (window.screen.height - 110) * 2 / 7;
var altdiv = $("<div id='sunmoon' style='width: 200px;left:" + wid + "px;top:" + hit + "px;z-index:333;position:fixed;height:110px'></div>");
var alttit = $("<div style='width: 100%; background-color: red'>" + this.options.title + "</div>");
var altcot = $("<div style='width: 100%;height: 60px; background-color: Green'>" + this.options.content + "</div>");
var altcontrol = $("<div style='height: 20px; background-color: Blue; text-align: center'></div>");
var altmyok = "<input class='myok_a' type='button' value='确定'/>";
$(".myok_a").die("click").live("click", function () {
// this.options.myok.apply();this.options.myok.call(); new this.options.myok;////3种方法 执行函数
this.options.myok.apply();
$(altdiv).remove();
this.removemb();
} .binding(this));
altcontrol.append(altmyok);
if (this.options.type != "alert") {
var altmyno = " <input class='myok_b' type='button' value='取消' />";
$(".myok_b").die("click").live("click", function () {
this.options.myno.apply(this);
$(altdiv).remove();
this.removemb();
} .binding(this));
altcontrol.append(altmyno);
}
altdiv.append(alttit).append(altcot).append(altcontrol);
$("body").append(altdiv);
this.addmb();

$(alttit).mousedown(function (e) {
if (!e) { e = e || window.event; }
mx = (e.pageX) ? e.pageX : e.x;
my = (e.pageY) ? e.pageY : e.y;
$(this).css("cursor", "w-resize");
oldleft = parseInt($(this).parent().css("left").replace("px", ""));
oldtop = parseInt($(this).parent().css("top").replace("px", ""));
md = true;
});

$(alttit).mousemove(function (e) {
if (md) {
if (!e) { e = e || window.event; }
var ex = (e.pageX) ? e.pageX : e.x;
var ey = (e.pageY) ? e.pageY : e.y;

var divwidth = parseInt($(this).parent().css("width").replace("px", ""));
var divheight = parseInt($(this).parent().css("height").replace("px", ""));
nowleft = ex - mx + oldleft;
nowtop = ey - my + oldtop;
if (nowleft < 0) {
nowleft = 0;
}
else if (nowleft + divwidth > $("body").width()) {
nowleft = $("body").width() - divwidth;
}
if (nowtop < 0) {
nowtop = 0;
}
else if (nowtop + divheight > document.documentElement.clientHeight) {
nowtop = document.documentElement.clientHeight - divheight;
}
$(this).parent().css("left", nowleft + "px").css("top", nowtop + "px");
}
else {
$(this).css("cursor", "pointer");
}
});

$(alttit).mouseup(function (e) {
$(this).css("cursor", "default");
md = false;
});

$(alttit).mouseout(function (e) {
md = false;
});
},
addmb: function () {////添加蒙板
sWidth = $("body").width(); //浏览器工作区域内页面宽度
sHeight = screen.height < $("body").height() ? $("body").height() : screen.height; //屏幕高度(垂直分辨率)
var bgObj = document.createElement("div"); //创建一个div对象(背景层)
//定义div属性,即相当于
//<div id="bgDiv" style="position:absolute; top:0; background-color:#777;
//filter:progid:DXImagesTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75);
//opacity:0.6; left:0; width:918px; height:768px; z-index:10000;"></div>
bgObj.setAttribute('id', 'ggmb');
bgObj.style.position = "absolute";
bgObj.style.top = "0";
bgObj.style.background = "#777";
bgObj.style.filter = "progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75";
bgObj.style.opacity = "0.6";
bgObj.style.left = "0";
bgObj.style.width = sWidth + "px";
bgObj.style.height = sHeight + "px";
bgObj.style.zIndex = "100";
document.body.appendChild(bgObj); //在body内添加该div对象
},
removemb: function () {////移除蒙板
$("body").find("#ggmb").remove()
//document.body.removeChild(document.getElementById("ggmb"));
}
})

听雨者的主页 听雨者 | 初学一级 | 园豆:44
提问于:2013-05-21 10:56
< >
分享
最佳答案
0

 推荐你 zDialog.js

老板只要效果嘛

收获园豆:10
二十三号同学 | 小虾三级 |园豆:974 | 2013-05-22 11:01
其他回答(1)
0

能不能整理一下代码再发?

三阶 | 园豆:1436 (小虾三级) | 2013-05-21 12:37

因为刚毕业接触JQUERY;所以不太懂;上司给我的参考就是这样的;然后就是一个调用的

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="万能弹出层.js" type="text/javascript"></script>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script> <script language="javascript" type="text/javascript">
$(function () {

$("#csbt").click(function () {
new pop({ myok: function () {
alert('ok');
},
myno: function () {
alert('no');
},
type: "alert"
});
});
});

</script>
</head>
<body style=" height:1500px">
<form id="form1" runat="server">
<div>
<input id="csbt" type="button" value="测试button" onclick="return csbt_onclick()" />
<!-- 模拟写的层 没有实际用户 测试时看效果-->
<div id="sunmoon" style="width: 200px; margin-left:500px; display:none">
<div style="width: 100%; background-color: red">
标题</div>
<div style="height: 60px; background-color: Green">
内容</div>
<div style="height: 20px; background-color: Blue; text-align: center">
<input type="button" value="确定" />
<input type="button" value="取消" />
</div>
</div>
</div>
</form>
</body>
</html>

只跟我说整个项目只要用调用就行了;然后让我写个万能弹出层的DEMO;很郁闷...

支持(0) 反对(0) 听雨者 | 园豆:44 (初学一级) | 2013-05-21 15:26
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册