lhgdialog3.5.2demo总结

最新推荐文章于 2020-02-27 20:40:07 发布

原创最新推荐文章于 2020-02-27 20:40:07 发布 · 230 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

JavaScript 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了jQuery方式和普通函数式在窗口操作中的应用，包括配置参数使用、窗口大小、位置、遮罩层、皮肤、按钮功能等，并提供了多个示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jQuery方式和普通函数式

jQuery方式调用
J(function(){
J('#btn1').dialog({ id:'test1', html:'<h3>我是jQuery方式调用的窗口</h3>' });
});

普通函数方式调用
function opdg( id ){
var dg = new J.dialog({ id:id, html:'<h3>我是普通函数方式调用的窗口</h3>' });
dg.ShowDialog();
}

常规配置参数使用演示

开启遮罩层，锁定屏幕，并消除浏览器右边滚动条(3.5.2新增)
J('#btn14').dialog({ id:'test14', cover:true, html:'我不能对页面进行操作了', lockScroll:true });

使用chrome皮肤的窗口(3.5.0新增)
J('#btn41').dialog({ id:'test41', skin:'chrome', html:'我是使用了chrome皮肤的窗口' });

重新设定取消按钮的文本，并改变取消按钮关闭窗口的默认动作(3.4.2新增)
J('#btn37').dialog({ id:'test37', skin:'aero', cancelBtnTxt:'确定', onCancel:function(){alert('我成了确定按钮了');}, html:'我改变了取消按钮' });

浏览器大小改变后窗口位置也改变(3.4.2新增)
J('#btn38').dialog({ id:'test38', autoPos:{left:'center',top:'center'}, html:'我的位置随着浏览器的大小的改变而改变' });

设置遮罩层颜色为黑色，透明度为0.4(3.4.1新增)
J('#btn34').dialog({ id:'test34', cover:true, bgcolor:'#000', opacity:0.2, html:'遮罩层的颜色被我设成黑的了' });

双击标题栏可最大化还原窗口(3.4.1新增)
J('#btn35').dialog({ id:'test35', html:'我可以通过双击标题栏最大化和还原窗口了' });

通过按钮实现窗口最大化还原(3.4.1新增)
J('#btn36').dialog({ id:'test36', html:'我是通过按钮来实现的最大化和还原' });
最大化»

不显示最大化按钮示例(3.4.0新增)
J('#btn28').dialog({ id:'test28', maxBtn:false, title:'不显示最大化按钮', html:'我不显示最大化的按钮了' });

显示最小化按钮示例(3.4.0新增)
J('#btn29').dialog({ id:'test29', minBtn:true, title:'显示最小化按钮', html:'我显示最小化的按钮了' });

2秒钟后自动关闭窗口示例(3.4.0新增)
J('#btn30').dialog({ id:'test30', timer:2, title:'2秒钟后自动关闭窗口', html:'我2秒钟后自动关闭了' });

id为"test3"的窗口标题为"我更改了标题"示例
J('#btn3').dialog({ id:'test3', title:'我更改了标题', html:'我的id是test3，我是标题是"我更改了标题"' });

设置窗口的大小
J('#btn4').dialog({ id:'test4', width:300, height:200, html:'窗口的大小改为300X200' });

是否显示标题栏
此示例请参照皮肤制作里的示例，因为注意如果不显示一定要选择相应的皮肤，无标题栏的皮肤，而且设为不显示后iconTitle,xButton参数都无效了。

不显示窗口左边小图标
J('#btn5').dialog({ id:'test5', iconTitle:false, html:'我不显示窗口左边的小图标' });

不显示窗口右边的X关闭按钮
J('#btn6').dialog({ id:'test6', xButton:false, html:'我不显示窗口右边的X关闭按钮' });

不显示窗口下方的按钮栏
J('#btn7').dialog({ id:'test7', btnBar:false, html:'我不显示按钮栏' });

不显示窗口按钮栏上的取消按钮
J('#btn8').dialog({ id:'test8', cancelBtn:false, html:'我不显示取消按钮' });

