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 相关文章推荐
JQuery 应用 JQuery.groupTable.js
Dec 15 Javascript
onclick与listeners的执行先后问题详细解剖
Jan 07 Javascript
jquery批量控制form禁用的代码
Aug 06 Javascript
javascript判断office版本示例
Apr 11 Javascript
js控制href内容的连接内容的变化示例
Apr 30 Javascript
AngularJS基础教程之简单介绍
Sep 27 Javascript
深入理解JS中的substr和substring
Apr 26 Javascript
js无提示关闭浏览器窗口的两种方法分析
Nov 06 Javascript
JQuery 进入页面默认给已赋值的复选框打钩
Mar 23 jQuery
JavaScript 正则命名分组【推荐】
Jun 07 Javascript
Vue 框架之动态绑定 css 样式实例分析
Nov 14 Javascript
图文详解vue框架安装步骤
Feb 12 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
Syphon 虹吸式咖啡壶冲煮–拨动法
2021/03/03 冲泡冲煮
php Mysql日期和时间函数集合
2007/11/16 PHP
PHP 日期时间函数的高级应用技巧
2009/10/10 PHP
php5 non-thread-safe和thread-safe这两个版本的区别分析
2010/03/13 PHP
PHP类中Static方法效率测试代码
2010/10/17 PHP
与文件上传有关的php配置参数总结
2013/06/14 PHP
PHP中file_exists使用中遇到的问题小结
2016/04/05 PHP
php中文乱码问题的终极解决方案汇总
2017/08/01 PHP
PHP中类与对象功能、用法实例解读
2020/03/27 PHP
cssQuery()的下载与使用方法
2007/01/12 Javascript
JQuery,Extjs,YUI,Prototype,Dojo 等JS框架的区别和应用场景简述
2010/04/15 Javascript
JavaScript中常用的运算符小结
2012/01/18 Javascript
JavaScript原型链示例分享
2014/01/26 Javascript
深入探寻seajs的模块化与加载方式
2015/04/14 Javascript
Centos7 中安装 Node.js v4.4.4
2016/11/03 Javascript
详解基于node的前端项目编译时内存溢出问题
2017/08/01 Javascript
AngularJS基于MVC的复杂操作实例讲解
2017/12/31 Javascript
配置一个vue3.0项目的完整步骤
2019/04/26 Javascript
jQuery开发仿QQ版音乐播放器
2020/07/10 jQuery
基于wxpython实现的windows GUI程序实例
2015/05/30 Python
Python3爬虫爬取百姓网列表并保存为json功能示例【基于request、lxml和json模块】
2018/12/05 Python
解决Python内层for循环如何break出外层的循环的问题
2019/06/24 Python
基于python cut和qcut的用法及区别详解
2019/11/22 Python
python高级特性简介
2020/08/13 Python
Django使用django-simple-captcha做验证码的实现示例
2021/01/07 Python
Agoda.com官方网站:便宜预订全球酒店,高达80%的折扣
2018/04/04 全球购物
师范生个人推荐信
2013/11/29 职场文书
致铅球运动员广播稿精选
2014/01/12 职场文书
美术国培研修感言
2014/02/12 职场文书
上课看小说检讨书
2014/02/22 职场文书
2014年两会学习心得体会
2014/03/10 职场文书
小学庆六一活动总结
2014/08/28 职场文书
教师学习三严三实心得体会
2014/10/13 职场文书
奶茶店的创业计划书该怎么写?
2019/07/15 职场文书
nginx反向代理时如何保持长连接
2021/03/31 Servers
Spring Cloud OAuth2实现自定义token返回格式
2022/06/25 Java/Android