提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  后端

当前栏目

javascriptjQuery插件练习

插件 练习
2023-06-13 09:14:07 时间
简化后的插件：
SimplePlugin.htm：
复制代码代码如下:

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>简化后的插件</title>
<scripttype="text/ecmascript"src="../js/jquery-1.2.6.js"></script>
<scripttype="text/ecmascript"src="../js/jquery.SimplePlugin.js"></script>
<scripttype="text/ecmascript">
$(function(){
$("input").click(function(){
$("body").dialog();
})
});
functionf(){
$("body").find("#MaskID").hide(1000);
$("body").find("#DivDialog").hide(1000);
}
</script>
</head>
<body>
<inputtype="button"value="hiplugin"/>
</body>
</html>


jquery.SimplePlugin.js：

复制代码代码如下:

$.fn.dialog=function(){
this.MaskDiv=function()//自定义一个函数
{
//创建遮罩背景,这里没有设置透明度，为了简单。zIndex决定了遮罩。
$("body").append("<divID=MaskID></div>");
$("body").find("#MaskID").width("888px").height("666px")
.css({position:"absolute",top:"0px",left:"0px",background:"#ccc",zIndex:"10000"});
}
this.MaskDiv();//调用自定义函数。
$("body").append("<divID=DivDialogstyle="display:none"><ul><li>提示</li></ul><inputtype="button"value="close"onclick="f();"/></div>");
varobj=$("body").find("#DivDialog");
obj.width("200px").height("200px");
obj.css({position:"absolute",top:"100px",left:"100px",background:"#FFCC66",zIndex:"10001"}).show("slow");

returnthis;
}

完整的插件：
myplugin.html：

复制代码代码如下:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>练习jQuery插件</title>
<scripttype="text/ecmascript"src="../js/jquery-1.2.6.js"></script>
<scripttype="text/ecmascript"src="../js/jquery.firstplugin.js"></script>
<scripttype="text/ecmascript"src="../js/jquery.dialog.js"></script>
<styletype="text/css">
*{padding:0;margin:0}/*此行样式一定要加，不然可能会引起BUG出现。*/

#MyDiv{
position:absolute;
width:200px;
height:200px;
font-size:12px;
background:#666;
border:1pxsolid#000;
z-index:10001;
display:none;
text-align:center;
}
</style>
<scripttype="text/ecmascript">
$(document).ready(function(){
$("input").click(function(){
$("body").dialog();
})
})
</script>
</head>

<body>
<div>
<inputtype="button"value="hiplugin"/>
</div>
</body>
</html>

jquery.dialog.js：
复制代码代码如下:
//JScript文件
$.fn.dialog=function(){
this.MaskDiv=function()//自定义一个函数
{
varwnd=$(window),doc=$(document);
if(wnd.height()>doc.height()){//当高度少于一屏
wHeight=wnd.height();
}else{//当高度大于一屏
wHeight=doc.height();
}
//创建遮罩背景
$("body").append("<divID=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)//自定义一个带参数的函数
{
varMyDiv_w=parseInt(obj.width());
varMyDiv_h=parseInt(obj.height());

varwidth=parseInt($(document).width());
varheight=parseInt($(window).height());
varleft=parseInt($(document).scrollLeft());
vartop=parseInt($(document).scrollTop());

varDiv_topposition=top+(height/2)-(MyDiv_h/2);//计算上边距
varDiv_leftposition=left+(width/2)-(MyDiv_w/2);//计算左边距
returnArray(Div_topposition,Div_leftposition);
}
this.MaskDiv();
$("body").append("<divID=DivDialogstyle="display:none"><ul><li>提示</li></ul></div>");
varobj=$("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");
returnthis;
}

相关文章