ymPrompt从最简单的1.0版本到现在的4.0版本,代码共经历了四次较大的改动,组件在功能上有了很大的改进,应用灵活度更大,可应用环境的环境更加广泛,特别在4.0版本中加入对遮罩显示隐藏、按钮/图标的自定义、组件语言的控制、窗口悬浮位置等控制功能,更加的增强了组件的应用范围,使其不仅仅可以使用到模拟alert弹出之类的应用中,更可实现类似qq消息提示,登陆窗口,进度条等效果。

但是,任何的事情都具有其两面性,随着功能的增多,组件的使用的复杂度也在逐步增加,好在组件每次更新都努力在兼容之前版本的基础上做修改,这使得你可以以很简单的方式定制简单的弹出框,也可以以较复杂的参数来定制更加强大的弹出框。不要被demo及使用说明中的一堆参数和方法所吓倒,很多参数也许我们可能并不会用到,找到我们真正需要的那一两个参数就足够了。

本打算在年前发布4.0版,但由于一些功能的实现一直不太稳定,加上年前工作的原因,推迟到年后才发布,该版本的代码在3.0的基础上做了比较大的改动,修正了之前版本的一些问题,增加了几个功能,不少是网友对我提出的,在此感谢。在完善和改进组件的同时,尽管我一直在努力保持组件的代码的最小化,任何一个字节的代码能省则省,但限于个人能力,因此代码可能仍然不是最简洁的,如果哪位大侠有好的改进意见,请不吝指教!

其中主要改进内容如下:

4.0版演示地址:http://tech.cncms.com/demo/js/ymPrompt4.0/demo.html

4.0版下载地址:ymPrompt-4.0-B-20090302.rar

覆盖Frameset示例:http://tech.cncms.com/demo/js/ymPrompt4.0/frameset.html

