javascript jQuery插件练习

　　简化后的插件：

　　SimplePlugin.htm：

　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

　　<head>

　　<title>简化后的插件</title>

　　$(function() {

　　$("input").click(function(){

　　$("body").dialog();

　　})

　　});

　　function f(){

　　$("body").find("#MaskID").hide(1000);

　　$("body").find("#DivDialog").hide(1000);

　　}

　　</script>

　　</head>

　　<body>

　　</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">

　　<head>

　　<title>练习jQuery插件</title>

　　*{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>

　　$(document).ready(function() {

　　$("input").click(function(){

　　$("body").dialog();

　　})

　　</script>

　　</head>

　　<body>

　　<div>

　　</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;

　　}

教程首页更多教程