2023年11月25日发(作者：)
lhgdialog窗⼝的各种在线演⽰⽰例
jQuery⽅式和普通函数式
1.
jQuery⽅式调⽤
J(function(){
J('#btn1').dialog({ id:'test1', html:'我是jQuery⽅式调⽤的窗⼝' });
});
2.
普通函数⽅式调⽤
function opdg( id ){
var dg = new ({ id:id, html:'我是普通函数⽅式调⽤的窗⼝' });
alog();
}
常规配置参数使⽤演⽰
1.
开启遮罩层，锁定屏幕，并消除浏览器右边滚动条(3.5.2新增)
J('#btn14').dialog({ id:'test14', cover:true, html:'我不能对页⾯进⾏操作了', lockScroll:true });
2.
使⽤chrome⽪肤的窗⼝(3.5.0新增)
J('#btn41').dialog({ id:'test41', skin:'chrome', html:'我是使⽤了chrome⽪肤的窗⼝' });
3.
重新设定取消按钮的⽂本，并改变取消按钮关闭窗⼝的默认动作(3.4.2新增)
J('#btn37').dialog({ id:'test37', skin:'aero', cancelBtnTxt:'确定', onCancel:function(){alert('我成了确定按钮了');}, html:'我改变了取消按钮' });
4.
浏览器⼤⼩改变后窗⼝位置也改变(3.4.2新增)
J('#btn38').dialog({ id:'test38', autoPos:{left:'center',top:'center'}, html:'我的位置随着浏览器的⼤⼩的改变⽽改变' });
5.
设置遮罩层颜⾊为⿊⾊，透明度为0.4(3.4.1新增)
J('#btn34').dialog({ id:'test34', cover:true, bgcolor:'#000', opacity:0.2, html:'遮罩层的颜⾊被我设成⿊的了' });
6.
双击标题栏可最⼤化还原窗⼝(3.4.1新增)
J('#btn35').dialog({ id:'test35', html:'我可以通过双击标题栏最⼤化和还原窗⼝了' });
7.
通过按钮实现窗⼝最⼤化还原(3.4.1新增)
J('#btn36').dialog({ id:'test36', html:'我是通过按钮来实现的最⼤化和还原' });
8.
不显⽰最⼤化按钮⽰例(3.4.0新增)
J('#btn28').dialog({ id:'test28', maxBtn:false, title:'不显⽰最⼤化按钮', html:'我不显⽰最⼤化的按钮了' });
9.
显⽰最⼩化按钮⽰例(3.4.0新增)
J('#btn29').dialog({ id:'test29', minBtn:true, title:'显⽰最⼩化按钮', html:'我显⽰最⼩化的按钮了' });
10.
2秒钟后⾃动关闭窗⼝⽰例(3.4.0新增)
J('#btn30').dialog({ id:'test30', timer:2, title:'2秒钟后⾃动关闭窗⼝', html:'我2秒钟后⾃动关闭了' });
11.
id为"test3"的窗⼝标题为"我更改了标题"⽰例
J('#btn3').dialog({ id:'test3', title:'我更改了标题', html:'我的id是test3，我是标题是"我更改了标题"' });
12.
设置窗⼝的⼤⼩
J('#btn4').dialog({ id:'test4', width:300, height:200, html:'窗⼝的⼤⼩改为300X200' });
13.
是否显⽰标题栏
此⽰例请参照⾥的⽰例，因为注意如果不显⽰⼀定要选择相应的⽪肤，⽆标题栏的⽪肤，⽽且设为不显⽰后iconTitle,xButton参数都⽆效了。
14.
不显⽰窗⼝左边⼩图标
J('#btn5').dialog({ id:'test5', iconTitle:false, html:'我不显⽰窗⼝左边的⼩图标' });
15.
不显⽰窗⼝右边的X关闭按钮
J('#btn6').dialog({ id:'test6', xButton:false, html:'我不显⽰窗⼝右边的X关闭按钮' });
16.
不显⽰窗⼝下⽅的按钮栏
J('#btn7').dialog({ id:'test7', btnBar:false, html:'我不显⽰按钮栏' });
17.
不显⽰窗⼝按钮栏上的取消按钮
J('#btn8').dialog({ id:'test8', cancelBtn:false, html:'我不显⽰取消按钮' });
18.
内容页参数为page且为⽂件
J('#btn9').dialog({ id:'test9', page:'' });
19.
内容页参数为page且内容为外部链接，此时注意link参数⼀定要设为true
J('#btn10').dialog({ id:'test10', page:'', link:true, width:800, height:600, title:'QQ⾸页' });
20.
内容页参数为html且html值为DOM对象
J('#btn11').dialog({ id:'test11', html:J('#obj')[0] });
21.
开启静⽌定位，并⾃定义窗⼝弹出的位置
J('#btn12').dialog({ id:'test12', html:'我可以随屏滚动', fixed:true, left:100, top:100 });
22.
开启静⽌定位，并将窗⼝定位在右下⾓
J('#btn13').dialog({ id:'test13', html:'我可以做为右下⾓的消息窗⼝', fixed:true, left:'right', top:'bottom' });
23.
不允许拖动和改变⼤⼩
J('#btn15').dialog({ id:'test15', drag:false, resize:false, html:'我不能拖动和改变⼤⼩了' });
24.
不请允许拖出浏览器可视域
J('#btn16').dialog({ id:'test16', rang:true, html:'我不能拖出浏览器了' });
25.
改变加载窗⼝时的提⽰⽂本
J('#btn17').dialog({ id:'test17', loadingText:'我是窗⼝加载时的提⽰⽂本，哈哈...', html:'' });
26.
⾃适窗⼝内容的⼤⼩
J('#btn18').dialog({ id:'test18', width:300, height:200, autoSize:true, page:'' });
27.
parent参数⽰例并且⽗⼦窗⼝都加了遮罩层
//这⾥调⽤窗⼝都⽤的普通函数⽅式
function opdg1(){
var testDG = new ({ id:'test19', page:'', cover:true });
alog();
}
//内容页⾥的代码为：
var DG = ;
function opChild()
{
var testDG2 = new ({ id:'child', cover: true, html:'我是⼦窗⼝', width:300, height:200, parent:DG });
alog();
}
//你可以打开页⾯查看⾥⾯的代码，这⾥要注意如果想在窗⼝中弹出⼦窗⼝不要在⼦窗⼝的页⾯中再加载来调⽤
弹出窗⼝的函数，⼀定要⽤，因为不这样⽗⼦窗⼝间的zIndex值会是2个，它们层叠的次序就乱了。
28.
dgOnLoad参数⽰例
// 这是使⽤html参数时dgOnLoad代码 前⾯的运⾏按钮
function opdg2()
{
var testDG1 = new ({
id:'test20',
html:'lhgdialog
',
dgOnLoad:function(){
J('#txt').html( '我使⽤dgOnLoad参数改变了⽂本' );
}
});
}
// 这⾥使⽤的page参数时dgOnLoad代码 后⾯的运⾏按钮
function opdg3()
{
var testDG2 = new ({
id:'test21',
page:'',
dgOnLoad:function(){
J('#txt',).html( '我原来的⽂本是lhgdialog' );
}
});
}
29.
J('#btn23').dialog({ id:'test23', onCancel:function(){alert('我是在窗⼝关闭前执⾏的函数');}, html:'关闭窗⼝前执⾏onCancel函数' });
其它演⽰⽰例
1.
使⽤closeTime的第2个和第3个参数在标题栏动态显⽰关闭的秒数(3.4.2新增，3.5.2修改)
J('#btn40').dialog({ id:'test40', page:'' });
//页⾯⾥的代码为：
var DG = ;
ime( 10, function(){ le('窗⼝将在10秒钟后⾃动关闭'); var n = 9; setInterval(function(){ le('窗⼝将在'+n+'秒钟后
⾃动关闭'); n--; }, 1000); }, function(){ alert('我是窗⼝关闭后执⾏的函数'); });
2.
使⽤SetCancelBtn⽅法改变取消按钮(3.4.2新增)
J('#btn39').dialog({ id:'test39', page:'' });
//页⾯⾥的代码为：
var DG = ;
celBtn( '确定', function(){ alert('我变成确定按钮了，我执⾏完这句再关闭窗⼝'); (); });
3.
在内容页中重新指定窗⼝标题(3.4.0新增)
J('#btn31').dialog({ id:'test31', page:'' });
//页⾯⾥的代码为：
var DG = ;
function ok()
{
le( '我是被按钮改变了的标题' );
}
4.
在内容页中重新指定X按钮绑定的函数(3.4.0新增)
J('#btn32').dialog({ id:'test32', page:'' });
//页⾯⾥的代码为：
var DG = ;
n( ok );
function ok()
{
alert( '我⼜不能关闭窗⼝了' );
}
5.
在内容页中使⽤closeTime函数来定时关闭窗⼝(3.4.0新增)
J('#btn33').dialog({ id:'test33', page:'' });
//页⾯⾥的代码为：
var DG = ;
ime( 2 );
6.
在调⽤页⾯关闭窗⼝
// 这⾥请注意DG得定义成全局变量
testDG3 = J('#btn24').dialog({ id:'test24', html:'我只能被调⽤页⾯上的按钮关闭', xButton:false, btnBar:false });
//关闭窗⼝按钮的单击事件
οnclick="();"
7.
关闭窗⼝刷新⽗页⾯
J('#btn25').dialog({ id:'test25', page:'' });
//页⾯⾥的代码为：
var DG = ;
( 'ok', '确定', ok );
function ok()
{
// 这⾥写你要操作的代码，最后写刷新代码
();
}
//当调⽤窗⼝的页⾯被刷新，窗⼝就会⾃动关闭，所以不⽤调⽤程序的cancel关闭函数
8.
⽗窗⼝中打开⼦窗⼝
请参阅 常规配置参数使⽤演⽰ ⾥的 parent参数⽰例并且⽗⼦窗⼝都加了遮罩层 ⽰例
9.
重新指定窗⼝的⼤⼩并将窗⼝定位在屏幕的中间(3.4.0新增)
var reSize = function()
{
ogSize( 600, 500 ); ition( 'center', 'center' );
};
var testDG4 = J('#btn26').dialog({ id:'test26', html:'我的⼤⼩被改为600X500了', dgOnLoad: reSize });
10.
增加新的按钮和移除按钮
J('#btn27').dialog({ id:'test27', page:'' });
发布评论