ymPrompt 调用方法及参数说明

    1. 在页面中引入ymPrompt.js。如:<script type="text/javascript" src="ymPrompt.js"></script>
    2. 在页面中引入对应的皮肤文件的CSS,如:<link rel="stylesheet" type="text/css" href="skin/qq/ymPrompt.css" />
    3. 自定义组件的默认配置信息(此步骤可选,该方法可以在任意时间调用) 
      页面的js中通过ymPrompt.setDefaultCfg(cfg)方法修改组件部分或全部的默认属性。 
      如:ymPrompt.setDefaultCfg({maskAlpha:0.2,maskAlphaColor:'#00f'}) 

      组件的默认配置(对于没有设定的项将采用该配置项的默认值): 

        message: '内容', //消息框按钮 
        width: 300, //宽 
        height: 185, //高 
        title: '标题', //消息框标题 
        handler: function() {}, //回调事件 
        maskAlphaColor: '#000', //遮罩透明色 
        maskAlpha: 0.1, //遮罩透明度

        iframe: false, //iframe模式 
        icoCls: '', //图标的样式 
        btn: null, //按钮配置 
        autoClose: true, //点击关闭、确定等按钮后自动关闭 
        fixPosition: true, //随滚动条滚动 
        dragOut: false, //不允许拖出窗体范围 
        titleBar: true, //显示标题栏 
        showMask: true, //显示遮罩 
        winPos: 'c', //在页面中间显示 
        winAlpha:0.8, //拖动窗体时窗体的透明度 
        closeBtn:true, //是否显示关闭按钮 
        showShadow:false, //不显示阴影,只对IE有效 
        useSlide:false, //不使用淡入淡出 
        slideCfg:{increment:0.3,interval:50}, //淡入淡出配置

        //按钮文本,可通过自定义这些属性实现本地化 
        closeTxt: '关闭', 
        okTxt:' 确 定 ', 
        cancelTxt:' 取 消 ', 
        msgCls:'ym-content' //消息内容的样式 
        minBtn:false, //不显示最小化按钮 
        minTxt:'最小化', 
        maxBtn:false, //不显示最大化按钮 
        maxTxt:'最大化' 
        allowSelect:false, //是否允许选择消息框内容,默认不允许 
        allowRightMenu:false //是否允许在消息框使用右键,默认不允许 
      }

    4. 根据您的需要调用相应的消息函数(两种参数传入方式):
      • ymPrompt.alert(参数) //消息提示类型
      • ymPrompt.succeedInfo(参数) //成功信息类型
      • ymPrompt.errorInfo(参数) //错误信息类型
      • ymPrompt.confirmInfo(参数) //询问消息类型
      • ymPrompt.win(参数) //自定义窗口类型

      参数传入方式包含两种:

      • 第一种即传统的参数传入,按照顺序传入相应的参数值即可(一定要按照顺序),对于不需要设定的值请传入null。如ymPrompt.alert('内容',null,null,'标题') 
        参数顺序上面的默认配置中参数顺序一致
      • (推荐)第二种即JSON的传入方式,需要指定字段名,没有顺序,根据需要设定相关属性。如ymPrompt.alert({title:'标题',message:'内容'})

      五个方法的参数意义完全相同(所有参数均为可选,不传入则使用默认参数值),具体含义如下:

      • message:消息组件要显示的内容,默认为“内容”。
      • width:消息框的宽度,默认为300。
      • height:消息框的高度,默认为185。
      • title:消息组件标题,默认为“标题”
      • handler:回调函数。当确定/取消/关闭按钮被点击时会触发该函数并传入点击的按钮标识。如ok代表确定,cancel代表取消,close代表关闭
      • maskAlphaColor:遮罩的颜色,默认为黑色。
      • maskAlpha:遮罩的透明度,默认为0.1。
      • fixPosition:设定是否弹出框随滚动条一起浮动,保持在屏幕的固定位置,默认为true
      • dragOut:设定是否允许拖出屏幕范围,默认为false。
      • autoClose:设定用户点击窗口中按钮后自动关闭窗口,默认为true(设定为false后程序中可以通过调用close方法关闭)。
      • titleBar:是否显示标题栏,默认显示。注意,如果没有标题栏需要自己在程序中控制关闭。
      • showMask:是否显示遮罩层,默认为true
      • winPos:弹出窗口的位置,支持8种内置位置(c,l,t,r,b,lt,rt,lb,rb)及自定义窗口坐标,默认为c。 
         各参数意义:c:页面中间,l:页面左侧,t:页面顶部,r:页面右侧,b:页面顶部,lt:左上角,rt:右上角,lb:左下角,rb:右下角
      • winAlpha:弹出窗体拖动时的透明度,默认为0.8 

        //以下三个参数主要用于win方法(当然你也可以通过设定这些覆盖前面四个消息类型的默认属性)。

      • iframe:是否使用iframe方法加载内容,该属性如果为true或者object,组件则尝试将message内容作为url进行加载(如果属性值为一个object,则将object的内容添加为iframe的属性,如iframe:{id:'myId',name:'myName',src:'http://www.baidu.com'}则iframe的id为myId,name为myName,src为http://www.baidu.com)。默认为false。
      • icoCls:图标类型。传入的内容为className,具体写法可以参考ymprompt.css中对图标的定义方式。默认为空。
      • btn:按钮定义。传入的是数组形式。每个按钮的格式为['按钮文本','按钮标识'],
        如[['确定','ok'],['取消','cancel'],['关闭','close']]等。 
        注意单个按钮应该是这样的:[['确定','ok']]
      • closeBtn:是否显示关闭按钮,默认为true(显示)。
      • showShadow:是否启用弹出框阴影效果(IE Only),默认为false
      • useSlide:f是否启用弹出框的渐显渐隐效果,默认为false
      • slideCfg:渐变效果的配置信息,参数格式为object,属性包括incerment:透明度每次增加的值,interval:变化的速度。例如:{incerment:0.3,interval:50}。该参数仅在useSlide为true时有效 

        //以下参数可用于对组件语言本地化,如用于英文等系统中

      • okTxt:确定按钮的文本描述,默认为“确定”
      • cancelTxt:取消按钮的文本描述,默认为“取消”
      • closeTxt:关闭按钮的文本描述(鼠标放在关闭按钮上时显示),默认为“关闭”
      • minTxt:最小化按钮的文本描述,默认为“最小化”
      • maxTxt:最大化按钮的文本描述,默认为“最大化”
      • minBtn:是否显示最小化按钮,默认为false
      • maxBtn:是否显示最大化按钮,默认为false
      • allowSelect:是否允许选择消息框内容,默认为false
      • allowRightMenu:是否允许在消息框中使用右键,默认为false
    5. 操作接口: 
      属性:
      version:当前版本号 如:alert(ymPrompt.version)
      pubDate:当前版本的发布日期 如:alert(ymPrompt.pubDate);
        cfg:组件的当前的默认配置
      方法:
      setDefaultCfg(cfg):设定组件的默认属性,设定后的所有弹出均默认采用cfg中的设置。
      如:ymPrompt.setDefaultCfg({maskAlpha:0.2,maskAlphaColor:'#00f'}); //设定遮罩层颜色为蓝色,透明度0.2

      getPage():在iframe窗口模式下,获取到iframe的dom对象。
      如:alert(ymPrompt.getPage().contentWindow.document.body.outerHTML); //获取iframe页面的html内容

      resizeWin(w,h):通过程序动态修改窗口的大小。参数:w:宽度,h:高度
      如:ymPrompt.resizeWin(400,300); //修改弹出框宽度为400px,高度为300px

      doHandler(sign,autoClose):模拟触发某个按钮的点击事件。参数sign:传给回调函数的标识,autoClose:是否自动关闭窗口(默认采用全局配置)
      如:ymPrompt.doHandler('ok',false); //触发确定按钮的点击事件,并且执行完回调函数后不关闭窗口

      getButtons():获取当前弹出窗口的所有按钮对象,返回结果是一个对象集合(数组)。
      如:var btnID=ymPrompt.getButtons()[0].id; //获取第一个按钮的id

      close():关闭当前弹出的窗口 如:ymPrompt.close()

      max():最大化弹出窗口。

      min():最小化弹出窗口

      normal():窗口普通弹出状态
    6. 其他说明:如果觉得“对象.方法”的调用方式比较麻烦,可以采用如下方式简化调用: 
      在调用之前设定var Alert=ymPrompt.alert。之后就可以使用Alert()的方式进行调用。

ymPrompt简介的更多相关文章

  1. ymPrompt.js消息提示组件

    转载:https://www.cnblogs.com/linzheng/archive/2010/11/15/1878058.html 使用说明: 1.在页面中引入ymPrompt.js.如:< ...

  2. ASP.NET Core 1.1 简介

    ASP.NET Core 1.1 于2016年11月16日发布.这个版本包括许多伟大的新功能以及许多错误修复和一般的增强.这个版本包含了多个新的中间件组件.针对Windows的WebListener服 ...

  3. MVVM模式和在WPF中的实现(一)MVVM模式简介

    MVVM模式解析和在WPF中的实现(一) MVVM模式简介 系列目录: MVVM模式解析和在WPF中的实现(一)MVVM模式简介 MVVM模式解析和在WPF中的实现(二)数据绑定 MVVM模式解析和在 ...

  4. Cassandra简介

    在前面的一篇文章<图形数据库Neo4J简介>中,我们介绍了一种非常流行的图形数据库Neo4J的使用方法.而在本文中,我们将对另外一种类型的NoSQL数据库——Cassandra进行简单地介 ...

  5. REST简介

    一说到REST,我想大家的第一反应就是“啊,就是那种前后台通信方式.”但是在要求详细讲述它所提出的各个约束,以及如何开始搭建REST服务时,却很少有人能够清晰地说出它到底是什么,需要遵守什么样的准则. ...

  6. Microservice架构模式简介

    在2014年,Sam Newman,Martin Fowler在ThoughtWorks的一位同事,出版了一本新书<Building Microservices>.该书描述了如何按照Mic ...

  7. const,static,extern 简介

    const,static,extern 简介 一.const与宏的区别: const简介:之前常用的字符串常量,一般是抽成宏,但是苹果不推荐我们抽成宏,推荐我们使用const常量. 执行时刻:宏是预编 ...

  8. HTTPS简介

    一.简单总结 1.HTTPS概念总结 HTTPS 就是对HTTP进行了TLS或SSL加密. 应用层的HTTP协议通过传输层的TCP协议来传输,HTTPS 在 HTTP和 TCP中间加了一层TLS/SS ...

  9. 【Machine Learning】机器学习及其基础概念简介

    机器学习及其基础概念简介 作者:白宁超 2016年12月23日21:24:51 摘要:随着机器学习和深度学习的热潮,各种图书层出不穷.然而多数是基础理论知识介绍,缺乏实现的深入理解.本系列文章是作者结 ...

随机推荐

  1. nginx配置ssl证书,启动http访问并代理到本地http端口

    小白第一次使用nginx,本地环境Ubuntu 16.04.6 1.安装Nginx sudo apt install nginx 2.生成证书 (参考来源:https://segmentfault.c ...

  2. git让线上代码强制覆盖本地的

    git强制覆盖本地命令(分步执行): git fetch --all    git reset --hard origin/master    git pull git强制覆盖本地命令(单条执行):  ...

  3. JS字符串数字前面加加号会变成数字类型

    JS中一个字符串中只有数字,如果该字符串前面加了个加号,这个数值就变成了number类型.如本文测试中,用lodop打印二维码,最后一个参数是一个字符串,在前面加了加号和不在前面加加号,通过控制台输出 ...

  4. [LeetCode] 297. Serialize and Deserialize Binary Tree 二叉树的序列化和反序列化

    Serialization is the process of converting a data structure or object into a sequence of bits so tha ...

  5. Kubernetes 监控方案之 Prometheus Operator(十九)

    目录 一.Prometheus 介绍 1.1.Prometheus 架构 1.2.Prometheus Operator 架构 二.Helm 安装部署 2.1.Helm 客户端安装 2.2.Tille ...

  6. win10安装网络适配器

    上面这个有些叫Microsoft Loopback Adapter

  7. iframe跨端口报错 Blocked a frame with origin from accessing a cross-origin frame

    前言    在不同的端口号,甚至是不同的ip进行iframe嵌套的时候,在父页面调用子页面的方法的时候,报错 SecurityError: Blocked a frame with origin fr ...

  8. [转帖]为什么需要 Zookeeper

    为什么需要 Zookeeper 柳树 学习&思考&写作 | 公众号:柳树的絮叨叨 ​关注他 童话 . 沈万马 等 351 人赞同了该文章 很多中间件,比如Kafka.Hadoop.HB ...

  9. 【转帖】从原理到应用,Elasticsearch详解

    从原理到应用,Elasticsearch详解 https://segmentfault.com/a/1190000020022504 elasticsearch 2.1k 次阅读  ·  读完需要 4 ...

  10. learning、trying、teaching

    在工作中学习和提升,学以致用,学习的效果是最好的:工作后学习不需要大段时间,而是要挤出时间,利用时间碎片来学习. 1,Learning 这是第一阶段,看书.google.看视频.看别人的博客,但要是“ ...