繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > javascript jQuery插件练习
- Javascript
- 一个简单的收缩菜单效果
- HTML-CSS群中单选引发的“事件”
- 打开超链需要“确认”对话框的方法
- 用js实现网页上模仿桌面右键菜单
- 可以文本显示的公告栏的js代码
- [原创]js与自动伸缩图片 自动缩小图片的多浏览器兼容的方法总结
- 极致之美：百行代码实现全新智能语言
- 表单(FORM)的一些实用效果代码
- [原创]提供复制本站内容时出现,该文章转自等字样的js代码
- javascript中巧用“闭包”实现程序的暂停执行功能
- 给网站上的广告“加速”显示的方法
- [原创]jser必看的破解javascript各种加密的反向思维方法
- 用javascript代替marquee的滚动字幕效果代码
- 静态页面下用javascript操作ACCESS数据库(读增改删)的代码
- [原创]由亿起发(eqifa.com)的页面发现顶部的http://16a.us/8.js想到的js解密
- [原创]站长必须要知道的javascript广告代码
- js defineSetter -给js的 "class"自动增加一个set的属性(方法)
- Javascript & DHTML 实例编程（教程）（三）初级实例篇1—上传文件控件实例
- WordPress 插件：CoolCode使用方法与下载
- 文档处理系列：随时更新
Javascript 中的 javascript jQuery插件练习
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 137 ::
收藏到网摘: 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;
}
评论 (0) All
