`
xwood
  • 浏览: 102725 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

lhgdialog学习

 
阅读更多
原文地址:
http://lhgcore.com/api/basic.html
http://lhgcore.com/api/api.html

一、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提供两种方式弹出窗口:
<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对象。


分享到:
评论
2 楼 谢宇坤 2013-03-25  
为什么 引用地址 点进去 是广告。。。。。。。。
1 楼 gumutianqi 2012-03-06  
lhgdialog 最新版本4.1.1发布了,同时开通了论坛:bbs.lhgcore.com

相关推荐

    lhgDialog弹窗插件4.0

    下面我们将深入探讨lhgDialog的核心特性、使用方法以及如何通过提供的帮助文档和示例(demo)进行学习。 首先,lhgDialog的基本功能是显示各种类型的弹窗,如警告、确认、提示和自定义内容。这些弹窗可以根据项目...

    lhgdialog弹窗选择数据,包含实例代码.

    在IT行业中,前端开发经常会遇到需要与用户交互并获取用户输入的情况。`lhgdialog`是一个流行的JavaScript插件,用于创建...通过学习和掌握`lhgdialog`,开发者可以更好地实现与用户的互动,增强网站的功能性和吸引力。

    lhgdialog弹出窗口例子

    《lhgdialog弹出窗口应用详解...通过学习和掌握lhgdialog,开发者可以在项目中快速构建出符合设计要求的弹出窗口,提升用户体验,提高开发效率。在实际使用中,可以根据具体需求,灵活运用其各项功能,创造出更多可能。

    js实现模态窗口实例(lhgdialog)

    通过查看这些示例,你可以更好地理解如何在实际项目中应用`lhgdialog`,并学习如何配置和扩展它的功能。 在使用`lhgdialog`时,需要注意与现有项目的兼容性,确保其能与你的前端框架(如jQuery、Vue、React等)良好...

    lhgdialog_脚本实例_

    总之,`lhgdialog`是一个强大且易用的JavaScript弹出窗口插件,通过学习和实践提供的脚本实例,开发者可以轻松地在网页中添加丰富多样的对话框功能,提高网站的交互性和专业性。在实际项目中,可以根据具体需求进行...

    lhgdialog 弹出窗口控件

    最后,`index.html`和`content`目录可能包含了一些示例代码和内容,供用户参考学习如何更好地使用lhgdialog。 总的来说,lhgdialog是一个强大且易于使用的JavaScript弹出窗口插件,它提供了一套完整的解决方案来...

    lhgdialog4.0

    5. **示例代码**:"demo"标签表明该压缩包可能包含了演示程序,这些示例代码可以帮助开发者快速理解和学习如何使用lhgdialog4.0.0 API。通过分析和运行这些示例,开发者可以直观地看到API的实际应用。 6. **文档和...

    LhgDialog弹窗常用函数整理源码

    在提供的xxDialog文件中,可能包含了LhgDialog插件的源代码、示例、文档和其他相关资源,这对于学习和使用LhgDialog非常有帮助。通过阅读源码,你可以了解到每个函数的具体实现细节,有助于你更灵活地运用这个插件,...

    lhgDialog示例

    在学习和使用lhgDialog之前,我们需要了解一些基本的JavaScript知识,因为它是以JavaScript为基础进行交互操作的。JavaScript是一种广泛用于网页和应用开发的脚本语言,它能够使网页具有动态交互性。掌握变量、数据...

    lhgdialog v3.5.3 弹出窗 组件

    压缩包内的“lhgdialog v3.5.3(含说明文档)”文件包含了完整的源码、示例和详细的使用指南,是学习和调试的宝贵资源。 总的来说,lhgdialog v3.5.3是一个功能强大且易用的弹出窗组件,它不仅提供了丰富的功能,而且...

    lhgdialog v4.2

    - 示例文件:可能包含HTML和JS代码示例,供开发者参考学习。 总之,lhgdialog v4.2作为一款强大且易用的对话框组件,无论是在功能还是易用性上都表现出色,是前端开发者提升网页交互体验的理想选择。通过深入理解和...

    lhgDialog弹窗插件

    lhgDialog是一款广泛应用于Web开发中的JavaScript弹窗插件,其设计目的是为了提供美观、功能丰富的对话框解决方案。这款插件具有高度可定制性,能够满足开发者在网页中创建警告、提示、确认、信息以及自定义内容...

    基于JavaScript实现的lhgdialog DIV弹出窗口框架

    通过深入学习以上知识点,并结合lhgdialog提供的文档和示例,你可以轻松地将这个框架集成到你的项目中,创建出功能强大且美观的弹出窗口。同时,不断实践和探索新的JavaScript库和框架,也是提升自身技能的重要途径...

    lhgdialog的弹出框操作

    对于开发者来说,不仅可以直接使用,也可以作为学习弹出框实现的参考。同时,由于其轻量级和高度可定制化的特点,成为了许多开发者在项目中的首选工具。 总结,lhgdialog凭借其灵活的配置和丰富的功能,极大地简化...

    lhgdialog弹出层,遮罩层效果源码示例

    开发者可以通过查看这些示例来学习如何实现各种弹出层效果,包括不同类型的对话框、触发方式、样式调整等。 总的来说,lhgdialog是一个强大的弹出层解决方案,提供了一套全面的功能,帮助开发者创建多样化、交互性...

    lhgdialog web下的弹出窗口

    - `demo/`:包含了一些示例代码,帮助开发者理解和学习如何使用lhgdialog。 总的来说,lhgdialog是Web开发中一个实用的工具,能够帮助开发者快速构建具有专业感的弹出窗口,提升用户体验。通过深入学习和实践,...

    lhgdialog 弹出窗体插件

    在"源码"这个标签下,我们可以深入研究lhgdialog的内部实现,学习如何优化DOM操作、事件处理以及如何编写跨浏览器的代码。这对于提升JavaScript编程技能和理解Web前端开发中的性能优化问题非常有帮助。 "工具"标签...

    ASP.net环境的lhgdialog弹出窗口控件

    通过学习和使用lhgdialog,开发者可以在ASP.NET项目中构建更加友好和交互性强的用户界面,提高用户的操作体验。同时,由于其开源和社区支持的特点,开发者可以在遇到问题时参考社区中的解决方案,或者根据需求进行二...

    一个基于纯js实现的漂亮对话框组件lhgdialog-1.2.1源码及例子

    《深入解析LHGDialog:一个纯JavaScript实现的优雅对话框组件》 在Web开发中,对话框组件是不可或缺的一部分,它用于向用户展示警告、...无论是初学者还是有经验的开发者,LHGDialog都是一个值得学习和使用的工具。

    lhgdialog DIV+JS弹出窗口插件 V3.52.zip

    《lhgdialog DIV+JS弹出窗口插件 V3.52》是一个专门用于网页开发的JavaScript组件,它为开发者提供了强大的对话框功能。...通过学习和掌握这款插件,开发者可以节省大量时间和精力,专注于其他核心功能的开发。

Global site tag (gtag.js) - Google Analytics