原創jQuery彈出層插件分享

2024-05-06 16:18:13

字體：大中小

來源：轉載

供稿：網友

我們在前端開發，經常要用到彈出層的效果，以前很早前就想將這個功能整理成一個公共的接口來實現了;自寫的第一個jQuery插件，這里分享給大家，有需要的小伙伴參考下。

依賴jquery，兼容IE6/7/8 火狐 chrom 等主流瀏覽器(絕對原創)，不過請求大神幫我提升點效率。

/**

* jQuery彈出層插件

*

* @author lanhaoooo@163.com

* @since 2014-08-23

*/

(function($) {

var methods = {

o : {

isIe : !-[ 1, ] || document.documentMode >= 9,//后面的是判斷IE9、IE10的

ie6 : !-[ 1, ] && !window.XMLHttpRequest,

ie9_10 : document.documentMode >= 9,

bgLayer : "layerModel_mask",

dataId : "layerModel_main",

wrapper : "layerModel_wrapper",

warpperContent : "layerModel_content",

warpperTitle : "layerModel_title",

warpperCloseBtn : "layerModel_closeBtn",

warpperOwnContent : "layerModel_ownContent",

replaceClose : "replaceClose",

dragableClass : "dragable",

defaultWidth : 300

},

generateId : function(){

return "_" + new Date().getTime();

},

init : function(data, options) {

//left和top想要使用的時候請設置center為false，這樣的情況下才會生效，如果center = true則該設置不生效 #666,#999,#e5dfda ,#e5e5e5,#ff8800

var defaults = {center:true,locked:true,fixed:true,drag:true,zIndex:9999,opacity:"0.5",title:"系統提示",staySame:false,width:0,height:0,timer:0,bgColor:"#fffaf6",left:350,top:100,head:true,isClose:true,shake:false,

close : function(){

return true;

}

};

options = $.extend(defaults, options);

var s = this;

var generateId = s.generateId();

if (typeof data === 'object') {

data = data instanceof $ ? data : $(data);

if(options.staySame) {

data = s.createRender(data, options, generateId).hide();

} else {

data = s.createContainer(data, options, generateId).hide();

}

} else if (typeof data === 'string' || typeof data === 'number') {

data = $("<div id='"+s.o.dataId + generateId +"'></div>").html(data).appendTo(document.body).hide();

} else {

alert("Layer Error : Unsupporte data type :" + typeof data);

return;

}

if (options.locked && !s.hasBgLayer()) {

$("<div class='"+s.o.bgLayer+"' id='" + s.o.bgLayer + "'></div>").appendTo(document.body).css({"background" : options.bgColor,"opacity" : options.opacity});

}

data.css({"position" : options.fixed ? s.o.ie6 ? "absolute" : "fixed" : "absolute","z-index" : options.zIndex,"left" : options.left,"top" : options.top}).show();

if (options.center) {

s.fixLayer(data);

$(window).bind("resize scroll", function() {

s.fixLayer(data);

});

}

if (options.drag) {

s.dragLayer(data, options);

}

if(options.shake) {

s.shakeLayer(data);

}

var timeOut;

clearTimeout(timeOut);

if(options.timer > 0){

timeOut = window.setTimeout(function(){

$("#"+s.o.replaceClose + generateId).trigger("click");

}, options.timer);

}

return data;

},

createContainer : function(data, options,generateId) {

var s = this;

//如果context未定義，則是通過html拼接的方式追加的否則就是原本就存在的，關閉后需要返回原地方

var isHtmlSlice = data.context == undefined ? true : false;

var wrapperHtml = "<div class='"+s.o.wrapper+"' id='"+s.o.wrapper + generateId+"'>"

+ "<div class='"+s.o.warpperContent+"' id='"+s.o.warpperContent + generateId+"'>"

+ "<a class='"+s.o.replaceClose+"' id='"+s.o.replaceClose + generateId+"'></a>";

if(options.head){

wrapperHtml+= "<h4 class='"+s.o.warpperTitle+" "+s.o.dragableClass+"' id='"+s.o.warpperTitle + generateId+"'>";

if(options.isClose){

wrapperHtml+= "<a href='javascript:void(0);' title='關閉' class='"+s.o.warpperCloseBtn+"' id='"+s.o.warpperCloseBtn + generateId+"'>×</a>";

}

wrapperHtml+= options.title + "</h4>";

}

wrapperHtml+= "<div id='"+s.o.warpperOwnContent + generateId+"' class='"+s.o.warpperOwnContent+"'></div>"

+ "</div>"

+ "</div>";

s.container = $(wrapperHtml);

s.container.appendTo(document.body);

data.clone(true).appendTo("#"+s.o.warpperOwnContent + generateId).show().attr('id',data.attr('id') || s.o.dataId + generateId);

//div默認寬度為100%，所以建議將所有彈出的元素設置寬度，否則彈出層寬度為100%

var w = $("#"+data.attr('id')).width() || $("#"+s.o.dataId + generateId).width() || s.o.defaultWidth;

//指定了高度

var tempWidth = w;

if(options.height > 0 ) {

if(options.width > 0){

tempWidth = options.width;

if(options.width <= w){

$("#"+s.o.warpperOwnContent + generateId).css({"width":options.width,"overflow-x":"auto"});

} else {

//如果指定的寬度大于元素本身的寬度，那么需要將元素居中

//讓元素始終居中顯示

var xPadding = (options.width - w) / 2 + 8;

$("#"+s.o.warpperOwnContent + generateId).css({"padding" : "4px " + xPadding + "px"});

}

}

s.container.width(tempWidth + 32);

$("#"+s.o.warpperContent + generateId).width(tempWidth + 30);

$("#"+s.o.warpperOwnContent + generateId).css({"height":options.height,"overflow-y":"auto"});

} else {

if(options.width > 0) {

tempWidth = options.width;

if(options.width <= w) {

$("#"+s.o.warpperOwnContent + generateId).css({"width":options.width,"overflow-x":"auto"});

}

}

s.container.width(tempWidth + 22);

$("#"+s.o.warpperContent + generateId).width(tempWidth + 20);

}

$("#"+s.o.warpperCloseBtn + generateId).click(function(e) {

$("#"+s.o.replaceClose + generateId).trigger("click");

});

$("#"+s.o.replaceClose + generateId).click(function(e) {

s.close($("#"+s.o.wrapper + generateId), options, generateId);

e.stopPropagation();

});

if(!isHtmlSlice){

// 讓傳入的元素在對話框關閉后可以返回到原來的地方

var display = data.css("display");

var obj = data[0];

var prev = obj.previousSibling;

var next = obj.nextSibling;

var parent = obj.parentNode;

this["elemBack_" + generateId] = function(){

if (prev && prev.parentNode) {

prev.parentNode.insertBefore(obj, prev.nextSibling);

} else if (next && next.parentNode) {

next.parentNode.insertBefore(obj, next);

} else if (parent) {

parent.appendChild(obj);

};

data.css({"display" : display});

};

}

data.detach();

return s.container;

},

createRender : function(data, options,generateId){

var s = this;

//如果context未定義，則是通過html拼接的方式追加的否則就是原本就存在的，關閉后需要返回原地方

var isHtmlSlice = data.context == undefined ? true : false;

s.container = $("<div class='"+s.o.wrapper+"' style='border:none;' id='"+s.o.wrapper + generateId+"'><a class='"+s.o.replaceClose+"' id='"+s.o.replaceClose + generateId+"'></a></div>");

s.container.appendTo(document.body);

data.clone(true).appendTo(s.container).show().attr('id',data.attr('id') || s.o.dataId + generateId);

$("#"+s.o.replaceClose + generateId).click(function(e) {

s.close($("#"+s.o.wrapper + generateId), options, generateId);

e.stopPropagation();

});

if(!isHtmlSlice){

// 讓傳入的元素在對話框關閉后可以返回到原來的地方

var display = data.css("display");

var obj = data[0];

var prev = obj.previousSibling;

var next = obj.nextSibling;

var parent = obj.parentNode;

s["elemBack_" + generateId] = function(){

if (prev && prev.parentNode) {

prev.parentNode.insertBefore(obj, prev.nextSibling);

} else if (next && next.parentNode) {

next.parentNode.insertBefore(obj, next);

} else if (parent) {

parent.appendChild(obj);

};

data.css({"display" : display});

};

}

data.detach();

return s.container;

},

isLastLayer : function(){

var s = this;

return $("." + s.o.wrapper).length <= 0;

},

hasBgLayer : function(){

var s = this;

return $("." + s.o.bgLayer).length > 0;

},

close : function(data, options ,generateId) {

var s = this;

//調用回調函數

var result = options.close();

if(result == undefined || result){

data.remove();

if(s.isLastLayer()) {

$("#" + s.o.bgLayer).remove();

}

}

if (s["elemBack_" + generateId]) {

s["elemBack_" + generateId]();

};

},

closeLayer : function(obj){

var s = this;

var $wapper = $(obj).parents("div."+s.o.wrapper);

$("."+s.o.replaceClose,$wapper).trigger("click");

},

fixLayer : function(data) {

var s = this;

var T = ($(window).height() - data.innerHeight()) / 2 + (s.o.ie6 ? $(document).scrollTop() : data.scrollTop());

var L = ($(window).width() - data.width()) / 2 + (s.o.ie6 ? $(document).scrollLeft() : data.scrollLeft());

data.css({"left" : L,"top" : T});

},

dragLayer : function(data, options) {

var s = this;

var move = false;// 移動標記

var x = 0, y = 0;// 鼠標離控件左上角的相對位置

var o = data.find("." + s.o.dragableClass).css({"cursor" : "move"});

var a = o[0];

o.mousedown(function(e) {

//IE9 IE10居然把e.button改成0了，艸

var isLeftClick = (s.o.isIe && e.button == 1) || (!s.o.isIe && e.button == 0) || (s.o.ie9_10 && e.button == 0);

if (isLeftClick) {

data.fadeTo(20, 0.25);// 點擊后開始拖動并透明顯示

s.o.isIe ? a.setCapture() : window.captureEvents(Event.MOUSEMOVE);

move = true;

x = e.pageX - parseInt(data.css("left"));

y = e.pageY - parseInt(data.css("top"));

$(document).mousemove(function(e) {

if (move) {

var sx = e.pageX - x;// 移動時根據鼠標位置計算控件左上角的絕對位置

var sy = e.pageY - y;

data.css({"top" : sy,"left" : sx});

}

}).mouseup(function() {

data.fadeTo("fast", 1);// 松開鼠標后停止移動并恢復成不透明

move = false;

x = 0;

y = 0;

s.o.isIe ? a.releaseCapture() : window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);

});

} else {

return false;

}

});

},

shakeLayer : function(data){

var ll = ($(window).width() - data.width()) / 2;

var loop = 4;

for(var i=1; i<=loop; i++){

data.animate({left:ll - (loop * 10 - 10 * i)},50);

data.animate({left:ll + 2*(loop * 10 - 10 * i)},50);

}

}

};

$.fn.layerModel = function(options) {

methods.init(this, options);

};

$.fn.close = function() {

methods.closeLayer(this);

};

$.fn.fix = function() {

var mn = $(this).parents("." + methods.o.wrapper);

methods.fixLayer($(mn[0]));

};

})(jQuery);