回到首页

响应式用户交互组件库

bh-lay/UI

查看demo 下载

一、简介

1.1、UI是什么?

UI是前端公用的视觉交互(user interface 、 user interaction)类公用组建,用于和用户间的对话及动态界面展示。

1.2、UI目前有哪儿些内容?

  • 目前有虚拟弹层、弹框、提示信息、确认对话、列表选择等功能
  • 支持对象化事件的调用
  • 支持窗体自由拖拽
  • 支持自定义位置,方便控制对象在页面中的呈现
  • 对象被注销有回调支持,方便确认对象状态
  • 不依赖任何库,随拿随用

1.3、问题反馈

在使用中有任何问题,欢迎反馈给我,可以用以下联系方式跟我交流

  • 邮件:bh-lay#126.com, 把#换成@
  • QQ:279708284
  • weibo: @剧中人

二、如何使用

2.0 基本配置

UI.config.gap

为pop弹框配置页面显示的边界(默认值均为零),可用在弹框展开时与拖动处理时限定自身位置。

UI.config.zIndex

设置组件在页面中的z-index层级

demo

//设置边界
//top right bottom left
UI.config.gap('top',100);
//设置层级
UI.config.zIndex(5000);

2.1 UI.pop 弹框

用途比较广泛,可自定义尺寸位置、是否需要标题、是否显示蒙层、确认按钮(是否需要及按钮文字)等。

param 传入参数

  • Object param 参数对象
  • String [param.title] 弹框标题
  • String param.html 弹框内容
  • String [param.width] 弹框宽度
  • String [param.height] 弹框高度
  • String [param.top] 弹框与页面顶部距离
  • String [param.left] 弹框与页面左侧距离
  • String [param.mask] 是否显示蒙层(默认不显示)
  • Function [param.closeFn] 被关闭时的回调
  • Object|Function [param.confirm] 使用对话方式(详细定义或只定义回调)
  • Array [param.confirm.btns] 按钮自定义名称
  • Function [param.confirm.callback] 确定时的回调方法

returns 返回值

  • Object pop 弹框对象
  • Object pop.dom 弹框所属DOM
  • Object pop.cntDom 弹框内容部分DOM
  • Function pop.close 关闭弹框的方法
  • Function pop.adapt 自动调整对象在页面中的位置(用于弹框内容发生变化时)

demo

var pop = UI.pop({
  'title' : '我的弹框',
  'top' : 200,
  'left' : '600',
  'html' : 'this is html'
});
UI.pop({
  'title' : '我是自定义按钮的弹框',
  'confirm' : {
    'btns' : ['好的','不干'],
    'callback' : function(){
      alert(1);
    }
  },
//  'confirm' : function(){
//    alert(2);
//  }
});

2.2、 UI.confirm 确认对话框

询问用户是否进行该操作。

param 传入参数

  • Object param 参数对象
  • String param.text 提示内容
  • Function [param.closeFn] 被关闭时的回调
  • Array [param.btns] 按钮自定义名称
  • String [param.mask] 是否显示蒙层(默认显示)
  • Function [param.callback] 确定时的回调方法

returns 返回值

  • Object confirm
  • Object confirm.dom 弹框所属DOM
  • Function confirm.close 关闭弹框的方法

demo

UI.confirm({
  'text' : '请我吃饭吧!',
  'btns' : ['好的呀','不愿意'],
  'callback' : function(){
    alert('你是好人!');
  }
});

2.3、 UI.plane 虚拟弹层

没有样式,页面中只能同时存在一个plane实例化后的对象,点击自己以外的DOM,就会关掉自己,生命体征较弱的屌丝。

param 传入参数

  • Object param 参数对象
  • String param.html 弹层内容
  • Number [param.width] 宽度(默认为240px)
  • Number [param.height] 高度
  • Number [param.top]
  • Number [param.left]
  • Function [param.closeFn] 被关闭时的回调

returns 返回值

  • Object plane 弹层对象
  • Object plane.dom
  • Function plane.closeFn

demo

    UI.plane({
        'top' : 100,
        'left' : 120,
        'width' : 200,
        'html' : '<div>....</div>'
    });

2.4、UI.select 选择组件

展示一组待选项,供用户选择,移动端样式仿IOS原生ActionSheet组件(web版样式尚未完成)

param 传入参数

  • Array list 提示内容列表
  • Array list[0] 提示内容选项
  • String list[0][0] 提示内容选项标题
  • Function list[0][1] 提示内容选项被选择后的回调
  • Object [param] 参数对象
  • String [param.title] 标题
  • String [param.intro] 提示文字

returns 返回值

  • Object select select对象
  • Object select.dom select所属DOM

demo

UI.select([
    ['劈脸呼你',function(){
        UI.prompt('脸好疼');
    }],
    ['一刀捅死你',function(){
        UI.prompt('啊,我死了');
    }],
    ['滚一边去',function(){
        UI.prompt('滚远了');
    }]
],{
    'title' : '侬想组啥?',
    'intro' : '来一帮人,想打架么'
});

2.5、UI.prompt 提示信息

param 传入参数

  • String text 提示内容
  • Number [time] 默认为1300ms,0为不自动关闭

returns 返回值

  • Object prompt
  • Object prompt.dom prompt所属DOM
  • Function prompt.tips 为prompt设置内容 接收text 和 time两个参数,关闭时间处理同UI.prompt主方法
  • Function prompt.close 关闭prompt

demo

//默认时间
    UI.prompt('操作失败');
//指定时间
    UI.prompt('操作失败',2400);
//主动控制
    var a = UI.prompt('正在发送',0);
    a.tips('发送成功',1200);

    var b = UI.prompt('请等待……',0);
    b.close();

2.6、UI.cover 全屏浮层

覆盖整个页面的浮层,目前对关闭的设计有点生硬,欢迎提出宝贵意见。

param 传入参数

  • Object param 参数对象
  • String param.html 弹层内容
  • Function [param.closeFn] 被关闭时的回调

returns 返回值

  • Object cover cover对象
  • Object cover.dom cover所属DOM
  • Object cover.closeDom 关闭按钮DOM
  • Function cover.close 关闭cover

demo

UI.cover({
    'html' : '<div>....</div>'
});

2.7、UI.ask 输入弹层

用在需要用户输入数据时,以弹层的形式出现。

param 传入参数

  • String text 引导信息
  • Function [callback] 点击确定时的回调 默认会在掉用后关掉弹层,方法内return false会阻止关闭动作

returns 返回值

  • Object ask ask对象
  • Object ask.dom ask所属DOM
  • Function ask.setValue 设置内容
  • Function ask.close 关闭ask对象

demo

UI.ask('你今年多大了?',function(year){
    if(year == +year){
        if(year > 30){
            UI.prompt('都' + year + '岁了啊,这么老啊!');
        }else if(year > 17){
            UI.prompt('干柴烈火的年纪哦!');
        }else{
            UI.prompt('回家玩儿去!');
        }
    }else{
        UI.prompt('写个数字会死啊!');
        return false
    }
});

I'm in Github