(转)弹出窗口lhgDialog API文档

应用到你的项目

如果您使用独立版本的lhgDialog窗口组件,您只需在页面head中引入lhgcore.lhgdialog.min.js文件,4.1.1+版本做了修改可以和jQuerya库同时引用,而且4.1.1+版本的独立组件的lhgcore库做了极大的修改,专门为组件定制,压缩后才6K与组件合在一起总大小才不到20K,效率上得到很大提高,比引用jQuery快很多,但这里要注意如果你同时引用了jQuery库的话必须把$换成J,如果没引用jQuery库则可直接使用$。

<script type="text/javascript" src="lhgcore.lhgdialog.min.js"></script>

如果您的页面中引入了jQuery库文件,您只需在页面head中再引入lhgdialog.min.js文件即可,此时lhgDialog组件将作为jQuery的一个插件使用,注意lhgdialog.min.js要写到jQuery库文件的下面哟。

<script type="text/javascript" src="jQuery-1.7.1.min.js"></script><script type="text/javascript" src="lhgdialog.min.js"></script>

组件提供全局默认配置参数读/写接口,如果您想修改组件的全局默认配置,按照以下方法设置即可(可选):

(function(config){    config[‘extendDrag‘] = true; // 注意,此配置参数只能在这里使用全局配置,在调用窗口的传参数使用无效    config[‘lock‘] = true;    config[‘fixed‘] = true;    config[‘okVal‘] = ‘Ok‘;    config[‘cancelVal‘] = ‘Cancel‘;    // [more..]})($.dialog.setting);

// 如果只设置一个或少量全局配置也可这样:$.dialog.setting.extendDrag = true;

// 获取一个全局配置参数值(获取lhgDialog组件绝对路径):var path = $.dialog.setting.path;

快速入门

4.2.0+版本开始去掉了传统传参数的方法

使用字面量传参
$.dialog(options)

var dialog = $.dialog({title: ‘欢迎‘,content: ‘欢迎使用lhgdialog对话框组件!‘,icon: ‘succeed‘,ok: function(){        this.title(‘警告‘).content(‘请注意lhgdialog两秒后将关闭!‘).lock().time(2);        return false;    }});

窗口lhgdialog.min.js文件的url参数

参数形式为:<script type="text/javascript" src="lhgdialog.min.js?self=true&skin=chrome"></script>

  1. self:指定弹出窗口的页面

    类型:String默认:‘false‘说明:此参数只用在框架页面中,如果不写此参数或值为false时则窗口跨框架弹出在框架最顶层页面,如果值为true则不跨框架,而在当前面页弹出。
  2. skin:多皮肤共享CSS文件名

    类型:String默认:‘default‘说明:不写此参数则值为default。如果你想在同一页面使用不同皮肤的窗口,此处的值就为多皮肤共存的CSS的文件名

url参数不需要设定的就可以不写,不写时就使用默认值。

初始化参数列表

内容相关

  1. title:窗口的标题文本

    类型:String|Boolean默认:‘视窗‘说明:窗口标题的文件字符,如果值为false时就会隐藏标题栏
  2. content:窗口中加载的内容

    类型:String默认:‘loading...‘说明:1.如果想加载单独的页面,只要在字符前加‘url:‘字符即可,如:content:‘url:content.html‘     2.如果没有设定content的值则会有loading的动画

按钮相关

  1. ok:确定按钮回调函数

    类型:Function|Boolean默认:null说明:函数如果返回false将阻止对话框关闭;函数this指针指向内部api;如果传入true表示只显示有关闭功能的按钮
  2. cancel:取消按钮回调函数

    类型:Function|Boolean默认:null说明:1.函数如果返回false将阻止对话框关闭;函数this指针指向内部api;     2.如果传入true表示只显示有关闭功能的按钮,标题栏的关闭按钮其实就是取消按钮,点击同样触发cancel事件     3.如果值为false时则隐藏标题栏右边的关闭按钮
  3. okVal:确定按钮文字

    类型:String默认:确定
  4. cancelVal:取消按钮文字

    类型:String默认:取消
  5. min:是否显示最小化按钮

    类型:Boolean默认:true
  6. max:是否显示最大化按钮

    类型:Boolean默认:true
  7. button:自定义按钮

    类型:Array默认:null说明:配置参数成员:name —— 按钮名称callback —— 按下后执行的函数focus —— 是否聚焦点disabled —— 是否标记按钮为不可用状态(后续可使用扩展方法让其恢复可用状态)示例:参数如:[{name: ‘登录‘, callback: function () {}}, {name: ‘取消‘}] 。注意点击按钮默认会触发按钮关闭动作,需要阻止触发关闭请让回调函数返回false

尺寸相关

  1. width:指定窗口的宽度

    类型:Number|String默认:‘auto‘说明:设置窗口的宽度,可以带单位。一般不需要设置此,对话框框架会自己适应内容
  2. height:指定窗口的高度

    类型:Number|String默认:‘auto‘说明:设置窗口的高度,可以带单位。

位置相关

  1. fixed:开启静止定位

    类型:Boolean默认:false说明:静止定位是css2.1的一个属性,它静止在浏览器某个地方不动,也不受滚动条拖动影响
  2. left:相对于可视区域的X轴的坐标

    类型:Number|String默认:‘50%‘说明:可以使用‘0%‘ ~ ‘100%‘作为相对坐标,如果浏览器窗口大小被改变其也会进行相应的调整
  3. top:相对于可视区域的Y轴的坐标

    类型:Number|String默认:‘50%‘说明:可以使用‘0%‘ ~ ‘100%‘作为相对坐标,如果浏览器窗口大小被改变其也会进行相应的调整

视觉相关

  1. lock:开启锁屏

    类型:Boolean默认:false说明:中断用户对话框之外的交互,用于显示非常重要的操作/消息,所以不建议频繁使用它,它会让操作变得繁琐
  2. icon:定义消息图标

    类型:String默认:null说明:可定义“skins/icons/”目录下的图标名作为参数名(一定要包含后缀名)
  3. padding:内容与边界填充边距(即css padding)

    类型:String默认:‘15px 10px‘说明:如果内容页为iframe方式加载的则在css里需要设置为0,要不在IE6中易出问题
  4. skin:多皮肤共存时指定的皮肤样式

    类型:String默认:‘‘说明:指定窗口要使用的皮肤在加载的多皮肤共存的CSS文件中的相应主类名

交互相关

  1. focus:弹出窗口后是否自动获取焦点(4.2.0新增)

    类型:Boolean默认:true
  2. time:设置对话框显示时间

    类型:Number默认:null说明:以秒为单位
  3. resize:是否允许用户调节尺寸

    类型:Boolean默认:true
  4. drag:是否允许用户拖动位置

    类型:Boolean默认:true
  5. esc:是否允许用户按Esc键关闭对话框

    类型:Boolean默认:true说明:只有窗口获得焦点后才能使用此功能
  6. cache:是否缓存iframe方式加载的窗口内容页

    类型:Boolean默认:true说明:只有使用iframe方式加载的单独页面的内容时此参数才有效
  7. extendDrag:是否开启增强拖拽体验

    类型:Boolean默认:true说明:1.此属性为全局性设置,不能在窗口调用的参数里设置,只能使用lhgdialog.setting.extendDrag来设置     2.防止鼠标落入iframe导致不流畅,对超大对话框拖动优化

高级相关

  1. data:数据传输入参数(4.2.0新增)

    类型:anyone默认:null说明:此参数的值可以为任何类型的数据,比如常量,对象,数组,函数等等...
  2. id:设定对话框唯一标识

    类型:String|Number默认:null说明:1.防止重复弹出     2.定义id后可以使用this.get(youID)和lhgdialog.list[youID]获取扩展方法
  3. zIndex:重置全局zIndex初始值

    类型:Number默认:1976说明:用来改变对话框叠加高度,请注意这是一个会影响到全局的配置,后续出现的对话框叠加高度将重新按此累加。
  4. init:对话框弹出后执行的函数

    类型:Function默认:null说明:如果是以iframe方式加载的内容页此函数会在内容页加载完成后执行
  5. close:对话框关闭前执行的函数

    类型:Function默认:null说明:函数如果返回false将阻止对话框关闭。请注意这不是关闭按钮的回调函数,无论何种方式关闭对话框,close都将执行。
  6. parent:打开子窗口的父窗口对象

    类型:Object默认:null说明:此参数只用在打开多层窗口都使用遮罩层时才会用到此参数,注意多层窗口锁屏时一定要加此参数

扩展方法

窗口实例对象内部方法

  1. close():关闭对话框

    参数:无说明:在需要关闭窗口时可调用此方法
  2. reload(win,url):刷新或跳转指定的页面

    参数1:指定的要刷新或跳转的页面的window对象参数2:要跳转到的页面地址
  3. show():显示对话框

    参数:无
  4. hide():隐藏对话框

    参数:无
  5. title(value):写入标题

    参数1:标题的文本说明:无参数则返回创建的窗口对象实例
  6. content(value,add,isFrm):向窗口中写入内容

    参数1:value -- 窗口中的内容参数2:add -- 是否窗口中为后增加的内容参数3:isFrm -- 是否使用iframe方式加载窗口说明:如果参数1的前3个字符为‘url:‘则说明您使用iframe方式加载单独的内容页,这时第三个参数要为true,无参数则返回创建的窗口对象实例
  7. button(arguments):插入一个自定义按钮

    参数1:name -- 按钮名称参数2:callback -- 按下后执行的函数参数3:focus -- 是否聚焦点参数4:disabled -- 是否标记按钮为不可用状态(后续可使用扩展方法让其恢复可用状态)说明:此参数为多个对象示例:button({    name: ‘登录‘,    focus: true,    callback: function(){}},{    name: ‘取消‘});
  8. position(left,top):重新定位对话框

    参数1:X轴的坐标参数2:Y轴的坐标说明:参数可以为数字或带单位的字符如:‘200px‘或使用‘0%‘ ~ ‘100%‘作为相对坐标
  9. size(width,height):重新设定对话框大小

    参数1:窗口的宽度参数2:窗口的高度说明:参数可以为数字或带单位的字符如:200或‘200px‘
  10. max():最大化窗口

    参数:无
  11. min():最小化窗口

    参数:无
  12. lock():锁屏

    参数:无
  13. unlock():解锁

    参数:无
  14. time(val,callback):定时关闭(单位秒)

    参数1:数值,以秒为单位参数2:回调函数说明:参数2为窗口关闭前执行的函数
  15. focus() :自动设置窗口中焦点元素

    参数:无
  16. zindex() :置顶窗口

    参数:无
  17. get(id,object) :根据指定id获取相应的对象

    参数1:窗口的id参数2:是否返回的是窗口实例对象说明:参数2的值只有为数字1时才返回指定id的窗口的实例对象
  18. api:内容页中调用窗口实例对象接口

    说明:此对象属性是附加在iframe元素的一个属性,在iframe方式加载的内容页中通过调用此函数来获取窗口的实例对象,示例:var api = frameElement.api; 注:此句代码是加在iframe方式加载的内容页中的,一定要注意
  19. opener:加载窗口组件页面的window对象

    说明:此属性主要用在iframe方式加载的内容页中,示例:var api = frameElement.api, W = api.opener; 此时的W即为加载窗口组件页面的window对象
  20. iframe:iframe方式加载内容的iframe对象

    说明:此属性主要用于在窗口组件调用页面操作窗口中的iframe对象
  21. content:iframe方式加载内容页的window对象

    说明:此属性主要用于在窗口组件调用页面操作窗口中的window对象,示例:var dg = $.dialog({‘url:content.html‘,init:function(){ if( this.content.document.body ) alert(‘窗口内容页加载完成‘); });

窗口外部方法

  1. $.dialog.focus:获取焦点的窗口实例对象

    说明:可以使用此属性获取儿得焦点的窗口的对象,示例:var dg = $.dialog.focus; 此时的dg就是当前焦点窗口的对象实例
  2. $.dialog.list:所有窗口对象实例的集合

    说明:通过此属性可获取所有打开的窗口对象,示例:关闭页面所有对话框var list = $.dialog.list;for( var i in list ){    list[i].close();}

扩展的一些提示性的窗口

  1. $.dialog.alert(content,callback,parent):警告消息

    参数1:内容参数2:窗口关闭时执行的回调函数参数3:警告窗口的父窗口对象
  2. $.dialog.confirm(content,yes,no,parent):确认

    参数1:内容参数2:确定按钮回调函数参数3:取消按钮回调函数参数4:确认窗口的父窗口对象
  3. $.dialog.prompt(content,yes,value,parent):提问

    参数1:内容参数2:确定按钮回调函数参数3:文本框默认值参数4:提问窗口的父窗口对象
  4. $.dialog.tips(content,time,icon,callback):短暂提示

    参数1:内容参数2:显示时间参数3:提示图标参数4:提示关闭时执行的函数
时间: 2024-07-30 22:53:47

(转)弹出窗口lhgDialog API文档的相关文章

PickList的使用,按钮弹出框选择一个文档带出多个值

Sub Click(Source As Button) Dim ss As New NotesSession Dim ws As New notesuiworkspace Dim CurDB As NotesDatabase Dim db As NotesDatabase Dim uidoc As notesuidocument Dim vw As NotesView Dim doc As NotesDocument Dim doc1 As NotesDocument Dim wldoc As

3.Spring Boot中使用Swagger2构建强大的RESTful API文档

原文:http://www.jianshu.com/p/8033ef83a8ed 由于Spring Boot能够快速开发.便捷部署等特性,相信有很大一部分Spring Boot的用户会用来构建RESTful API.而我们构建RESTful API的目的通常都是由于多终端的原因,这些终端会共用很多底层业务逻辑,因此我们会抽象出这样一层来同时服务于多个移动端或者Web前端. 这样一来,我们的RESTful API就有可能要面对多个开发人员或多个开发团队:IOS开发.Android开发或是Web开发

Spring Boot中使用Swagger2构建强大的RESTful API文档

由于Spring Boot能够快速开发.便捷部署等特性,相信有很大一部分Spring Boot的用户会用来构建RESTful API.而我们构建RESTful API的目的通常都是由于多终端的原因,这些终端会共用很多底层业务逻辑,因此我们会抽象出这样一层来同时服务于多个移动端或者Web前端. 这样一来,我们的RESTful API就有可能要面对多个开发人员或多个开发团队:IOS开发.Android开发或是Web开发等.为了减少与其他团队平时开发期间的频繁沟通成本,传统做法我们会创建一份RESTf

使用Swagger2构建强大的RESTful API文档(1)

由于Spring Boot能够快速开发.便捷部署等特性,相信有很大一部分Spring Boot的用户会用来构建RESTful API.而我们构建RESTful API的目的通常都是由于多终端的原因,这些终端会共用很多底层业务逻辑,因此我们会抽象出这样一层来同时服务于多个移动端或者Web前端. 这样一来,我们的RESTful API就有可能要面对多个开发人员或多个开发团队:IOS开发.Android开发或是Web开发等.为了减少与其他团队平时开发期间的频繁沟通成本,传统做法我们会创建一份RESTf

java版spring cloud+spring boot 社交电子商务平台(九)使用Swagger2构建强大的RESTful API文档(1)

由于Spring Boot能够快速开发.便捷部署等特性,相信有很大一部分Spring Boot的用户会用来构建RESTful API.而我们构建RESTful API的目的通常都是由于多终端的原因,这些终端会共用很多底层业务逻辑,因此我们会抽象出这样一层来同时服务于多个移动端或者Web前端. 这样一来,我们的RESTful API就有可能要面对多个开发人员或多个开发团队:IOS开发.Android开发或是Web开发等.为了减少与其他团队平时开发期间的频繁沟通成本,传统做法我们会创建一份RESTf

Spring Boot 2.x基础教程:使用Swagger2构建强大的API文档

随着前后端分离架构和微服务架构的流行,我们使用Spring Boot来构建RESTful API项目的场景越来越多.通常我们的一个RESTful API就有可能要服务于多个不同的开发人员或开发团队:IOS开发.Android开发.Web开发甚至其他的后端服务等.为了减少与其他团队平时开发期间的频繁沟通成本,传统做法就是创建一份RESTful API文档来记录所有接口细节,然而这样的做法有以下几个问题: 由于接口众多,并且细节复杂(需要考虑不同的HTTP请求类型.HTTP头部信息.HTTP请求内容

ShowDoc上手构建api文档

ShowDoc是什么 每当接手一个他人开发好的模块或者项目,看着那些没有写注释的代码,我们都无比抓狂.文档呢?!文档呢?!Show me the doc !! 程序员都很希望别人能写技术文档,而自己却很不希望要写文档.因为写文档需要花大量的时间去处理格式排版,想着新建的word文档放在哪个目录等各种非技术细节. word文档零零散散地放在团队不同人那里,需要文档的人基本靠吼,吼一声然后上qq或者邮箱接收对方丢过来的文档.这种沟通方式当然可以,只是效率不高. ShowDoc就是一个非常适合IT团队

SpringBoot使用Swagger2构建API文档

1.Swagger2介绍 Swagger2这套自动化文档工具来生成文档,它可以轻松的整合到Spring Boot中,并与Spring MVC程序配合组织出强大RESTful API文档. 2.SpringBoot开启Swagger2支持 1.导入依赖 <dependency> <groupId>io.springfox</groupId> <artifactId>springfox-swagger2</artifactId> <versio

ArcGIS API for Silverlight 当DataGrid选中项时,地图聚焦弹出窗口,并可以播放音频文件

原文:ArcGIS API for Silverlight 当DataGrid选中项时,地图聚焦弹出窗口,并可以播放音频文件 先看效果图,然后上代码: <UserControl x:Class="MapClient.PicMusic" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx