有人用过lhgdialog的JS控件吗
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了有人用过lhgdialog的JS控件吗相关的知识，希望对你有一定的参考价值。
lhgdialog基本使用方法 ：1.下载最新版本lhgdialog：http//lhgcore.com/lhgdialog.rar
2.在需要调用lhgdialog编辑器的网页head标签结束之前添加以下代码：
<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提供两种方式弹出窗口：
<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>
[html] view plain copy
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参数不需要设定的就可以不写，不写时就使用默认值。 参考技术A 以前用过，不错的弹框插件。不过现在换了一个
JavaScript-Tool-lhgDialog：传值示例
| ylbtech-JavaScript-Tool-lhgDialog：传值示例 |
| 1.返回顶部 |
1、
基本的传值示例(如您有不明白的地方可打开相应的示例文查看里面的相关代码)
注：所有示例都可象第一个示例那样通过多种方式实现，除第一个示例使用多种方式外其它示例都使用一种方式，您可根据示例1自行尝试其它示例的其它实现方法！
-
将调用页面的值传到窗口中
/* 方式一 在内容页里写代码取值 */
/* 下面的代码为内容页value01.html页面里的代码，请自行打开此文件查看代码 */
var api = frameElement.api, W = api.opener;
window.onload = function()
{
document.getElementById(‘itxt‘).value = W.document.getElementById(‘txt1‘).value;
};
------------------------------------------------------
/* 方式二 在调用窗口代码里使用init参数写入值 */
/* 下面的代码为 运行2 按钮调用窗口组件的代码 */
$(‘#demo_02‘).dialog({
content:‘url:value/value02.html‘,
init:function(){
/* this.iwin 为窗口内容页的window对象 */
this.iwin.document.getElementById(‘itxt‘).value = document.getElementById(‘txt1‘).value;
}
});
------------------------------------------------------
/* 方式三 在调用窗口代码里使用data参数来传入值 */
/* 下面的代码为 运行3 按钮调用窗口组件的代码 */
$(‘#demo_02‘).dialog({
content:‘url:value/value02.html‘,
data:document.getElementById(‘txt1‘).value;
});
/* 下面的代码为内容页value03.html页面里的代码，请自行打开此文件查看代码 */
var api = frameElement.api;
window.onload = function()
{
document.getElementById(‘itxt‘).value = api.data;
}; -
将窗口中的值传回到调用页面中
注：实现的方法也有很多种，请自行尝试
/* 下面的代码为内容页value04.html页面里的代码，请自行打开此文件查看代码 */
var api = frameElement.api, W = api.opener;
api.button({
id:‘valueOk‘,
name:‘确定‘,
callback:ok
});
/* 函数ok即为上面添加按钮方法中callback回调函数调用的函数 */
function ok()
{
W.document.getElementById(‘txt2‘).value = document.getElementById(‘itxt‘).value;
}; -
在调用页面调用窗口B中的值或函数
注：实现的方法也有很多种，请自行尝试
/* 下面的代码为：“调用B窗口中文本框的值” 按钮所调用的函数的代码 */
function getValue1()
{
if( !demoDG1 || demoDG1.closed )
alert( ‘请先打开B窗口‘ );
else // demoDG1.content 为B窗口内容页面的window对象
alert( demoDG1.content.document.getElementById(‘itxt‘).value );
};
------------------------------------------------------
/* 下面的代码为：“调用B窗口的函数” 按钮所调用的函数的代码 */
function getFunc1()
{
if( !demoDG1 || demoDG1.closed )
alert( ‘请先打开B窗口‘ );
else // demoDG1.content 为B窗口内容页面的window对象 BB()为B窗口内容页中的一个函数
demoDG1.content.BB();
}; -
在调用页面调用窗口B中的值或函数
注：实现的方法也有很多种，请自行尝试
/* 下面的代码为内容页value06.html页面里的代码，请自行打开此文件查看代码 */
var api = frameElement.api, W = api.opener;
// getValue函数为内容页value06.html页面里的“组件调用页面文本框的值” 按钮所调用的函数
function getValue()
{
alert( W.document.getElementById(‘txt3‘).value );
};
// 下面的代码为内容页value06.html页面里“组件调用页面的函数” 按钮单击事件所调用的函数
W.AA(); -
在调用页面调用C窗口(也就是B窗口的子窗口)的值或函数
注：实现的方法也有很多种，请自行尝试
/* 方式一 直接使用js原生方法来实现 */
function getValue2()
{
// demoDG2.content 为B窗口内容页的window对象
if( !demoDG2 || !demoDG2.content.cDG || demoDG2.content.cDG.closed )
alert( ‘请先打开C窗口‘ );
else // demoDG2.content.cDG 为B窗口中调用C窗口的实例对象 demoDG2.content.cDG.content 即为C窗口内容页的window对象
alert( demoDG2.content.cDG.content.document.getElementById(‘itxt‘).value );
};
function getFunc2()
{
if( !demoDG2 || !demoDG2.content.cDG || demoDG2.content.cDG.closed )
alert( ‘请先打开C窗口‘ );
else
demoDG2.content.cDG.content.CC();
};
------------------------------------------------------
/* 方式二 通过窗口的id参数来实现 （推荐使用这种方法来实现，这种方法更直观，更易理解） */
function getValue3()
{
/* 通过$.dialog.list[‘id‘]对象来获取C窗口的实例对象，其中的id即为创建C窗口的id
if( !$.dialog.list[‘demo_c‘] || $.dialog.list[‘demo_c‘].closed )
alert( ‘请先打开C窗口‘ );
else
alert( $.dialog.list[‘demo_c‘].content.document.getElementById(‘itxt‘).value );
*/
// 通过内部的get(‘id‘)方法来获取C窗口内容页window对象，其中的id即为创建C窗口的id（最推荐使用的方法）
// get方法有2个参数get(‘id‘,1)其中第二个参数只有为数字1时返回窗口实例对象，如不写或为其它任何值都返回窗口内容页的window对象
if( !demoDG2 || !demoDG2.get(‘demo_c‘) )
alert( ‘请先打开C窗口‘ );
else
alert( demoDG2.get(‘demo_c‘).document.getElementById(‘itxt‘).value );
};
function getFunc3()
{
/*
if( !$.dialog.list[‘demo_c‘] || $.dialog.list[‘demo_c‘].closed )
alert( ‘请先打开C窗口‘ );
else
$.dialog.list[‘demo_c‘].content.CC();
*/
// 演示示例都是使用的get内部方法来实现的
if( !demoDG2 || !demoDG2.get(‘demo_c‘) )
alert( ‘请先打开C窗口‘ );
else
demoDG2.get(‘demo_c‘).CC();
}; -
在C窗口(也就是B窗口的子窗口)中调用组件调用页面中的值或函数
注：实现的方法也有很多种，请自行尝试
/* 下面的代码为内容页value10.html页面里的代码，请自行打开此文件查看代码 */
var api = frameElement.api, W = api.opener;
// getValue函数为内容页value10.html页面里的“组件调用页面文本框的值” 按钮所调用的函数
function getValue()
{
alert( W.document.getElementById(‘txt4‘).value );
};
// 下面的代码为内容页value10.html页面里“组件调用页面的函数” 按钮单击事件所调用的函数
W.AA();
综合的传值示例
注：各种调用页面与窗口间的各种方法的传值示例，请自行打开相应文件查看代码
-
多窗口间，页面与窗口间的综合传值
注：由于代码量较大，这里不再写其相关代码，各种方法的相关代码请自行打开相应的文件查看相关的代码，代码中都带有注释！
注：本示例都使用窗口id的属性，内部的get方法来实现，至于其它实现方法您可参考前面的示例来完成！
2、
| 2.返回顶部 |
| 3.返回顶部 |
| 4.返回顶部 |
| 5.返回顶部 |
1、
2、
| 6.返回顶部 |
 |
作者：ylbtech 出处：http://ylbtech.cnblogs.com/ 本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。 |
以上是关于有人用过lhgdialog的JS控件吗的主要内容，如果未能解决你的问题，请参考以下文章