内容页参数为page且为content.html文件
J('#btn9').dialog({ id:'test9', page:'content.html' });

内容页参数为page且内容为外部链接qq.com，此时注意link参数一定要设为true
J('#btn10').dialog({ id:'test10', page:'http://www.qq.com', link:true, width:800, height:600, title:'QQ首页' });

内容页参数为html且html值为DOM对象
J('#btn11').dialog({ id:'test11', html:J('#obj')[0] });

开启静止定位，并自定义窗口弹出的位置
J('#btn12').dialog({ id:'test12', html:'我可以随屏滚动', fixed:true, left:100, top:100 });

开启静止定位，并将窗口定位在右下角
J('#btn13').dialog({ id:'test13', html:'我可以做为右下角的消息窗口', fixed:true, left:'right', top:'bottom' });

不允许拖动和改变大小
J('#btn15').dialog({ id:'test15', drag:false, resize:false, html:'我不能拖动和改变大小了' });

不请允许拖出浏览器可视域
J('#btn16').dialog({ id:'test16', rang:true, html:'我不能拖出浏览器了' });

改变加载窗口时的提示文本
J('#btn17').dialog({ id:'test17', loadingText:'我是窗口加载时的提示文本，哈哈...', html:'' });

自适窗口内容的大小
J('#btn18').dialog({ id:'test18', width:300, height:200, autoSize:true, page:'content1.html' });

parent参数示例并且父子窗口都加了遮罩层
//这里调用窗口都用的普通函数方式
function opdg1(){
var testDG = new J.dialog({ id:'test19', page:'content2.html', cover:true });
testDG.ShowDialog();
}
//内容页content2.html里的代码为：
var DG = frameElement.lhgDG;
function opChild()
{
var testDG2 = new DG.curWin.J.dialog({ id:'child', cover: true, html:'我是子窗口', width:300, height:200, parent:DG });
testDG2.ShowDialog();
}
//你可以打开content2.html页面查看里面的代码，这里要注意如果想在窗口中弹出子窗口不要在子窗口的页面中再加载lhgdialog.min.js来调用弹出窗口的函数，一定要用curWin.J.dialog，因为不这样父子窗口间的zIndex值会是2个，它们层叠的次序就乱了。

dgOnLoad参数示例
// 这是使用html参数时dgOnLoad代码前面的运行按钮
function opdg2()
{
var testDG1 = new J.dialog({
id:'test20',
html:'<h3 id="txt">lhgdialog</h3>',
dgOnLoad:function(){
J('#txt').html( '我使用dgOnLoad参数改变了文本' );
}
});
}
// 这里使用的page参数时dgOnLoad代码后面的运行按钮
function opdg3()
{
var testDG2 = new J.dialog({
id:'test21',
page:'content3.html',
dgOnLoad:function(){
J('#txt',testDG2.dgDoc).html( '我原来的文本是lhgdialog' );
}
});
}

onXclick参数示例
J('#btn22').dialog({ id:'test22', onXclick:function(){alert('我改变了关闭按钮的事件，我不能关闭窗口了');}, html:'X关闭按钮的事件被改变了' });

onCancel参数示例
J('#btn23').dialog({ id:'test23', onCancel:function(){alert('我是在窗口关闭前执行的函数');}, html:'关闭窗口前执行onCancel函数' });

其它演示示例

使用closeTime的第2个和第3个参数在标题栏动态显示关闭的秒数(3.4.2新增，3.5.2修改)
J('#btn40').dialog({ id:'test40', page:'content10.html' });

//content10.html页面里的代码为：
var DG = frameElement.lhgDG;
dg.closeTime( 10, function(){ dg.SetTitle('窗口将在10秒钟后自动关闭'); var n = 9; setInterval(function(){ dg.SetTitle('窗口将在'+n+'秒钟后自动关闭'); n--; }, 1000); }, function(){ alert('我是窗口关闭后执行的函数'); });

