javascript jQuery plug-in exercise_jquery

简化后的插件：
SimplePlugin.htm：

复制代码 代码如下:

jquery.SimplePlugin.js：

复制代码 代码如下:

$.fn.dialog=function(){
this.MaskDiv=function()//自定义一个函数
{
//创建遮罩背景,这里没有设置透明度，为了简单。zIndex决定了遮罩。
$("body").append("

");
$("body").find("#MaskID").width("888px").height("666px")
.css({position:"absolute",top:"0px",left:"0px",background:"#ccc",zIndex:"10000"});
}
this.MaskDiv();//调用自定义函数。
$("body").append("

• 提示

");
var obj=$("body").find("#DivDialog");
obj.width("200px").height("200px");
obj.css({position:"absolute",top:"100px",left:"100px",background:"#FFCC66",zIndex:"10001"}).show("slow");

return this;
}

完整的插件：
myplugin.html：

复制代码 代码如下:

jquery.dialog.js：

复制代码 代码如下:

//JScript file
$.fn.dialog=function(){
this.MaskDiv=function()//Customize a function
{
var wnd = $ (window), doc = $(document);
if(wnd.height() > doc.height()){ //When the height is less than one screen
wHeight = wnd.height();
}else{//When the height is greater than one screen
wHeight = doc.height();
}
//Create a mask background
$("body").append("< ;div ID=MaskID>

");
$("body").find("#MaskID").width(wnd.width()).height(wHeight)
.css ({position:"absolute",top:"0px",left:"0px",background:"#ccc",filter:"Alpha(opacity=90);",opacity:"0.3",zIndex:"10000" });
}
this.sPosition=function(obj)//Customize a function with parameters
{
var MyDiv_w = parseInt(obj.width());
var MyDiv_h = parseInt(obj.height());

var width =parseInt($(document).width());
var height = parseInt($(window).height());
var left = parseInt($(document).scrollLeft());
var top = parseInt($(document).scrollTop());

var Div_topposition = top (height / 2 ) - (MyDiv_h / 2); //Calculate the top margin
var Div_leftposition = left (width / 2) - (MyDiv_w / 2); //Calculate the left margin
return Array(Div_topposition,Div_leftposition);
}
this.MaskDiv();
$("body").append("

• Prompt< /li>

");
var obj=$("body").find("#DivDialog");
obj.width("200px").height ("200px");
PosT=this.sPosition(obj);
obj.css({position:"absolute",top:PosT[0] "px",left:PosT[1] "px ",background:"#FFCC66",zIndex:"10001"}).show("slow");
return this;
}