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 相关文章推荐
漂亮的widgets,支持换肤和后期开发新皮肤
Apr 23 Javascript
javascript题目,重写函数让其无限相加
Feb 15 Javascript
Jquery中LigerUi的弹出编辑框(实现方法)
Jul 09 Javascript
jquery中toggle函数交替使用问题
Jun 22 Javascript
谈谈jQuery Ajax用法详解
Nov 27 Javascript
原生JS实现层叠轮播图
May 17 Javascript
关于使用js算总价的问题
Jun 23 Javascript
浅谈在react中如何实现扫码枪输入
Jul 04 Javascript
React组件重构之嵌套+继承及高阶组件详解
Jul 19 Javascript
vue实现输入一位数字转汉字功能
Dec 13 Javascript
小程序瀑布流组件实现翻页与图片懒加载
May 19 Javascript
React更新渲染原理深入分析
Dec 24 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
一个odbc连mssql分页的类
2006/10/09 PHP
基于mysql的论坛(6)
2006/10/09 PHP
php和数据库结合的一个简单的web实例 代码分析 (php初学者)
2011/07/28 PHP
应用开发中涉及到的css和php笔记分享
2011/08/02 PHP
解析crontab php自动运行的方法
2013/06/24 PHP
PHP过滤黑名单关键字的方法
2014/12/01 PHP
PHP strtotime函数用法、实现原理和源码分析
2015/02/04 PHP
PHP7 echo和print语句实例用法
2019/02/15 PHP
Javascript中的相等与不等运算
2010/04/25 Javascript
juqery 学习之五 文档处理 插入
2011/02/11 Javascript
javascript-表格排序(降序/反序)实现介绍(附图)
2013/05/30 Javascript
JS实现闪动的title消息提醒效果
2014/06/20 Javascript
jquery分隔Url的param方法(推荐)
2016/05/25 Javascript
Js删除数组中某一项或几项的几种方法(推荐)
2016/07/27 Javascript
JS定时检测任务任务完成后执行下一步的解决办法
2016/12/22 Javascript
Sublime Text新建.vue模板并高亮(图文教程)
2017/10/26 Javascript
React 源码中的依赖注入方法
2018/11/07 Javascript
如何阻止小程序遮罩层下方图层滚动
2019/09/05 Javascript
vue - props 声明数组和对象操作
2020/07/30 Javascript
在vue中实现清除echarts上次保留的数据(亲测有效)
2020/09/09 Javascript
解决VUE项目使用Element-ui 下拉组件的验证失效问题
2020/11/07 Javascript
[01:47]2018年度DOTA2最佳教练-完美盛典
2018/12/16 DOTA
Python返回真假值(True or False)小技巧
2015/04/10 Python
详解Python函数可变参数定义及其参数传递方式
2017/08/02 Python
Python字符串通过'+'和join函数拼接新字符串的性能测试比较
2019/03/05 Python
CSS3 渐变(Gradients)之CSS3 径向渐变
2016/07/08 HTML / CSS
HTML5制作酷炫音频播放器插件图文教程
2014/12/30 HTML / CSS
HTML里显示pdf、word、xls、ppt的方法示例
2020/04/14 HTML / CSS
美国儿童运动鞋和服装零售商:Kids Foot Locker
2017/08/05 全球购物
Origins悦木之源英国官网:雅诗兰黛集团高端植物护肤品牌
2017/11/06 全球购物
《从现在开始》教学反思
2014/04/15 职场文书
社区创先争优承诺书
2014/08/30 职场文书
出纳试用期自我鉴定范文
2014/09/16 职场文书
报表员工作失误检讨书范文
2014/09/19 职场文书
简爱读书笔记
2015/06/26 职场文书
HTTP中的Content-type详解
2022/01/18 HTML / CSS