使用SetCancelBtn方法改变取消按钮(3.4.2新增)
J('#btn39').dialog({ id:'test39', page:'content9.html' });

//content9.html页面里的代码为：
var DG = frameElement.lhgDG;
dg.SetCancelBtn( '确定', function(){ alert('我变成确定按钮了，我执行完这句再关闭窗口'); dg.cancel(); });

在内容页中重新指定窗口标题(3.4.0新增)
J('#btn31').dialog({ id:'test31', page:'content6.html' });

//content6.html页面里的代码为：
var DG = frameElement.lhgDG;
function ok()
{
DG.SetTitle( '我是被按钮改变了的标题' );
}

在内容页中重新指定X按钮绑定的函数(3.4.0新增)
J('#btn32').dialog({ id:'test32', page:'content7.html' });

//content7.html页面里的代码为：
var DG = frameElement.lhgDG;
DG.SetXbtn( ok );
function ok()
{
alert( '我又不能关闭窗口了' );
}

在内容页中使用closeTime函数来定时关闭窗口(3.4.0新增)
J('#btn33').dialog({ id:'test33', page:'content8.html' });

//content8.html页面里的代码为：
var DG = frameElement.lhgDG;
DG.closeTime( 2 );

在调用页面关闭窗口
// 这里请注意DG得定义成全局变量
testDG3 = J('#btn24').dialog({ id:'test24', html:'我只能被调用页面上的按钮关闭', xButton:false, btnBar:false });
//关闭窗口按钮的单击事件
onclick="testDG3.cancel();"
关闭窗口»

关闭窗口刷新父页面
J('#btn25').dialog({ id:'test25', page:'content4.html' });
//content4.html页面里的代码为：
var DG = frameElement.lhgDG;
DG.addBtn( 'ok', '确定', ok );
function ok()
{
// 这里写你要操作的代码，最后写刷新代码
DG.curWin.location.reload();
}
//当调用窗口的页面被刷新，窗口就会自动关闭，所以不用调用程序的cancel关闭函数

父窗口中打开子窗口
请参阅常规配置参数使用演示里的 parent参数示例并且父子窗口都加了遮罩层示例

重新指定窗口的大小并将窗口定位在屏幕的中间(3.4.0新增)
var reSize = function()
{
testDG4.reDialogSize( 600, 500 ); testDG4.SetPosition( 'center', 'center' );
};

var testDG4 = J('#btn26').dialog({ id:'test26', html:'我的大小被改为600X500了', dgOnLoad: reSize });

增加新的按钮和移除按钮
J('#btn27').dialog({ id:'test27', page:'content5.html' });

将调用页面的值传到窗口中
// 这是运行1按钮使用的方法
J('#btn1').dialog({ id:'test1', page:'content.html' });

// content.html里的代码为：(这里注意content.html也加载了lhgcore.min.js文件)
var DG = frameElement.lhgDG;
J(function(){
J('#val').html( J('#txt1',DG.curDoc).val() );
});

// 这是运行2按钮使用的方法
function opdg1()
{
var DG = new J('#btn2').dialog({
id:'test2',
page:'content1.html',
dgOnLoad: function(){
J('#val',DG.dgDoc).html( J('#txt1').val() );
}
});
DG.ShowDialog();
}
//使用第2种方法content1.html里不用写任何代码
运行1» 运行2»

将窗口中的值传回到调用页面中
J('#btn3').dialog({ id:'test3', page:'content2.html' });

// content2.html里的代码为：(这里注意content2.html也加载了lhgcore.min.js文件)
var DG = frameElement.lhgDG;
DG.addBtn( 'ok', '确定', ok );
function ok()
{
J('#txt2',DG.curDoc).val( J('#val').html() );
DG.cancel();
}

特殊的传值示例

在调用页面调用窗口B中的值或函数
var DG = J('#btn4').dialog({ id:'test4', page:'content3.html', title:'B窗口' });

