我利用网上特效开发的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);