jQuery弹出层插件简化版

String.prototype.replaceAll  = function(s1,s2){
return this.replace(new RegExp(s1,"gm"),s2);    
};
(function($){
/*
 * $-layer 0.1 - New Wave Javascript
 *
 * Copyright (c) 2008 King Wong

 * $Date: 2008-10-09  $
 */
var ___id___ = "";
var ___settings___ = {};
var isMouseDown    = false;

var currentElement = null;

var dropCallbacks = {};
var dragCallbacks = {};

var bubblings = {};

var lastMouseX;
var lastMouseY;
var lastElemTop;
var lastElemLeft;

var dragStatus = {};    

var holdingHandler = false;

$.getMousePosition = function(e){
    var posx = 0;
    var posy = 0;

    if (!e) var e = window.event;

    if (e.pageX || e.pageY) {
        posx = e.pageX;
        posy = e.pageY;
    }
    else if (e.clientX || e.clientY) {
        posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
        posy = e.clientY + document.body.scrollTop  + document.documentElement.scrollTop;
    }
    return { 'x': posx, 'y': posy };
};
$.updatePosition = function(e) {
    var pos = $.getMousePosition(e);

    var spanX = (pos.x - lastMouseX);
    var spanY = (pos.y - lastMouseY);
    var _top = (lastElemTop + spanY) > 0 ? (lastElemTop + spanY) : 0;
    var _left = (lastElemLeft + spanX) > 0 ? (lastElemLeft + spanX) : 0;
    $("#"+___id___).css("top",  _top);
    $("#"+___id___).css("left", _left);
};

$.fn.ondrag = function(callback){
    return this.each(function(){
        dragCallbacks[this.id] = callback;
    });
};
$.fn.ondrop = function(callback){
    return this.each(function(){
        dropCallbacks[this.id] = callback;
    });
};

$.fn.dragOff = function(){
    return this.each(function(){
        dragStatus[this.id] = 'off';
    });
};

$.fn.dragOn = function(){
    return this.each(function(){
        dragStatus[this.id] = 'on';
    });
};
$.extend({
    layerSettings:{
        id:"layerdiv",
        width:220,
        height:220,
        templete:'<div style="height:20px; width:@width@px; background-color:#777777;"><span id="@moveid@" style="position:relative; left:0px; top:0px; height:20px; width:100px;"><span id="@titleid@">@title@</span></span><span class="layerclose" style="position:relative; top:0px; float:right; right:20px; color:red;">close</span></div><div style="border:solid #ff0000 1px; width:@width@px; height:@height@px;"><div style="width:100%; height:100%; background-color:#ffffff;" id="@contentid@"></div></div>',
        content:'',
        title:'',
        isbg:true,
        opacity:0.3
    },
    layerSetup: function( settings ) {
        $.extend( $.layerSettings, settings );
        ___settings___[settings.id] = settings;
        ___id___ = settings.id;
    },
    layershow:function(){       
        var __bw = $("body").width();
        var __bh = $("body").height() > $(window).height() ? $("body").height() : $(window).height();
        var _width = $.layerSettings.width;
        var _height = $.layerSettings.height;
        
        if(document.getElementById(___id___)) return;
        var _moveid = ___id___ + "_move";
        var _titleid = ___id___ + "_title";
        var _contentid = ___id___ + "_content";
        var _cssurl = $.layerSettings.cssurl;
        var opacity = $.layerSettings.opacity;
        __index = $.layermaxindex();
        var __left = (__bw - _width) > 0 ? (__bw - _width)/2 : 0;
        var __top = 100;
        var __bgDiv = '<div id="'+___id___+'_background" style="background:#000000; filter:alpha(opacity='+(opacity*100)+'); opacity: '+opacity+'; width:'+__bw+'px; height:'+__bh+'px; z-index:'+(__index++)+'; position:absolute; left:0px; top:0px;"></div>';
        if($.layerSettings.isbg)
        {
            $("body").append(__bgDiv);
        }
        $("body").append('<div id="'+___id___+'" style="z-index:'+__index+';position:absolute; left:'+__left+'px; top:'+__top+'px;"></div>');
        var _templete = $.layerSettings.templete;
        var __templete = _templete.replaceAll("@width@",_width).replaceAll("@height@",_height).replaceAll("@titleid@",_titleid).replaceAll("@contentid@",_contentid).replaceAll("@title@",jQuery.layerSettings.title).replaceAll("@moveid@",_moveid);
        $("#"+___id___).append(__templete);
        $("#"+_contentid).append($.layerSettings.content);
        $("#"+_titleid).append($.layerSettings.title);
        var idd = ___id___;
        $(".layerclose").bind("click",function()
        {
            $.layerclose(idd);
        });
        $("#"+___id___).bind("click",function()
         {
             var id = this.id;
             $.layerSetup(___settings___[id]);
            $(this).css("z-index",$.layermaxindex()); 
         });
        $(document).bind("click",function(e)
         {
            var pos = $.getMousePosition(e);
            
         });
        $(document).mousemove(function(e){                                          
            if(isMouseDown && dragStatus[currentElement.id] != 'false'){
                $.updatePosition(e);
                if(dragCallbacks[currentElement.id] != undefined){
                    dragCallbacks[currentElement.id](e, currentElement);
                }
                return false;
            }
        });
        $(document).mouseup(function(e){
            if(isMouseDown && dragStatus[currentElement.id] != 'false'){
                isMouseDown = false;
                if(dropCallbacks[currentElement.id] != undefined){
                    dropCallbacks[currentElement.id](e, currentElement);
                }
                return false;
            }
        });
        (function(){
            bubblings[___id___] = true;

            dragStatus[___id___] = "on";
            
            //setHandler
            bubblings[this.id] = true;
            
            dragStatus[_moveid] = "handler";

            $("#"+_moveid).css("cursor", "move");   

            $("#"+_moveid).mousedown(function(e){
                var id = this.id.replace("_move","");
                ___id___ = id;
                $("#"+id).css("z-index",$.layermaxindex());
                $.layerSetup(___settings___[id]);
                if((dragStatus[___id___] == "off") || (dragStatus[___id___] == "handler" && !holdingHandler))
                    return bubblings["#"+___id___];
                
                isMouseDown    = true;
                currentElement = $("#"+___id___);

                var pos    = $.getMousePosition(e);
                lastMouseX = pos.x;
                lastMouseY = pos.y;

                lastElemTop  = document.getElementById(___id___).offsetTop;
                lastElemLeft = document.getElementById(___id___).offsetLeft;

                $.updatePosition(e);
                holdingHandler = true;
            });
            
            $("#"+_moveid).mouseup(function(e){
                holdingHandler = false;
            });
            //end setHandler
        })();
    },
    layerclose:function(__id)
    {
        $("#"+__id+"_background").remove();
        $("#"+__id).remove();
    },
    layermaxindex:function()
    {
        var ___index = 0;
        $.each($("*"),function(i,n){
             var __tem = $(n).css("z-index");
             if(__tem>0)
             {
                if(__tem > ___index)
                {
                    ___index = __tem + 1;   
                }
             }
         });
        return ___index;
    }
});
})(jQuery);
 

使用方法：

（1）显示层：

function show()
{
$.layerSetup({
                 id:"abc",//弹出层的ID
                 title:"test",//标题
                 content:'test',//内容
                 isbg:false,//是否显示背景遮照层
                 opacity:0.3,//背景遮照层的透明度，值越大透明度越低，0为完全透明，1为不透明
                 templete:'<div class="showwint_mini_title"><span class="showwint_mini_close_btn"><a href="javascript:void(null);" class="layerclose"></a></span><span class="showwint_mini_title_content" id="@moveid@"><span id="@titleid@"></span></span></div><div class="showwint_mini_content"><div class="showwint_mini_content_content" id="@contentid@"></div></div>'//模板
                 });
$.layershow();
}
（2）关闭层：

$.layerclose("弹出层的ID");
 

注意：那个如果你的模板有CSS文件的话，就要直接引入到本页面就行了，这个简化版不能在别的框架弹出层的，所以也就没有了那个cssurl属性了，也没有target 属性了。

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/wlkjhxd/archive/2008/10/09/3044670.aspx