javascript jQuery插件练习

更新时间：2008年12月24日 23:57:11 作者：

对于想学习制作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实现复选框的全选全不选反选功能
本文分享一段基于jQuery实现的复选框全选、全不选、反选功能的代码，有需要的小伙伴直接带走吧
2014-11-11
jQuery实现表格行数据滚动效果
这篇文章主要为大家详细介绍了jQuery实现表格行数据滚动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-08-08
jQuery使用CSS()方法给指定元素同时设置多个样式
这篇文章主要介绍了jQuery使用CSS()方法给指定元素同时设置多个样式的方法,实例分析了jQuery中css方法的使用技巧,非常具有实用价值,需要的朋友可以参考下
2015-03-03
jQuery下拉友情链接美化效果代码分享
这篇文章主要介绍了jQuery下拉友情链接美化效果，很实用的代码，推荐给大家，有需要的小伙伴可以参考下。
2015-08-08
jQuery动态添加、删除元素的方法
添加、删除元素在项目中经常会用到，下面为大家介绍下使用jQuery对元素进行动态添加和删除，具体的实现如下，希望对大家有所帮助
2014-01-01
jQuery的文档处理程序详解
这篇文章主要介绍了jQuery的文档处理程序,结合实例形式详细分析了jQuery文档处理程序的概念、原理、使用方法与相关注意事项,并详细讲述了文档处理程序的优势,需要的朋友可以参考下
2016-05-05
jquery UI 1.72 之datepicker
一步一步学jquery UI 1.72 之datepicker，中间都写了注释方便大家学习。
2009-12-12
jQuery :first选择器使用介绍
:first：获取第一个元素，在一些特殊情况下还是蛮实用的，下面为大家详细介绍下:first的具体使用，感兴趣的朋友可以参考下
2013-08-08
jQuery Validate插件实现表单强大的验证功能
这篇文章主要介绍了jQuery Validate插件实现表单强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求，感兴趣的小伙伴们可以参考一下
2015-12-12
jquery实现图片左右切换的方法
这篇文章主要介绍了jquery实现图片左右切换的方法,设计jQuery操作页面元素及对应样式的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-05-05