• lhgDialog


    应用到你的项目

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

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

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

    <scripttype="text/javascript"src="jQuery-1.7.1.min.js"></script> 
    <scripttype="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); 
            returnfalse; 
        } 
    });

    窗口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):向窗口中写入内容

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

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

      参数1X轴的坐标 
      参数2Y轴的坐标 
      说明:参数可以为数字或带单位的字符如:'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:提示关闭时执行的函数
  • 相关阅读:
    pyqt登录界面设计
    pyqt 学习
    P2350-[HAOI2012]外星人【线性筛】
    P6775-[NOI2020]制作菜品【贪心,dp】
    Tensorflow2.0笔记31——卷积神经网络
    Tensorflow2.0笔记30——卷积神经网络
    Tensorflow2.0笔记29——全连接内容回顾
    Tensorflow2.0笔记28——应用程序,给图识物
    Tensorflow2.0笔记27——acc/loss 可视化,查看效果
    Tensorflow2.0笔记26——参数提取,写至文本
  • 原文地址:https://www.cnblogs.com/zhouyunbaosujina/p/3479761.html
Copyright © 2020-2023  润新知