jQuery弹出层插件简化版

1. String.prototype.replaceAll  = function(s1,s2){
2. return this.replace(new RegExp(s1,"gm"),s2);    
3. };
4. (function($){
5. /*
6.  * $-layer 0.1 - New Wave Javascript
7.  *
8.  * Copyright (c) 2008 King Wong
10.  * $Date: 2008-10-09  $
11.  */
12. var ___id___ = "";
13. var ___settings___ = {};
14. var isMouseDown    = false;
16. var currentElement = null;
18. var dropCallbacks = {};
19. var dragCallbacks = {};
21. var bubblings = {};
23. var lastMouseX;
24. var lastMouseY;
25. var lastElemTop;
26. var lastElemLeft;
28. var dragStatus = {};    
30. var holdingHandler = false;
32. $.getMousePosition = function(e){
33.     var posx = 0;
34.     var posy = 0;
36.     if (!e) var e = window.event;
38.     if (e.pageX || e.pageY) {
39.         posx = e.pageX;
40.         posy = e.pageY;
41.     }
42.     else if (e.clientX || e.clientY) {
43.         posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
44.         posy = e.clientY + document.body.scrollTop  + document.documentElement.scrollTop;
45.     }
46.     return { 'x': posx, 'y': posy };
47. };
48. $.updatePosition = function(e) {
49.     var pos = $.getMousePosition(e);
51.     var spanX = (pos.x - lastMouseX);
52.     var spanY = (pos.y - lastMouseY);
53.     var _top = (lastElemTop + spanY) > 0 ? (lastElemTop + spanY) : 0;
54.     var _left = (lastElemLeft + spanX) > 0 ? (lastElemLeft + spanX) : 0;
55.     $("#"+___id___).css("top",  _top);
56.     $("#"+___id___).css("left", _left);
57. };
59. $.fn.ondrag = function(callback){
60.     return this.each(function(){
61.         dragCallbacks[this.id] = callback;
62.     });
63. };
64. $.fn.ondrop = function(callback){
65.     return this.each(function(){
66.         dropCallbacks[this.id] = callback;
67.     });
68. };
70. $.fn.dragOff = function(){
71.     return this.each(function(){
72.         dragStatus[this.id] = 'off';
73.     });
74. };
76. $.fn.dragOn = function(){
77.     return this.each(function(){
78.         dragStatus[this.id] = 'on';
79.     });
80. };
81. $.extend({
82.     layerSettings:{
83.         id:"layerdiv",
84.         width:220,
85.         height:220,
86.         templete:'@title@close

',

        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 = '+___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;">

';

        if($.layerSettings.isbg)

        {

            $("body").append(__bgDiv);

        }

        $("body").append('+___id___+'" style="z-index:'+__index+';position:absolute; left:'+__left+'px; top:'+__top+'px;">

');

        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);