javascript jQuery插件练习

时间：2020-11-09 17:58:14|栏目：jquery|点击：次

简化后的插件：
SimplePlugin.htm：

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml" > 
 
<head> 
 
<title>简化后的插件</title> 
 
<script type="text/ecmascript" src="../js/jquery-1.2.6.js"></script> 
 
<script type="text/ecmascript" src="../js/jquery.SimplePlugin.js"></script> 
 
<script type="text/ecmascript"> 
 
$(function() { 
 
$("input").click(function(){ 
 
$("body").dialog(); 
 
}) 
 
}); 
 
function f(){ 
 
$("body").find("#MaskID").hide(1000); 
 
$("body").find("#DivDialog").hide(1000); 
 
} 
 
</script> 
 
</head> 
 
<body> 
 
<input type="button" value="hi plugin" /> 
 
</body> 
 
</html>

jquery.SimplePlugin.js：

复制代码代码如下:

 
$.fn.dialog=function(){ 
 
this.MaskDiv=function()//自定义一个函数 
 
{ 
 
//创建遮罩背景,这里没有设置透明度，为了简单。zIndex决定了遮罩。 
 
$("body").append("<div ID=MaskID></div>"); 
 
$("body").find("#MaskID").width("888px").height("666px") 
 
.css({position:"absolute",top:"0px",left:"0px",background:"#ccc",zIndex:"10000"}); 
 
} 
 
this.MaskDiv();//调用自定义函数。 
 
$("body").append("<div ID=DivDialog style='display:none'><ul><li>提示</li></ul><input type='button' value='close' onclick='f();' /></div>"); 
 
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：

复制代码代码如下:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head> 
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 
<title>练习jQuery插件</title> 
 
<script type="text/ecmascript" src="../js/jquery-1.2.6.js"></script> 
 
<script type="text/ecmascript" src="../js/jquery.firstplugin.js"> </script> 
 
<script type="text/ecmascript" src="../js/jquery.dialog.js"></script> 
 
<style type='text/css'> 
 
*{padding:0; margin:0} /*此行样式一定要加，不然可能会引起BUG出现。*/ 
 
#MyDiv{ 
 
position:absolute; 
 
width:200px; 
 
height:200px; 
 
font-size:12px; 
 
background:#666; 
 
border:1px solid #000; 
 
z-index:10001; 
 
display:none; 
 
text-align:center; 
 
} 
 
</style> 
 
<script type="text/ecmascript"> 
 
$(document).ready(function() { 
 
$("input").click(function(){ 
 
$("body").dialog(); 
 
}) 
 
}) 
 
</script> 
 
</head> 
 
<body> 
 
<div> 
 
<input type="button" value="hi plugin" /> 
 
</div> 
 
</body> 
 
</html>

jquery.dialog.js：

复制代码代码如下:

 
// JScript 文件 
 
$.fn.dialog=function(){ 
 
this.MaskDiv=function()//自定义一个函数 
 
{ 
 
var wnd = $(window), doc = $(document); 
 
if(wnd.height() > doc.height()){ //当高度少于一屏 
 
wHeight = wnd.height(); 
 
}else{//当高度大于一屏 
 
wHeight = doc.height(); 
 
} 
 
//创建遮罩背景 
 
$("body").append("<div ID=MaskID></div>"); 
 
$("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)//自定义一个带参数的函数 
 
{ 
 
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); //计算上边距 
 
var Div_leftposition = left + (width / 2) - (MyDiv_w / 2); //计算左边距 
 
return Array(Div_topposition,Div_leftposition); 
 
} 
 
this.MaskDiv(); 
 
$("body").append("<div ID=DivDialog style='display:none'><ul><li>提示</li></ul></div>"); 
 
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; 
 
}

上一篇：jQuery validate+artdialog+jquery form实现弹出表单思路详解

栏目：jquery

下一篇：jQuery+CSS实现菜单滑动伸展收缩(仿淘宝)

本文标题：javascript jQuery插件练习

本文地址：http://www.codeinn.net/misctech/20630.html

更多jquery

jquery

javascript jQuery插件练习

阅读排行

推荐教程