javascript 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; }

******生成js分页脚****** ****没剑(2008-03-05)**** 修改日期：2008-3-12 添加两个参数：displaynum，displaylastNum可以自由定制显示的页码数量参数： pagesize:10 //每页显示的页码数 ,count:0 //数据条数 ,cs>>>详细阅读

本文标题：javascript jQuery插件练习

地址：http://www.17bianji.com/kaifa2/JS/29065.html

1/2 1