javascript jQuery插件练习


Posted in Javascript onDecember 24, 2008

简化后的插件:
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; 
}
Javascript 相关文章推荐
Prototype 学习 工具函数学习($A方法)
Jul 12 Javascript
基于jquery的气泡提示效果
May 31 Javascript
js实现拉伸拖动iframe的具体代码
Aug 03 Javascript
css+js实现部分区域高亮可编辑遮罩层
Mar 04 Javascript
jQuery通过点击行来删除HTML表格行的实现示例
Sep 10 Javascript
jQuery+AJAX实现遮罩层登录验证界面(附源码)
Sep 13 Javascript
Bootstrap和Angularjs配合自制弹框的实例代码
Aug 24 Javascript
Javascript oop设计模式 面向对象编程简单实例介绍
Dec 13 Javascript
Vue2 使用 Echarts 创建图表实例代码
May 18 Javascript
js实现简单掷骰子效果
Oct 24 Javascript
JavaScript async/await原理及实例解析
Dec 02 Javascript
vue实现登陆页面开发实践
May 30 Vue.js
javascript 动态数据下的锚点错位问题解决方法
Dec 24 #Javascript
javascript 网页跳转的方法
Dec 24 #Javascript
javascript prototype,executing,context,closure
Dec 24 #Javascript
JavaScript 事件参考手册
Dec 24 #Javascript
javascript XML数据显示为HTML一例
Dec 23 #Javascript
window.location和document.location的区别分析
Dec 23 #Javascript
javascript 硬盘序列号+其它硬件信息
Dec 23 #Javascript
You might like
php数组查找函数总结
2014/11/18 PHP
php视频拍照上传头像功能实现代码分享
2015/10/08 PHP
PHP中overload与override的区别
2017/02/13 PHP
php数据序列化测试实例详解
2017/08/12 PHP
PHP的mysqli_set_charset()函数讲解
2019/01/23 PHP
PHP实现的数据对象映射模式详解
2019/03/20 PHP
比较全面的event对像在IE与FF中的区别 推荐
2009/09/21 Javascript
js RuntimeObject() 获取ie里面自定义函数或者属性的集合
2010/11/23 Javascript
ajax更新数据后,jquery、jq失效问题
2011/03/16 Javascript
JQuery 图片的展开和伸缩实例讲解
2013/04/18 Javascript
javascript封装简单实现方法
2015/08/11 Javascript
莱鸟介绍javascript onclick事件
2016/01/06 Javascript
基本DOM节点操作
2017/01/17 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图的组合双轴图效果示例【附demo源码下载】
2017/03/09 Javascript
php简单数据库操作类的封装
2017/06/08 Javascript
vue 权限认证token的实现方法
2018/07/17 Javascript
vue给组件传递不同的值方法
2018/09/29 Javascript
Vue中使用canvas方法总结
2019/02/12 Javascript
vue实现pdf文档在线预览功能
2019/11/26 Javascript
Postman参数化实现过程及原理解析
2020/08/13 Javascript
回调函数的意义以及python实现实例
2017/06/20 Python
python保存文件方法小结
2018/07/27 Python
python 输出列表元素实例(以空格/逗号为分隔符)
2019/12/25 Python
Python 使用 prettytable 库打印表格美化输出功能
2019/12/26 Python
PyTorch的SoftMax交叉熵损失和梯度用法
2020/01/15 Python
Python生成器实现简单&quot;生产者消费者&quot;模型代码实例
2020/03/27 Python
用python实现学生管理系统
2020/07/24 Python
python读取xml文件方法解析
2020/08/04 Python
详解python tkinter包获取本地绝对路径(以获取图片并展示)
2020/09/04 Python
Python word文本自动化操作实现方法解析
2020/11/05 Python
详解移动端h5页面根据屏幕适配的四种方案
2020/04/15 HTML / CSS
意大利网上药房:Farmacia 33
2020/01/27 全球购物
以下为Windows NT 下的32 位C++程序,请计算sizeof 的值
2016/12/07 面试题
小学生红领巾广播稿
2014/01/21 职场文书
2016优秀毕业生个人事迹材料
2016/02/29 职场文书
Python实现列表拼接和去重的三种方式
2021/07/02 Python