我利用网上特效开发的Jquery插件

我利用网上特效开发的Jquery插件

 

代码如下

 

(function($){

    $.fn.Dialogx = function(options) {

        var defaults={
            Width:"300",
            Height:"300",
            Title:"对话框",
            Opacity:"0.2",
            Url:"",
            Content:""
        };

        var opts = $.extend({},defaults,options);
        $(this).click(function(){

            if(!$("#Dialogx").length>0)
            {
                //var maktemp='<div id="MarkZZ" style="background:#666;width:'+$(document).width()+'; height:'+($(document).height())+'px; position:absolute; top:0px; left:0px; z-index:80;"></div>';
                var maktemp='<div id="MarkZZ" style="background:#666;width:'+$(document).width()+'px; height:'+($(document).height())+'px; position:absolute; top:0px; left:0px; z-index:10;"></div>';
                //var tempstr ='<div class="showdiv" id="Dialogx"><div class="top"><div class="topleft"></div><div class="topmiddle" id="topmiddle"> <span style="float:left; color:#FFF; font-weight:bold; line-height:26px; font-size:12px;">&nbsp;'+opts.Title+'</span><span style="float:right"><a href="javascript:"><img border="0" src="'+skinurl+'" width="26" height="20" id="diagclose" /></a></span></div><div class="topright"></div></div><div class="clear"></div><div class="middle"><div class="middleleft" id="middleleft"></div><div class="middlemiddle"  id="middlemiddle"><div style="padding:5px;background:#fff;" id="middlecontent"><iframe src="'+opts.FrameURL+'" style="height:100%; width:100%;" scrolling="no" frameborder="0"></iframe></div></div><div class="middleright" id="middleright"></div></div><div class="clear"></div><div class="end"><div class="endleft"></div><div class="endmiddle" id="endmiddle"></div><div class="endright"></div></div><div class="clear"></div></div>';
                var tempstr ='<div class="Dialogx" id="Dialogx" style="z-index:20;"></div>';
                //if(opts.ContentFlag==1)
                //{
                //    tempstr ='<div class="showdiv" id="Dialogx"><div class="top"><div class="topleft"></div><div class="topmiddle" id="topmiddle"> <span style="float:left; color:#FFF; font-weight:bold; line-height:26px; font-size:12px;">&nbsp;'+opts.Title+'</span><span style="float:right"><a href="javascript:"><img border="0" src="'+skinurl+'" width="26" height="20" id="diagclose" /></a></span></div><div class="topright"></div></div><div class="clear"></div><div class="middle"><div class="middleleft" id="middleleft"></div><div class="middlemiddle"  id="middlemiddle"><div style="padding:5px;background:#fff;" id="middlecontent">'+opts.Contents+'</div></div><div class="middleright" id="middleright"></div></div><div class="clear"></div><div class="end"><div class="endleft"></div><div class="endmiddle" id="endmiddle"></div><div class="endright"></div></div><div class="clear"></div></div>';
                //}
                $("body").append(maktemp);
                $("body").append(tempstr);
            }
            else
            {
                $("#MarkZZ").show();
            }


            var css={}
            if(window.navigator.userAgent.indexOf('MSIE')>=1)
            {
                css.filter= 'progid:DXImageTransform.Microsoft.Alpha(opacity='+opts.Opacity*100+')';
            }
            else
            {
                css.opacity= opts.Opacity;
            }
            $("#MarkZZ").css(css);
            var w,h,de;
            de = document.documentElement;
            w = self.innerWidth || (de&&de.clientWidth) || document.body.clientWidth;
            h = self.innerHeight || (de&&de.clientHeight)|| document.body.clientHeight;
            var diagtop = h/2-(opts.Height/2)+eval($(document).scrollTop());
            var diagleft = w/2-(opts.Width/2)+eval($(document).scrollLeft());
            $("#Dialogx").css({"top" : diagtop,"left":diagleft,"width":opts.Width+"px","height":opts.Height+"px"});

            $("#Dialogx").append("<div class='top'></div>");
            $("#Dialogx .top").append("<div class='title'>"+ opts.Title+"</div>");
            $("#Dialogx .top .title")
                .css("margin-left","10px")
                .css("width",($("#Dialogx .top").width()-50)+"px");
            ;
            $("#Dialogx .top").append("<div class='button' style='width:35px;cursor: hand; '><span class='close'>X</span> </div>");


            $("#Dialogx").append("<div class='content'></div>");
            $("#Dialogx .content").css("height",($("#Dialogx").height()-40)+"px").css("width",($("#Dialogx").width()-10)+"px");
            if( opts.Content)
            {
                $("#Dialogx .content").html(opts.Content);
            }
            else if(opts.Url)
            {
                $("#Dialogx .content").html("<iframe src='' style='height:100%; width:100%;' scrolling='no' frameborder='0'></iframe>");
                $("#Dialogx .content>iframe").attr("src", opts.Url);
            }


            $(window).scroll(function(){
                var diagtop = h/2-(opts.Height/2)+eval($(document).scrollTop());
                var diagleft = w/2-(opts.Width/2)+eval($(document).scrollLeft());
                $("#Dialogx").css({"top" : diagtop,"left":diagleft });
            });
            $("#Dialogx .top .button .close").mousemove(
                //function(){
                //    $(this).attr("src",skinurl2);
                //}
            ).mouseout(
                //function(){
                //    $(this).attr("src",skinurl);
                //}
            ).click(function(){
                    $("#Dialogx").remove();
                    $("#MarkZZ").remove();
                })

            var  _move =false;
            var _x =$("#Dialogx").pageX-parseInt($("#Dialogx").css("left").replace("px",""));
            var _y= $("#Dialogx").pageY-parseInt($("#Dialogx").css("top").replace("px",""));
            $("#Dialogx").click(function()
            {
                //alert("click");//点击（松开后触发）
            }).mousedown(function(e){
                    _move=true;
                    _x=e.pageX-parseInt($(this).css("left").replace("px",""));
                    _y=e.pageY-parseInt($(this).css("top").replace("px",""));
                    $(this).fadeTo(20, 0.5);//点击后开始拖动并透明显示
                });
            $(document).mousemove(function(e){
                if(_move){
                    var x=e.pageX-_x;//移动时根据鼠标位置计算控件左上角的绝对位置
                    var y=e.pageY-_y;
                    $("#Dialogx").css({top:y,left:x});//控件新位置
                }
            }).mouseup(function(){
                    _move=false;
                    $("#Dialogx").fadeTo("fast", 1);//松开鼠标后停止移动并恢复成不透明
                });
        })
    };

})(jQuery);