jquery基础教程——如何制作简单的dialog插件

[ 840 查看 / 1 回复 ]

返回列表

孤独小新

孤独小新

组别管理员
性别
积分1739
帖子1707
注册时间 2007-12-26

2009-02-26 19:59 |只看楼主 1^#

字体大小: t T

很多朋友都在跃跃欲试打算打造自己的jquery插件，
我是烦透了了jquery ui的dialog插件，所以突发奇想自己写一个。先申明就是随便这么一写，太多的还没有完善，之所以贴出来就是给大家一个参考。

下面大家跟我一起打造一个jquery dialog插件

首先创建一个插件

$.fn.dialog=function(){
}
下面我们首先考虑当您要现实的信息弹出来的时候，文档上面有一个遮罩层是必需的
那我们来编写一个遮罩层
$.fn.dialog=function(){
this.MaskDiv=function()
{

var wnd = $(window), doc = $(document);
//alert(doc.height());
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"});
}
}
注：这个遮罩函数也不怎么复杂，这里我就不过多的讲解了，有不懂的加群来问

遮罩做好以后我们就需要来写信息提示显示的位置了，下面我们在写一个显示位置的函数。

$.fn.dialog=function(){
this.MaskDiv=function()
{

var wnd = $(window), doc = $(document);
//alert(doc.height());
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);
}
}
我们这里主要是让信息显示在中间

完整代码：

$.fn.dialog=function(){

this.MaskDiv=function()
{

var wnd = $(window), doc = $(document);
//alert(doc.height());
if(wnd.height() > doc.height()){ //当高度少于一屏
wHeight = wnd.height();
}else{//当高度大于一屏
wHeight = doc.height();
}
//创建遮罩背景
$("body").append("

");
$("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("
提示

");
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;
}

TOP

1G空间100元

组别注册会员
性别
积分64
帖子65
注册时间 2008-10-24

2009-02-27 13:38 |只看该用户 2^#

字体大小: t T

好东东哦！
谢谢楼主分享啊

广州主机深圳空间

TOP

返回列表

上一主题 | 下一主题

创想C2C商城高级企业版V4.03发布	创想企业网站建设解决方案	商城高级企业版全新亮相	好客玫琳凯直销联盟网
创想ECS系统安装配置手册	创想商务网B2B高级企业版	创想正在进行的优惠活动	青龙建材装饰城
创想ECS系统使用操作指南	创想ECS系统风格模板技术	创想软件使用文档中心	海量网页设计素材共享