// 调用B窗口中文本框的值的按钮的代码
J('#btn5').bind( 'click', function(){
if( DG.dg )
alert( J('#inp',DG.dgDoc).val() );
else
alert( '请先打开B窗口' );
});

// 调用B窗口的函数的按钮的代码
J('#btn6').bind( 'click', function(){
if( DG.dg )
DG.dgWin.BB();
else
alert( '请先打开B窗口' );
});
调用B窗口中文本框的值» 调用B窗口的函数»

在B窗口中调用调用页面的值或函数
J('#btn7').dialog({ id:'test7', page:'content4.html', title:'B窗口' });

// 内容页content4.html的代码为：(这里注意content4.html也加载了lhgcore.min.js文件)
var DG = frameElement.lhgDG;
J(function(){
J('#btn1').bind( 'click', function(){
alert( J('#txt3',DG.curDoc).val() );
});

J('#btn2').bind( 'click', function(){
DG.curWin.AA();
});
});

在调用页面调用C窗口(也就是B窗口的子窗口)的值或函数
var DG1 = J('#btn8').dialog({ id:'test8', page:'content5.html', title:'B窗口' });

// 调用C窗口中文本框的值的按钮的代码
J('#btn9').bind( 'click', function(){
if( DG1.dg && DG1.dgWin.testDG )
alert( J('#inp',DG1.dgWin.testDG.dgDoc).val() );
else
alert( '请先打开C窗口' );
});

// 调用C窗口的函数的按钮的代码
J('#btn10').bind( 'click', function(){
if( DG1.dg && DG1.dgWin.testDG )
DG1.dgWin.testDG.dgWin.CC();
else
alert( '请先打开C窗口' );
});

// 内容页content5.html中的代码：
var DG = frameElement.lhgDG, testDG;

function opchild()
{
testDG = new DG.curWin.J.dialog({
id: 'child1',
page: 'content6.html'
});
testDG.ShowDialog();
}
调用C窗口中文本框的值» 调用C窗口的函数»

在C窗口中调用调用页面中的值或函数
J('#btn11').dialog({ id:'test11', page:'content7.html', title:'B窗口' });

// 内容页content7.html中的代码：
var DG = frameElement.lhgDG, testDG;

function opchild()
{
testDG = new DG.curWin.J.dialog({
id: 'child1',
page: 'content8.html'
});
testDG.ShowDialog();
}

// 内容页content8.html中的代码：
var DG = frameElement.lhgDG;

J(function(){
J('#btn1').bind( 'click', function(){
alert( J('#txt4',DG.curDoc).val() );
});

J('#btn2').bind( 'click', function(){
DG.curWin.AA();
});
});

在2个窗口中相互调用函数和传值(3.4.1版本新增)
// A窗口的代码
J('#btn12').dialog({ id:'test12', page:'content9.html', title:'A窗口' });

// A窗口中内容页content9.html中的代码
var DG = frameElement.lhgDG;
J(function(){
J('#btn1').bind( 'click', function(){
// test13是B窗口的id
if( DG.iDG('test13') )
alert( DG.iDoc('test13').getElementById('inpB').value );
// 也可以使用jQ方式来写
// alert( J('#inpB',DG.iDoc('test13')).val() );
else
alert( '请先打开B窗口' );
});
J('#btn2').bind( 'click', function(){
if( DG.iDG('test13') )
DG.iWin('test13').fnB();
else
alert( '请先打开B窗口' );
});
J('#btn3').bind( 'click', function(){
if( DG.iDG('test13') )
DG.iWin('test13').DG.cancel();
else
alert( '请先打开B窗口' );
});
});
function fnA()
{
alert( '我是A窗口的函数' );
}

// B窗口的代码
J('#btn13').dialog({ id:'test13', page:'content10.html', title:'B窗口' });

