刚刚写的一个jquery的弹出层的插件

最新推荐文章于 2024-11-02 12:42:04 发布

wlkjhxd

最新推荐文章于 2024-11-02 12:42:04 发布

阅读量2.3k

点赞数

文章标签： jquery function callback stylesheet javascript filter

本文链接：https://blog.csdn.net/wlkjhxd/article/details/2998374

版权

刚刚写的一个jquery的弹出层的插件

 
 String.prototype.replaceAll  = function(s1,s2){
return this.replace(new RegExp(s1,"gm"),s2);    
};
(function($){
/*
 * $-layer 0.1 - jquery pulg-in
 *
 * Copyright (c) 2008 King Wong
 * $Date: 2008-09-28  $
 */
var ___win___ = window.self;
var ___self___ = window.self;
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___,___win___.document).css("top",  _top);
    $("#"+___id___,___win___.document).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",
        target:window.self,
        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>',
        cssurl:'',
        content:'',
        title:'',
        isbg:true,
        opacity:0.3
    },
    layerSetup: function( settings ) {
        $.extend( $.layerSettings, settings );
        ___settings___[settings.id] = settings;
        ___id___ = settings.id;
    },
    layershow:function(){
        ___win___ = $.layerSettings.target == undefined || $.layerSettings.target == null ? window.self : $.layerSettings.target;
        
        var win = $.layerSettings.target == undefined || $.layerSettings.target == null ? window.self : $.layerSettings.target;
        var __bw = $("body",win.document).width();
        var __bh = $("body",win.document).height() > $(window).height() ? $("body",win.document).height() : $(window).height();
        var _width = $.layerSettings.width;
        var _height = $.layerSettings.height;
        
        if(___win___.document.getElementById(___id___)) return;
        var _moveid = ___id___ + "_move";
        var _titleid = ___id___ + "_title";
        var _contentid = ___id___ + "_content";
        var _cssurl = $.layerSettings.cssurl;
        var opacity = $.layerSettings.opacity;
        (function(){
            $("head",win.document).append('<link type="text/css" href="'+_cssurl+'" rel="stylesheet" />');
        })();
        __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",win.document).append(__bgDiv);
        }
        $("body",win.document).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___,win.document).append(__templete);
        $("#"+_contentid,win.document).append($.layerSettings.content);
        var self = window.self;
        var ___win = $.layerSettings.target.document;
        var idd = ___id___;
        $(".layerclose",win.document).bind("click",function()
        {
            self.$.layerclose(idd,___win);
        });
        $("#"+___id___,win.document).bind("click",function()
         {
             var id = this.id;
             self.$.layerSetup(___settings___[id]);
            self.$(this).css("z-index",$.layermaxindex()); 
         });
        $(win.document,win).bind("click",function(e)
         {
            var pos = self.$.getMousePosition(e);
            
         });
        $(win.document,win).mousemove(function(e){                                          
            if(isMouseDown && dragStatus[currentElement.id] != 'false'){
                self.$.updatePosition(e);
                if(dragCallbacks[currentElement.id] != undefined){
                    dragCallbacks[currentElement.id](e, currentElement);
                }
                return false;
            }
        });
        $(win.document,win).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,win.document).css("cursor", "move");  
            $("#"+_moveid,win.document).mousedown(function(e){
                var id = this.id.replace("_move","");
                ___id___ = id;
                self.$("#"+id,win.document).css("z-index",$.layermaxindex());
                self.$.layerSetup(___settings___[id]);
                if((dragStatus[___id___] == "off") || (dragStatus[___id___] == "handler" && !holdingHandler))
                    return bubblings["#"+___id___];
                
                isMouseDown    = true;
                currentElement = self.$("#"+___id___);
                var pos    = self.$.getMousePosition(e);
                lastMouseX = pos.x;
                lastMouseY = pos.y;
                lastElemTop  = win.document.getElementById(___id___).offsetTop;
                lastElemLeft = win.document.getElementById(___id___).offsetLeft;
                self.$.updatePosition(e);
                holdingHandler = true;
            });
            
            $("#"+_moveid,win.document).mouseup(function(e){
                holdingHandler = false;
            });
            //end setHandler 
        })();
    },
    layerclose:function(__id,__win)
    {
        $("#"+__id+"_background",__win).remove();
        $("#"+__id,__win).remove();
    },
    layermaxindex:function()
    {
        var ___index = 0;
        $.each($("*",___win___.document),function(i,n){
             var __tem = $(n).css("z-index");
             if(__tem>0)
             {
                if(__tem > ___index)
                {
                    ___index = __tem + 1;   
                }
             }
         });
        return ___index;
    }
});
})(jQuery);
 

使用方法：

 
      $.layerSetup({
                 id:"弹出层的ID",
                 title:'弹出层的标题文字',
                 target:在哪个目标柜架弹出层如window.parent，默认为window.self,
                 cssurl:'弹出层的CSS样式文件的地址',
                 content:'弹出的内容',
                 isbg:是否显示一个遮照层,
                 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>',
                 opacity:设置遮照层的透明度,
                 width:宽,
                 height:高
                 });
    $.layershow();
 
 