首页 > 代码库 > (转)弹出窗口lhgDialog API文档

(转)弹出窗口lhgDialog API文档

2024-08-06 15:30:00   219人阅读

应用到你的项目

如果您使用独立版本的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="http://www.mamicode.com/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：提示关闭时执行的函数

(转)弹出窗口lhgDialog API文档


联系
我们