zoukankan      html  css  js  c++  java
  • ymPrompt.js消息提示组件

    详细说明:

    http://www.ajaxbbs.net/test/ymPrompt4.0/demo.html

    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'})

    组件的默认配置(对于没有设定的项将采用该配置项的默认值):
    {
    titleBar:true, //显示标题栏
    fixPosition:true, //随滚动条浮动
    dragOut:false, //不允许拖出页面
    autoClose:true, //点击按钮后自动关闭页面
    maskAlphaColor:'#000', //遮罩透明色
    maskAlpha:0.1, //遮罩透明度
    winAlpha:0.8, //拖动窗体时 窗体的透明度,默认为0.8

    title: '标题', //消息框标题
    message: '内容', //消息框按钮

    300, //宽
    height: 185, //高
    iframe:false,
    btn:null,
    icoCls:'',
    handler: function(){} //回调事件

    showMask: true, //是否显示遮罩
    winPos: 'c', //弹出窗口默认位置
    closeBtn:true, //是否显示关闭按钮

    //按钮文本,可通过自定义这些属性实现本地化
    closeTxt: '关闭',
    okTxt:' 确 定 ',
    cancelTxt:' 取 消 '
    }

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

    参数传入方式包含两种:
    第一种即传统的参数传入,按照顺序传入相应的参数值即可(一定要按照顺序),对于不需要设定的值请传入null。如ymPrompt.alert('内容',null,null,'标题')
    参数顺序:message,width,height,title,handler,maskAlphaColor,maskAlpha,
    iframe,icoCls,btn,autoClose,fixPosition,dragOut,titleBar,showMask,winPos,winAlpha

    (推荐)第二种即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(显示)。
    //以下参数可用于对组件语言本地化,如用于英文等系统中
    okTxt:确定按钮的文本描述,默认为“确定”
    cancelTxt:取消按钮的文本描述,默认为“取消”
    closeTxt:关闭按钮的文本描述(鼠标放在关闭按钮上时显示),默认为“关闭”

    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()

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

  • 相关阅读:
    微信二维码 场景二维码 用于推送事件,关注等 注册用户 ,经过测试
    简单的 Helper 封装 -- CookieHelper
    简单的 Helper 封装 -- SecurityHelper 安全助手:封装加密算法(MD5、SHA、HMAC、DES、RSA)
    Java反射机制
    Windows Azure Web Site (13) Azure Web Site备份
    Windows Azure Virtual Machine (1) IaaS用户手册
    Windows Azure Web Site (1) 用户手册
    Windows Azure Web Site (12) Azure Web Site配置文件
    Windows Azure Web Site (11) 使用源代码管理器管理Azure Web Site
    Windows Azure Web Site (10) Web Site测试环境
  • 原文地址:https://www.cnblogs.com/linzheng/p/1878058.html
Copyright © 2011-2022 走看看