|
窗口的各种在线演示示例 jQuery方式和普通函数式 1. jQuery方式调用 J(function(){ J('#btn1').dialog({ id:'test1', html:'<h3>我是jQuery方式调用的窗口</h3>' });}); 运行? 2. 普通函数方式调用 function opdg( id ){ var dg = new J.dialog({ id:id, html:'<h3>我是普通函数方式调用的窗口</h3>' }); dg.ShowDialog();} 运行? 常规配置参数使用演示 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且为content.html文件 J('#btn9').dialog({ id:'test9', page:'content.html' }); 运行? 19. 内容页参数为page且内容为外部链接qq.com，此时注意link参数一定要设为true J('#btn10').dialog({ id:'test10', page:'http://www.qq.com', 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:'content1.html'}); 运行? 27. 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个，它们层叠的次序就乱了。 运行? 28. 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' ); } });} 运行? 运行? 29. onXclick参数示例 J('#btn22').dialog({ id:'test22', onXclick:function(){alert('我改变了关闭按钮的事件，我不能 关闭窗口了');}, html:'X关闭按钮的事件被改变了' }); 运行? 30. onCancel参数示例 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:'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('我是窗口关闭后执行的函数'); }); 运行? 2. 使用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. 在内容页中重新指定窗口标题(3.4.0新增) J('#btn31').dialog({ id:'test31', page:'content6.html' });//content6.html页面里的代码为：var DG = frameElement.lhgDG;function ok(){ DG.SetTitle( '我是被按钮改变了的标题' );} 运行? 4. 在内容页中重新指定X按钮绑定的函数(3.4.0新增) J('#btn32').dialog({ id:'test32', page:'content7.html' });//content7.html页面里的代码为：var DG = frameElement.lhgDG;DG.SetXbtn( ok );function ok(){ alert( '我又不能关闭窗口了' );} 运行? 5. 在内容页中使用closeTime函数来定时关闭窗口(3.4.0新增) J('#btn33').dialog({ id:'test33', page:'content8.html' });//content8.html页面里的代码为：var DG = frameElement.lhgDG;DG.closeTime( 2 ); 运行? 6. 在调用页面关闭窗口 // 这里请注意DG得定义成全局变量testDG3 = J('#btn24').dialog({ id:'test24', html:'我只能被调用页面上的按钮关闭', xButton:false,btnBar:false });//关闭窗口按钮的单击事件onclick="testDG3.cancel();" 运行? 关闭窗口? 7. 关闭窗口刷新父页面 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关闭函数 运行? 8. 父窗口中打开子窗口 请参阅 常规配置参数使用演示 里的 parent参数示例并且父子窗口都加了遮罩层 示例 运行? 9. 重新指定窗口的大小并将窗口定位在屏幕的中间(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}); 运行? 10. 增加新的按钮和移除按钮 J('#btn27').dialog({ id:'test27', page:'content5.html' }); 运行? lhgdialog基本使用方法 . 一、lhgdialog基本使用方法 1.下载最新版本lhgdialog：http:///lhgdialog.rar 2.在需要调用lhgdialog编辑器的网页head标签结束之前添加以下代码： 1. <script type="text/javascript" src="lhgcore.min.js"></script> 2. <script type="text/javascript" src="lhgdialog.min.js"></script> 3.<!--注：如果将窗口组件做为jQ的组件来使用就不需要加载lhgcore.min.js库文件，而要加载jQ库文件。--> 4. <script type="text/javascript" src="jquery-1.6.min.js"></script> 5. <script type="text/javascript" src="lhgdialog.min.js"></script> <script type="text/javascript" src="lhgcore.min.js"></script><script type="text/javascript" src="lhgdialog.min.js"></script><!--注：如果将窗口组件做为jQ的组件来使用就不需要加载lhgcore.min.js库文件，而要加载jQ库文件。--><script type="text/javascript" src="jquery-1.6.min.js"></script><script type="text/javascript" src="lhgdialog.min.js"></script> 3.lhgdialog提供两种方式弹出窗口： Html代码 1. <head> 2. <script type="text/javascript"> 3.//第一种jQ调用方式 4.J(function(){ 5. J('#dg').dialog({ id:'test1', html:'lhgdialog' }); 6.}); 7. 8.//如果作为jQ组件来用的话J就得换成$ 9.$(function(){ 10. $('#dg').dialog({ id:'test1', html:'lhgdialog' }); 11.}); 12. 13.//第二种普通函数式调用 14.function opdg( id ) 15.{ 16. var dg = new J.dialog({ id:id, html:'lhgdialog' }); 17. //如果作为jQ组件来用的话J就得换成$ 18. var dg = new $.dialog({ id:id, html:'lhgdialog' }); 19. dg.ShowDialog(); 20.} 21. </script> 22. </head> 23. <body> 24. <input type="button" id="dg" value="opendg1"/> 25. <input type="button" value="opendg2" onclick="opdg('test2');"/> 26. </body> <head><script type="text/javascript">//第一种jQ调用方式J(function(){ J('#dg').dialog({ id:'test1', html:'lhgdialog' });});//如果作为jQ组件来用的话J就得换成$$(function(){ $('#dg').dialog({ id:'test1', html:'lhgdialog' });});//第二种普通函数式调用function opdg( id ){ var dg = new J.dialog({ id:id, html:'lhgdialog' }); //如果作为jQ组件来用的话J就得换成$ var dg = new $.dialog({ id:id, html:'lhgdialog' }); dg.ShowDialog();}</script></head><body> <input type="button" id="dg" value="opendg1"/> <input type="button" value="opendg2" onclick="opdg('test2');"/></body> 二、lhgdialog API 说明 一）窗口lhgdialog.min.js文件的url参数(3.4.0新增) 参数形式为：<script type="text/javascript" src="lhgdialog.min.js?t=self&s=chrome"></script> t：指定弹出窗口的页面(替代原来的第22个参数SetTopWindow) 参数值：self，在当前页面弹出窗口。此参数只用在框架页面中，如果不写此参数则窗口跨框架弹出在框架最顶层页面，如果值为self则不跨框架，而在当前面页弹出。 s：窗口使用的皮肤的名称(3.5.0修改) 参数值：默认default，不写此参数则值为default。如果你想在同一页面使用不同皮肤的窗口，就要把你要使用的皮肤的名称都写上，中间用","隔开，例如：lhgdialog.min.js?s=default,chrome，此参数用来动态给窗口换肤，参数的值为skins文件夹下各皮肤文件夹的名，具体使用方法请参阅皮肤制作 url参数不需要设定的就可以不写，不写时就使用默认值。 初始化参数列表 二）初始化参数列表：即为J.dialog({ 这里的参数 }); lockScroll：弹出遮罩层时是否消除滚动条(3.5.2新增) 参数值：默认为“false”，如果为true则弹出遮罩层时会去掉浏览器右边的滚动条。 autoPos：当浏览器大小改变时窗口的位置是否自动定位(3.4.2新增 3.5.2修改) 参数值：默认为false，不自动定位窗口位置。如果想让窗口自动定位，属性值分为2种，一种值为一个对象，对象中有2个属性，分别为left和top，left和top的值与窗口参数left和top的值是一样的。例如：autoPos:{left:'right',top:'bottom'}。另一种是值为true，这里窗口默认为自动居中。这和第一种值形式的：autoPos:{left:'center',top:'center'}的效果是相同的，只不过为true是一种简写方式。 skin：指定窗口的皮肤(3.5.0新增) 参数值：默认为“default”。 args：传递的参数(3.5.0新增) 参数值：值可为任意类型的数据。 onCancel：自定义窗口关闭函数(3.5.0修改) 参数值：如果加了此参数则可以调用此函数来关闭窗口。3.5.0将此属性改为此函数参数的作用是在关闭窗口前执行这个函数来完成一定动作。 cancelBtnTxt：设置取消按钮的文本(3.4.2新增) 参数值：默认为“取消”。此参数和onCancel配合使用即可改变取消按钮为其它作用的按钮。 autoCloseFn：自动关闭窗口时执行的函数(3.4.2新增) 参数值：当指定了timer属性后，此参数为窗口关闭前执行的函数。 bgcolor：设置遮罩层的颜色(3.4.1新增) 参数值：默认为白色(#fff)。 opacity：设置遮罩层的透明度(3.4.1新增) 参数值：默认为0.5(也就是50%的透明度)，值为小于1的一位小数。 onMinSize：最小化按钮调用的函数(3.4.1新增) 参数值：此属性为一个函数，就是单击最小化按钮调用的函数，主要是为用户提供个接口，这里你可以自己写这个函数。 maxBtn：是否显示最大化按钮(3.4.0新增) 参数值：默认true(显示，如果titleBar参数为false，此参数无效)，false(不显示)。注：如果fixed参数为true，那么此参数就自动为false。 minBtn：是否显示最小化按钮(3.4.0新增) 参数值：默认true(显示，如果titleBar参数为false，此参数无效)，false(不显示)。最小化按钮功能暂无 timer：定时关闭窗口时间，单位为秒(3.4.0新增) 参数值：无，不带单位的数字，单位为秒。 id：窗口的id号 参数值：默认lhgdlgId，自定义对话框ID属性，要保证在页面中是唯一的，不能和页面中任何元素的id相同。 注意：如果页面中只有一个弹出窗口此参数可以不写，但页面中如果有1个以上的弹出窗口则一定要加此参数。 title：窗口的标题文本 参数值：默认lhgdialog弹出窗口，窗口标题的文件字符。 width：窗口的宽度 参数值：默认400，不带单位的数字。 height：窗口的高度 参数值：默认300，不带单位的数字。 titleBar：是否显示标题栏 参数值：默认true(显示)，false(不显示，注意如果不显示一定要选择相应的皮肤，无标题栏的皮肤)。 iconTitle：是否显示标题栏左边小图标 参数值：默认true(显示，如果titleBar参数为false，此参数无效），false(不显示)。 xButton：是否显示窗口右上角的X关闭按钮 参数值：默认true(显示，如果titleBar参数为false，此参数无效），false(不显示)。 btnBar：是否显示按钮栏 参数值：默认true(显示），false(不显示)。 cancelBtn：是否显示取消按钮 参数值：默认true(显示，要显示的同时必须设btnBar参数为true），false(不显示)。 page：窗口内容页的地址 参数值：窗口的内容页为一个单独的页面文件，这个文件的路径是内容页面文件相对于调用窗口插件的路径或也可使用绝对路径，如果此参数的值为不同域的外部链接，那一定要使下面的link参数为真。 link：是否为外部链接 参数值：默认false(不是外部链接），true(是外部链接，这里的外部链接指的是不同域的网址)。 html：窗口的内容为HTML代码 参数值：可以是HTML代码或DOM对象。 fixed：是否开启静止定位 参数值：默认false(不开启），true(开启，静止定位指的就是窗口随屏滚动)。 left：X轴的坐标 参数值：默认center(居中），left(屏幕的左边)，right(屏幕的右边)，如果开启了fixed则原点以浏览器视口为基准。 top：Y轴的坐标 参数值：默认center(居中），top(屏幕的最上边)，right(屏幕的最下面)，如果开启了fixed则原点以浏览器视口为基准。 cover：是否开启锁屏 参数值：默认false(不开启），true(开启，中断用户对话框之外的交互，用于显示非常重要的操作/消息)。 drag：是否允许拖动对话框 参数值：默认true(允许），false(不允许)。 resize：是否允许拖动改变窗口大小 参数值：默认true(允许），false(不允许)。 rang：是否限制窗口挪动范围 参数值：默认false(不限制），true(限制，也就是不允许窗口拖出浏览器的可视区域)。 loadingText：窗口加载时的文本字符 参数值：默认“窗口正在加载中，请稍等...”。 autoSize：是否窗口自适应大小 参数值：默认false(不适应），true(自动适应窗口内容的大小)。 SetTopWindow：指定窗口要在弹出时的那个页面的window对象 此参数已被新的url参数t所替代，3.4.0版本删除了此参数。 parent：子窗口的父窗口对象 参数值：此参数只用在弹出的窗口中再弹出子窗口时指定父窗口对象，注意如果2层弹出窗口都有遮罩层则一定要加此参数。 dgOnLoad：窗口加载后执行的函数 参数值：注意此参数值一定要为函数。 onXclick：窗口右上角X关闭按钮拦截函数 参数值：如果加了此参数则窗口右上角X关闭按钮则执行此函数。 其中一些参数的用法请参照示例中的使用方法 API函数接口列表 API接口列表： setArgs(args) ：设置要传递的数据(3.5.0新增) 参数1：要传递的数据，可以为任意类型的数据。 getArgs() ：获取传递的数据(3.5.0新增) 参数1：无，可以为任意类型的数据。 addBtn(id,txt,fn,pos) ：在窗口的按钮栏增加按钮(3.4.2新增pos参数) 参数1：按钮的id 参数2：按钮上的文本 参数3：按钮绑定的函数 参数4：用来指定新增加按出现在已有按钮的左边(值为'left')还是右边(值为'right') SetCancelBtn(txt,fn) ：重新设定取消按钮(3.4.2新增) 参数1：按钮的文本。 参数2：按钮重新绑定的函数。 closeTime(second,bFn,aFn) ：定时关闭窗口(3.4.0新增,3.4.2修改，3.5.2修改) 参数1：关闭窗口的时间，单位为秒。 参数2：关闭窗口前执行的函数。 参数3：关闭窗口后执行的函数。(3.5.2新增此参数) SetPosition(top,left,fix) ：重新指定窗口的位置(3.4.0新增,3.4.2修改) : SetPosition(left,top) 参数1：X轴的坐标(详细见初始化参数里的第17个参数) 参数2：Y轴的坐标(详细见初始化参数里的第18个参数) 参数3：是否是静止定位(详细见初始化参数里的第16个参数，这里要注意如果fixed参数为true时这个参数一定要为true，否则就不要加此参数) 注：原来的第3个参数在3.4.2中已删除，这个参数程序会自动根据你调用窗口时的参数fixed的设置来判断。 maxSize() ：窗口最大化函数接口(3.4.1新增) 参数：无，你可以通调用此函数来控制窗口的最大化和还原。 SetMinBtn(fn) ：重新设定最小化按钮函数(3.4.1新增) 参数1：重新给最小化按钮绑定的函数，你可以通调用此函数重新给最小化按钮绑定函数。 iWin(id) ：获取指定id的窗口内容页的window对象(3.4.1新增) 参数1：指定窗口的id，此函数用来返回指定id的窗口的内容页的window对象，主要用在传值使用中。 iDoc(id) ：获取指定id的窗口内容页的document对象(3.4.1新增) 参数1：指定窗口的id，此函数用来返回指定id的窗口的内容页的document对象，主要用在传值使用中。 iDg(id) ：获取指定id的窗口DOM对象(3.4.1新增) 参数1：指定窗口的id，此函数用来返回指定id的窗口的DOM对象，主要用判断此窗口是否存在。 SetXbtn(fn,noShow) ：重新设置X按钮动作(3.4.0新增) 参数1：重新给X按钮绑定的函数 参数2：是否显示X按钮 SetTitle(txt) ：重新指定标题的文本(3.4.0新增) 参数1：重新指定的标题的文本内容。 ShowDialog() ：显示窗口 无参数，jQ调用方式不需要加此方法。 cancel() ：关闭窗口 无参数。 reDialogSize(width,height) ：重新指定窗口的大小 参数1：窗口的宽度，如：600，不带单位的数字 参数2：窗口的高度，如：500，不带单位的数字 removeBtn(id) ：移除窗口中按钮栏的按钮 参数1：按钮的id SetIndex() ：设置窗口的层叠次序 无参数 三）API属性接口列表： dialogId ：窗口的id(3.5.0新增) 获取窗口设置的id值，此id不是窗口真正的id，此id是你在调用窗口时设置的id的值。 parent ：父窗口对象实例(3.5.0新增) 此属性就是取的你设置的parent参数属性的值，即：J.dialog({ parent:dg }) 这里的parent的值。 dg ：窗口的DOM对象 可通过此对象对窗口和窗口内元素进行操作。 lhgDG ：创建的窗口的实例对象 此属性只用在page参数指定的内容页面中，它取的是创建此窗口的实例对象。 topWin ：顶层页面的window对象 此参数在3.4.1版本中删除了，要想得到顶层页面的window对象直接写top就行了。 topDoc ：顶层页面的document对象 此参数在3.4.1版本中删除了，要想得到顶层页面的document对象直接写top.document就行了。 curWin ：窗口调用页面的window对象 也就是加载lhgdialog.min.js的页面的window对象，如果不是在框架中弹出它和topWin是相等的。 curDoc ：窗口调用页面的document对象 也就是加载lhgdialog.min.js的页面的document对象，如果不是在框架中弹出它和topDoc是相等的。 dgWin ：内容页的window对象 如果参数为page，且link参数不为真，那这个就是内容页的window对象。 dgDoc ：内容的document对象 如果参数为page，且link参数不为真，那这个就是内容页的document对象。
|
|
|
