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 相关文章推荐
动态调用CSS文件的JS代码
Jul 29 Javascript
jQuery事件绑定.on()简要概述及应用
Feb 07 Javascript
获取下拉列表框的值是数组,split,$.inArray示例
Nov 13 Javascript
JavaScript Serializer序列化时间处理示例
Jul 31 Javascript
JavaScript将取代AppleScript?
Sep 18 Javascript
浅谈利用JavaScript进行的DDoS攻击原理与防御
Jun 04 Javascript
javascript引用类型之时间Date和数组Array
Aug 27 Javascript
jquery.cookie.js用法实例详解
Dec 25 Javascript
JavaScript事件学习小结(一)事件流
Jun 09 Javascript
Ionic默认的Tabs模板使用实例
Aug 29 Javascript
Vue组件之高德地图地址选择功能的实例代码
Jun 21 Javascript
微信小程序学习之自定义滚动弹窗
Dec 20 Javascript
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和editplus正则表达式去除空白行
2015/04/17 PHP
PHP自定义递归函数实现数组转JSON功能【支持GBK编码】
2018/07/17 PHP
php实现单笔转账到支付宝功能
2018/10/09 PHP
JS 实现完美include载入实现代码
2010/08/05 Javascript
Yii-自定义删除确认弹框(zyd)jquery实现代码
2013/03/04 Javascript
查找iframe里元素的方法可传参
2013/09/11 Javascript
网站基于flash实现的Banner图切换效果代码
2014/10/14 Javascript
JS实现从顶部下拉显示的带动画QQ客服特效代码
2015/10/24 Javascript
JS获取本周周一,周末及获取任意时间的周一周末功能示例
2017/02/09 Javascript
JavaScript中数组Array.sort()排序方法详解
2017/03/01 Javascript
JS检测是否可以访问公网服务器功能代码
2017/06/19 Javascript
深入探究angular2 UI组件之primeNG用法
2017/07/26 Javascript
jquery.uploadView 实现图片预览上传功能
2017/08/10 jQuery
Vue使用vue-area-linkage实现地址三级联动效果的示例
2018/06/27 Javascript
详解Vue源码学习之callHook钩子函数
2018/07/25 Javascript
详解vue中在父组件点击按钮触发子组件的事件
2020/11/13 Javascript
Python实现的几个常用排序算法实例
2014/06/16 Python
TensorFlow 合并/连接数组的方法
2018/07/27 Python
python读取目录下最新的文件夹方法
2018/12/24 Python
Python控制Firefox方法总结
2019/06/03 Python
Python适配器模式代码实现解析
2019/08/02 Python
Python 用turtle实现用正方形画圆的例子
2019/11/21 Python
PyQt5+python3+pycharm开发环境配置教程
2020/03/24 Python
2020年10款优秀的Python第三方库,看看有你中意的吗?
2021/01/12 Python
Html5 localStorage入门教程
2018/04/26 HTML / CSS
英国知名小木屋定制网站:Tiger Sheds
2020/03/06 全球购物
Java程序员常见面试题
2015/07/16 面试题
毕业生的自我鉴定该怎么写
2013/12/02 职场文书
市政施工员自我鉴定
2014/01/15 职场文书
大龄毕业生求职别忘职业规划
2014/03/11 职场文书
安全责任书模板
2014/07/22 职场文书
列车乘务员工作不细心检讨书
2014/10/07 职场文书
县委党的群众路线教育实践活动工作情况报告
2014/10/25 职场文书
2014年房地产个人工作总结
2014/12/20 职场文书
pandas中DataFrame检测重复值的实现
2021/05/26 Python
Python3 多线程(连接池)操作MySQL插入数据
2021/06/09 Python