// B窗口中内容页content10.html中的代码
var DG = frameElement.lhgDG;
J(function(){
J('#btn1').bind( 'click', function(){
// test12是A窗口的id
if( DG.iDG('test12') )
alert( DG.iDoc('test12').getElementById('inpA').value );
// 也可以使用jQ方式来写
// alert( J('#inpA',DG.iDoc('test12')).val() );
else
alert( '请先打开A窗口' );
});
J('#btn2').bind( 'click', function(){
if( DG.iDG('test12') )
DG.iWin('test12').fnA();
else
alert( '请先打开A窗口' );
});
J('#btn3').bind( 'click', function(){
if( DG.iDG('test12') )
DG.iWin('test12').DG.cancel();
else
alert( '请先打开A窗口' );
});
});
function fnB()
{
alert( '我是B窗口的函数' );
}
窗口A» 窗口B»

在父窗口和子窗口之间相互调用函数和传值(3.4.1版本新增)
// 父窗口的代码
J('#btn14').dialog({ id:'test14', page:'content11.html', title:'父窗口', cover:true });

// 父窗口中内容页content11.html中的代码
var DG = frameElement.lhgDG;
J(function(){
J('#btn1').bind( 'click', function(){
// child是子窗口的id
if( DG.iDG('child') )
alert( DG.iDoc('child').getElementById('inpB').value );
// 也可以使用jQ方式来写
// alert( J('#inpB',DG.iDoc('child')).val() );
else
alert( '请先打开子窗口' );
});

J('#btn2').bind( 'click', function(){
if( DG.iDG('child') )
DG.iWin('child').fnB();
else
alert( '请先打开子窗口' );
});
});
function fnA()
{
alert( '我是父窗口的函数' );
}
// 打开子窗口的代码
function opchild()
{
var childDG = new DG.curWin.J.dialog({ id:'child', title:'子窗口', page:'content12.html', parent:DG });
childDG.ShowDialog();
}

// 子窗口中内容页content12.html中的代码
var DG = frameElement.lhgDG;
J(function(){
J('#btn1').bind( 'click', function(){
// test14是父窗口的id
if( DG.iDG('test14') )
alert( DG.iDoc('test14').getElementById('inpA').value );
// 也可以使用jQ方式来写
// alert( J('#inpA',DG.iDoc('test14')).val() );
else
alert( '请先打开父窗口' );
});

J('#btn2').bind( 'click', function(){
if( DG.iDG('test14') )
DG.iWin('test14').fnA();
else
alert( '请先打开父窗口' );
});
});
function fnB()
{
alert( '我是子窗口的函数' );
}

这是框架页面中的topFrame页面
这是在框架最顶层页面弹出的窗口

J('#btn1').dialog({ id:'test1', html:'我是在框架的最顶层页面弹出的窗口', rang: true });

这是框架页面中的bottomFrame页面
这是在窗口调用页面弹出的窗口，使用了t=self参数

// 此页面加载lhgdialog.min.js文件代码为：
<script type="text/javascript" src="lhgdialog.min.js?t=self"></script>

J('#btn2').dialog({ id:'test2', html:'我是在窗口调用页面弹出的窗口', rang: true });

注意：不要在框架的不同框架页面同时弹出窗口，因为这样是在不同调用页面弹出的窗口，虽然窗口都创建在同一页面，但因为是不同的调用页面，所以也会出现窗口的层叠次序混乱，所以记住在框架中只能在其中的一个框架页面调用窗口。本页面只是作为示例用，实际中不要如此使用。

主页面
var dg = new J.dialog({
id:'A窗口id',
title:'A窗口',
page:'A页面路径'});
dg.ShowDialog();
function a()
{
alert( '主页面方法' );
}
----------------------------------------------
A页面
var DG = frameElement.lhgDG;
var child_dg = new DG.curWin.J.dialog({
id:'B窗口id',
title:'B窗口',
page:'B页面路径',
parent:DG });
child_dg.ShowDialog();
function b()
{
alert( 'A页面方法' );
}
----------------------------------------------
B页面
var DG = frameElement.lhgDG;
DG.iWin('A窗口id').b();
DG.curWin.a();