lhgdialog使用方法.doc

首页 | API文档 | 基础示例 应用到你的项目在页面head引入lhgdialog(如果项目采用jQuery作为框架，则引用jQuery的库)。配置全局默认参数(可选):(function(config) configextendDrag = true; / 注意，此配置参数只能在这里使用全局配置，在调用窗口的传参数使用无效 configlock = true; configfixed = true; configokVal = Ok; configcancelVal = Cancel; / more.)($.dialog.setting);/ 如果只设置一个或少量全局配置也可这样：$.dialog.setting.extendDrag = true;快速入门一、使用传统的参数$.dialog(content,ok,cancel)$.dialog(简单愉悦的接口，强大的表现力，优雅的内部实现, function()alert(yes););二、使用字面量传参$.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参数参数形式为：self：指定弹出窗口的页面类型：String默认：false说明：此参数只用在框架页面中，如果不写此参数或值为false时则窗口跨框架弹出在框架最顶层页面，如果值为true则不跨框架，而在当前面页弹出。skin：多皮肤共享CSS文件名类型：String默认：default说明：不写此参数则值为default。如果你想在同一页面使用不同皮肤的窗口，此处的值就为多皮肤共存的CSS的文件名url参数不需要设定的就可以不写，不写时就使用默认值。初始化参数列表内容相关title：窗口的标题文本类型：String|Boolean默认：视窗说明：窗口标题的文件字符，如果值为false时就会隐藏标题栏content：窗口中加载的内容类型：String默认：loading.说明：1.如果想加载单独的页面，只要在字符前加url:字符即可，如：content:url:content.html 2.如果没有设定content的值则会有loading的动画按钮相关ok：确定按钮回调函数类型：Function|Boolean默认：null说明：函数如果返回false将阻止对话框关闭；函数this指针指向内部api；如果传入true表示只显示有关闭功能的按钮cancel：取消按钮回调函数类型：Function|Boolean默认：null说明：1.函数如果返回false将阻止对话框关闭；函数this指针指向内部api； 2.如果传入true表示只显示有关闭功能的按钮，标题栏的关闭按钮其实就是取消按钮，点击同样触发cancel事件 3.如果值为false时则隐藏标题栏右边的关闭按钮okVal：确定按钮文字类型：String默认：确定cancelVal：取消按钮文字类型：String默认：取消min：是否显示最小化按钮类型：Boolean默认：truemax：是否显示最大化按钮类型：Boolean默认：truebutton：自定义按钮类型：Array默认：null说明：配置参数成员：name 按钮名称callback 按下后执行的函数focus 是否聚焦点disabled 是否标记按钮为不可用状态（后续可使用扩展方法让其恢复可用状态）示例：参数如：name: 登录, callback: function () , name: 取消 。注意点击按钮默认会触发按钮关闭动作，需要阻止触发关闭请让回调函数返回false尺寸相关width：指定窗口的宽度类型：Number|String默认：auto说明：1. 设置窗口的宽度，可以带单位。一般不需要设置此，对话框框架会自己适应内容 2.如果设置为百分值单位，将会以根据浏览器可视范围作为基准，此时如果浏览器窗口大小被改变其也会进行相应的调整height：指定窗口的高度类型：Number|String默认：auto说明：1.设置窗口的高度，可以带单位。 2.如果设置为百分值单位，将会以根据浏览器可视范围作为基准，此时如果浏览器窗口大小被改变其也会进行相应的调整minWidth：最小宽度限制类型：Number默认：96说明：此参数值只能为数字minHeight：最小高度限制类型：Number默认：32说明：此参数值只能为数字位置相关fixed：开启静止定位类型：Boolean默认：false说明：静止定位是css2.1的一个属性，它静止在浏览器某个地方不动，也不受滚动条拖动影响left：相对于可视区域的X轴的坐标类型：Number|String默认：50%说明：可以使用0% 100%作为相对坐标，如果浏览器窗口大小被改变其也会进行相应的调整top：相对于可视区域的Y轴的坐标类型：Number|String默认：50%说明：可以使用0% 100%作为相对坐标，如果浏览器窗口大小被改变其也会进行相应的调整视觉相关lock：开启锁屏类型：Boolean默认：false说明：中断用户对话框之外的交互，用于显示非常重要的操作/消息，所以不建议频繁使用它，它会让操作变得繁琐background：锁屏遮罩颜色类型：String默认：#FFF说明：请注意这是一个会影响到全局的配置，后续出现的对话框的遮罩颜色都和此设置一样，再设置不再起作用opacity：锁屏遮罩透明度类型：Number默认：.5说明：请注意这是一个会影响到全局的配置，后续出现的对话框的遮罩透明度都和此设置一样，再设置不再起作用icon：定义消息图标类型：String默认：null说明：可定义“skins/icons/”目录下的图标名作为参数名（一定要包含后缀名）titleIcon：标题栏左边的小图标类型：String默认：null说明：可定义“skins/icons/”目录下的图标名作为参数名（一定要包含后缀名）padding：内容与边界填充边距(即css padding)类型：String默认：15px 10px说明：如果内容页为iframe方式加载的则在css里需要设置为0，要不在IE6中易出问题skin：多皮肤共存时指定的皮肤样式类型：String默认：说明：指定窗口要使用的皮肤的主类名交互相关time：设置对话框显示时间类型：Number默认：null说明：以秒为单位resize：是否允许用户调节尺寸类型：Boolean默认：truedrag：是否允许用户拖动位置类型：Boolean默认：trueesc：是否允许用户按Esc键关闭对话框类型：Boolean默认：true说明：只有窗口获得焦点后才能使用此功能cache：是否缓存iframe方式加载的窗口内容页类型：Boolean默认：true说明：只有使用iframe方式加载的单独页面的内容时此参数才有效extendDrag：是否开启增强拖拽体验类型：Boolean默认：true说明：1.此属性为全局性设置，不能在窗口调用的参数里设置，只能使用lhgdialog.setting.extendDrag来设置 2.防止鼠标落入iframe导致不流畅，对超大对话框拖动优化高级相关id：设定对话框唯一标识类型：String|Number默认：null说明：1.防止重复弹出 2.定义id后可以使用this.get(youID)和lhgdialog.listyouID获取扩展方法zIndex：重置全局zIndex初始值类型：Number默认：1976说明：用来改变对话框叠加高度，请注意这是一个会影响到全局的配置，后续出现的对话框叠加高度将重新按此累加。init：对话框弹出后执行的函数类型：Function默认：null说明：如果是以iframe方式加载的内容页此函数会在内容页加载完成后执行close：对话框关闭前执行的函数类型：Function默认：null说明：函数如果返回false将阻止对话框关闭。请注意这不是关闭按钮的回调函数，无论何种方式关闭对话框，close都将执行。parent：打开子窗口的父窗口对象类型：Object默认：null说明：此参数只用在打开多层窗口都使用遮罩层时才会用到此参数，注意多层窗口锁屏时一定要加此参数扩展方法窗口实例对象内部方法close()：关闭对话框参数：无说明：在需要关闭窗口时可调用此方法reload(win,url)：刷新或跳转指定的页面参数1：指定的要刷新或跳转的页面的window对象参数2：要跳转到的页面地址show()：显示对话框参数：无hide()：隐藏对话框参数：无title(value)：写入标题参数1：标题的文本说明：无参数则返回创建的窗口对象实例content(value)：向窗口中写入内容参数1：窗口中的内容说明：如果参数的前3个字符为url:参使用iframe方式加载单独的内容页，无参数则返回创建的窗口对象实例button(arguments)：插入一个自定义按钮参数1：name - 按钮名称参数2：callback - 按下后执行的函数参数3：focus - 是否聚焦点参数4：disabled - 是否标记按钮为不可用状态（后续可使用扩展方法让其恢复可用状态）说明：此参数为多个对象示例：button( name: 登录, focus: true, callback: function(), name: 取消);position(left,top)：重新定位对话框参数1：X轴的坐标参数2：Y轴的坐标说明：参数可以为数字或带单位的字符如：200px或使用0% 100%作为相对坐标size(width,height)：重新设定对话框大小参数1：窗口的宽度参数2：窗口的高度说明：参数可以为数字或带单位的字符如：200px或使用0% 100%百分值单位max()：最大化窗口参数：无min()：最小化窗口参数：无lock()：锁屏参数：无unlock()：解锁参数：无time(val,callback)：定时关闭（单位秒）参数1：数值，以秒为单位参数2：回调函数说明：参数2为窗口关闭前执行的函数focus() ：自动设置窗口中焦点元素参数：无zindex() ：置顶窗口参数：无get(id,object) ：根据指定id获取相应的对象参数1：窗口的id参数2：是否返回的是窗口实例对象说明：参数2的值只有为数字1时才返回指定id的窗口的实例对象api：内容页中调用窗口实例对象接口说明：此对象属性是附加在iframe元素的一个属性，在iframe方式加载的内容页中通过调用此函数来获取窗口的实例对象，示例：var api = frameElement.api; 注：此句代码是加在iframe方式加载的内容页中的，一定要注意opener：加载窗口组件页面的window对象说明：此属性主要用在iframe方式加载的内容页中，示例：var api = frameElement.api, W = api.opener; 此时的W即为加载窗口组件页面的window对象iframe：iframe方式加载内容的iframe对象说明：此属性主要用于在窗口组件调用页面操作窗口中的iframe对象iwin：iframe方式加载内容页的window对象说明：此属性主要用于在窗口组件调用页面操作窗口中的window对象，示例：var dg =$.dialog(url:content.html,init:function() if( this.iwin.document.body ) alert(窗口内容页加载完成); );窗口外部方法$.dialog.focus：获取焦点的窗口实例对象说明：可以使用此属性获取儿得焦点的窗口的对象，示例：var dg = $.dialog.focus; 此时的dg就是当前焦点窗口的对象实例$.dialog.list：所有窗口对象实例的集合说明：通过此属性可获取所有打开的窗口对象，示例：关闭页面所有对话框var list = $.dialog.list;for( var i in list ) listi.close();$.dialog.top：获取lhgdialog可用最高层window对象说明：这与直接使用window.top不同，它能排除url参数self为true时定义的顶层页面为调用窗口组件页面或者顶层页面为框架集的情况$.dialog.data(name,value)：跨框架数据共享写入接口参数1：存储的数据名参数2：将要存储的任意数据(无此项则返回被查询的数据，如果此值为false就删除指定名称的数据)说明：框架与框架之间以及与主页面之间进行数据交换是非常头疼的事情，常规情况下你必须知道框架的名称才能进行数据交换，如果是在复杂的多层框架下操作简直就是噩梦。而data方法就是为了解决这个问题，你完全不用管框架层级问题，它可以写入任何类型的数据，而做到各个页面之间数据共享。扩展的一些提示性的窗口$.dialog.alert(content,callback)：警告消息参数1