javascript jQuery plug-in exercise_jquery-JS Tutorial-php.cn

javascript jQuery plug-in exercise_jquery

WBOY

Release： 2016-05-16 18:57:04

Original

1370 people have browsed it

简化后的插件：
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插件

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("");
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;
}