当前位置: 首页 > 图文教程 > 网络编程 > Javascript > javascript jQuery插件练习

Javascript
JS getMonth()日期函数的值域是0-11
jQuery 处理网页内容的实现代码
jQuery 树形结构的选择器
jQuery 处理表单元素的代码
JQuery 动画卷页 返回顶部 动画特效(兼容Chrome)
JavaScript 10件让人费解的事情
类似GMAIL的Ajax信息反馈显示
两个比较有用的Javascript工具函数代码
JavaScript Timer实现代码
JavaScript 学习技巧
JavaScript 题型问答有答案参考
js删除select中重复项的实现代码
javascript中的链式调用
JavaScript DOM学习第一章 W3C DOM简介
JavaScript DOM 学习第二章 编辑文本
JavaScript DOM 学习第三章 内容表格
JavaScript DOM学习第四章 getElementByTagNames
JavaScript DOM 学习第五章 表单简介
JavaScript DOM学习第六章 表单实例
JavaScript DOM 学习第七章 表单的扩展

No. « 287 288 289 290 »

技术文章搜索

关键字

Javascript 中的 javascript jQuery插件练习

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-10-12   浏览: 44 ::
收藏到网摘: n/a

对于想学习制作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;
}