1. 版本信息
目前的版本是 3.1.3 发布于2010-06-12
2. 注意事项
- lhgdialog目录是一个整体,不可破坏里面的目录结构,也不可对里面的文件改名,可以改目录名
- lhgcore.min.js文件为插件所用的库文件,此文件可放在其它任意目录里
- 各目录及文件的用途:
lhgcore.min.js:插件所用的库文件,此库的使用方法与jQuery差不多,可以说是个简化的jQuery,你可以在其它地方象使用jQuery一样使用它
lhgdialog.js:插件的核心文件,使用插件时要引入此文件,此文件是经过压缩的
lhgdialog.css:插件的样式表文件,此文件无需引入,插件会自动加载此文件
目录images:窗口插件所使用的图片的文件夹
index.html:示例说明文件,使用中不需要此文件,可删除
_lhgdialog.js:插件的核心文件lhgdialog.js的未压缩的源文件,供大家学习使用的,此文件是未经过压缩的,可删除
目录_content:内容页示例文件夹,示例中所需的内容页示例文件都在此文件夹中,使用中不需要此文件夹,可删除
目录_skins:插件的的皮肤文件目录,插件共提供了5种皮肤,皮肤的使用方法请参考下面的皮肤制作安装使用说明
3. 支持的浏览器
IE 6.0+ , Firefox 2.0+ , Chrome, Opera 9.5+ , Safari 3.0+
1. 引入插件的样式表文件
使用lhgdialog弹出窗口插件要在
最顶层的页面中引入
lhgdialog.css,示例代码:
<head>
<link type="text/css" href="lhgdialog.css" rel="stylesheet"/>
<script type="text/javascript" src="lhgcore.min.js"></script>
<script type="text/javascript" src="lhgdialog.js"></script>
</head>
注:最顶层页面就是指:如果你使的插件要跨框架,窗口就会创建在整个框架的最顶层页面,所以lhgdialog.css样式表文件也要写在你整个框架的最顶层页面上
2. 插件所需文件的引入
使用lhgdialog弹出窗口插件要在你使用此插件的页面中引入
lhgcore.min.js和
lhgdialog.js,示例代码:
<head>
<script type="text/javascript" src="lhgcore.min.js"></script>
<script type="text/javascript" src="lhgdialog.js"></script>
</head>
注:lhgcore.min.js一定要在lhgdialog.js前引入
3. 插件的调用函数说明
插件的调用函数有2种调用方法,分别用在不同的使用环境中
第一种为jQ方式调用方法,这种方法主要用在页面中只有一个或少数几个调用插件时,或不需要传参数时,形式如下:
J(function(){
{
J('#test').dialog({
title:'lhgdialog',
width:400,
height:300,
cover:true,
page:'samples.html'
});
}
第二种为普通函数式调用方法,这种方法主要用在页面中多个地方调用插件时,或需要传参数时,形式如下:
function opdlg( args )
{
var dlg = new J.ui.dialog({ id: 'd1' .... });
dlg.ShowDialog();
}
4. 关于在frameset框架集中的使用
在html中没有任何元素可以浮动在 frameset框架之上的,如果你想要弹窗浮动在 frameset之上, 你必须在 frameset 页面外层在加上 iframe 框架,
然后把frameset页面嵌入到这个iframe里就可以了,这也是目前所有解决 div层浮动在 frameset之上的可行方法。示例代码:
比如你的frameset页为
frame.html,代码为:
<frameset rows="80,*" frameborder="no" border="0" framespacing="0">
<frame src="about:blank" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" title="topFrame" />
<frame src="dialog.html" name="mainFrame" id="mainFrame" title="mainFrame" />
</frameset>
其中的dialog.html就为弹窗加载的页面。
这时我们就需要再新建一个index.html文件,里面代码为:
<body>
<iframe frameborder="0" style="width:100%;height:100%" src="frame.html"></iframe>
//这里的frame.html就为你的frameset页面
</body>
1. 主调函数参数
说明:J('#id').dialog({
参数 })或var d = new J.ui.dialog({
参数 }),形式为json形式,键/值 对,所有参数如下:
参数名 |
类型 |
值形式 |
描述 |
id |
文本 |
lhgdlgId(默认值) |
创建的弹出窗口的id,如果你的页面只弹出一个窗口的话,这个可以不写。如果一个页面有多个弹出窗口,那这个属性就一定要写,而且不能重复。 |
title |
文本 |
lhgdialog(默认值) |
窗口标题 |
width |
数值 |
400(默认值) |
窗口内容区的宽度 |
height |
数值 |
300(默认值) |
窗口内容区的高度 |
html |
文本 |
html代码 |
窗口的内容页为HTML代码,可以是HTML代码或DOM对象 |
page |
文本 |
_content/01.html(自定义内容页) http://www.xxx.com(外部链接) |
窗口的内容页为一个单独的页面文件,这个文件的路径是内容页面文件相对于调用窗口插件的路径或也可使用绝对路径。如果此参数的值为不同域的外部链接,那一定要使下面的link参数为真 |
link |
布尔 |
false(默认值) |
是否为外部链接,如果是此参数一定要为真,不然程序会出错 |
cover |
布尔 |
false(默认值) |
是否打开遮罩层 |
event |
文本 |
click(默认值) |
触发打开窗口的事件类型 |
btns |
布尔 |
true(默认值) |
是否显示窗口按钮栏 |
drag |
布尔 |
true(默认值) |
是否允许拖动窗口 |
resize |
布尔 |
true(默认值) |
是否允许拖动改变窗口大小 |
rang |
布尔 |
false(默认值) |
是否在浏览器可视窗口内拖动 |
top |
数值(文本) |
'top':窗口在浏览器可视区的最上面 'center':窗口在浏览器可视区的中间(默认值) bottom:窗口在浏览器可视区的最下面 数值:窗口在指定数值的位置 |
窗口在浏览器中的位置,此参数结合下面的left参数可在页面的的四个角进行定位 |
left |
数值(文本) |
'left':窗口在浏览器可视区的最左面 'center':窗口在浏览器可视区的中间(默认值) bottom:窗口在浏览器可视区的最右面 数值:窗口在指定数值的位置 |
窗口在浏览器中的位置,此参数结合上面的top参数可在页面的的四个角进行定位 |
fixed |
布尔 |
false(默认值) |
是否充许窗口随屏滚动定位 |
SetTopWindow |
对象 |
无 |
指定窗口弹出时的页面的window对象,如果是在框架中,你可以指定框架中的任意页面,如不指定则在框架的最顶层页面弹出 |
regDragWindow |
数组 |
无 |
注册拖动的页面的window对象数组,这个参数的作用就是拖动时如果滑过没注册的页面时会有停顿的感觉 |
parent |
对象 |
无 |
子窗口的父窗口对象,此参数只用在弹出的窗口中再弹出子窗口时指定父窗口对象,具体使用方法参照示例 |
cusfn |
函数 |
无 |
自定义函数,注意:只有内容页参数为html时,此参数才可以使用,而使用page参数时此参数不可用 |
2. 内置函数说明
函数名 |
返回值类型 |
参数 |
描述 |
cancel |
void |
无 |
关闭窗口函数 |
reDialogSize |
void |
width:窗口的宽度 height:窗口的高度 |
重新指定窗口的大小 |
addBtn |
void |
id:按钮的id txt:按钮的文本 fn:按钮绑定的函数 |
创建新的按钮 |
removeBtn |
void |
id:按钮的id |
移除窗口中的按钮 |
reload |
void |
win:指定要刷新或跳转的页面对象 url:跳转的url地址 |
关闭窗口并刷新或跳转指定的页面 |
3. 内置对象说明
对象名 |
类型 |
描述 |
dlg |
dom |
窗口元素DOM对象,可通过些对象对窗口和窗口内元素进行操作 |
top |
window |
弹出窗口所在的顶层页面的window对象 |
win |
window |
加载弹出窗口插件的页面的window对象 |
opt |
参数对象 |
窗口的参数设置对象,例如: var dialog = J('#id').dialog(); dialog.opt.title = 'test'; |
inwin |
window |
如果内容页为一个文件时,此对象指的是内容页文件的window对象 |
4. 在内容页中使用的对象
如果你的内容页不是单个的文件,也就是如果用的html参数就直接使用上面的函数和对象就行了,如果使用page参数,则要在内容页中使用 frameElement.dg 这个全局对象,代表弹出窗口的实例对象,使用方法请参照示例。
1. 常规功能
示例代码:J('#a').dialog({ title: '示例', cover:true, rang: true, html: '<p>lhgdialog</p>' });
外部链接
示例代码:J('#b').dialog({ id: 'd1', title: '外部链接', page: 'http://www.google.com', link: true, btns: false, width: 700, height: 500 });
内部单独页面
示例代码:J('#c').dialog({ id: 'd2', title: '内部链接', page: '_content/01.html' });
窗口随屏滚动,并在右下角
示例代码:J('#d').dialog({ id: 'd2', title: '随屏滚动', page: '<p>lhgdialog</p>', fixed:true, top:'bottom', left:'right', width: 200, height: 100, btns: false });其它的代码请参照内容页里的代码
2. 其它功能
调用页面与内容页间的传值 此输入框的值在窗口打开后传到内容页里
示例代码:J('#e').dialog({ id: 'd3', page: '_content/02.html' }); 其它的代码请参照内容页里的代码
在弹出窗口中创建子窗口
示例代码:J('#f').dialog({ id: 'd4', page: '_content/03.html', width: 400, height: 250, cover: true }); 其它的代码请参照内容页里的代码
关闭窗口并刷新或跳转调用页面
示例代码:J('#g').dialog({ id: 'd5', page: '_content/04.html' }); 其它的代码请参照内容页里的代码
当内容页参数为html时使用自定义函数并控制窗口的大小
示例代码:var dialog = J('#h').dialog({ id: 'd7', html: '<input id="inp" type="button" value="改变窗口大小"/>', cusfn: resize, width: 400, height: 250 }); resize函数代码请看上面调用处的代码
当内容页参数为html时改变关闭按钮X的事件函数
示例代码:
var dialog1 = J('#i').dialog({
id: 'd8',
html: '<p>lhgdialog</p>',
cusfn: function()
{
J('#xbtn',dialog1.dlg).click(function(){
alert( '此按钮的函数已被改变,不再关闭窗口了!' );
});
}
});
3. 各种内容页间的传值
插件目录中的_skin目录是插件提供的几款皮肤,由于窗口动态换肤的情况很少,也为了减少插件的大小,所以并没有提供动态换肤的功能。插件中的lhgdialog.css和images目录是皮肤
所用到的2个文件,你要想换肤的话,只要把_skin目录里相应皮肤的目录里的lhgdialog.css文件和images目录复制到插件的目录,覆盖原来的文件就可以了。如果你想自己制作皮肤,那
你只需要相应修改lhgdialog.css文件和images目录里的图片就可以了。