响应式用户交互组件库UI

demo:最新版

下载：只需要一个文件，多神奇 dialog.js

一、简介

1.1、UI是什么?

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

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

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

1.3、问题反馈

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

• 邮件：bh-lay#126.com
• github: http://github.com/bh-lay
• weibo: @剧中人

二、如何使用

2.0 基本配置

UI.config.gap

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

UI.config.zIndex

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

demo

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

2.1 UI.pop 弹框

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

param 传入参数

• Objectparam 参数对象
• String [param.title] 弹框标题
• Stringparam.html 弹框内容
• String [param.width] 弹框宽度 * String [param.height] 弹框高度（推荐根据内容自适应）
• String [param.top] 弹框与页面顶部距离
• String [param.left] 弹框与页面左侧距离
• Boolean [param.mask] 是否显示蒙层（默认不显示）
• Boolean [param.easyClose] 点击空白或按下esc，关闭自己
• Function [param.init] 对象构建完成时的回调（主要是动画）
• Object|Function [param.confirm] 使用对话方式（详细定义或只定义回调）
• Array [param.confirm.btns] 按钮自定义名称
• Function [param.confirm.callback] 确定时的回调方法

returns 返回值

• Objectpop 弹框对象
• Objectpop.node 弹框所属DOM
• Objectpop.cntDom 弹框内容部分DOM
• Functionpop.destroy 关闭弹框的方法
• Functionpop.adapt 自动调整对象在页面中的位置（用于弹框内容发生变化时）

demo

varpop=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 传入参数

• Objectparam 参数对象
• Stringparam.text 提示内容
• Array [param.btns] 按钮自定义名称
• String [param.mask] 是否显示蒙层(默认显示)
• Function [param.callback] 确定时的回调方法
• Function [param.init] 对象构建完成时的回调（主要是动画）

returns 返回值

• Objectconfirm
• Objectconfirm.node 弹框所属DOM
• Functionconfirm.destroy 关闭弹框的方法

demo

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

2.3、 UI.plane 虚拟弹层

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

2.4、UI.select 选择组件

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

param 传入参数

• Arraylist 提示内容列表
• Arraylist[0] 提示内容选项
• Stringlist[0][0] 提示内容选项标题
• Functionlist[0][1] 提示内容选项被选择后的回调
• Object [param] 参数对象
• String [param.title] 标题
• String [param.intro] 提示文字
• Function [param.init] 对象构建完成时的回调（主要是动画）

returns 返回值

• Objectselect select对象
• Objectselect.node select所属DOM

demo

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

2.5、UI.prompt 提示信息

param 传入参数

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

returns 返回值

• Objectprompt
• Objectprompt.node prompt所属DOM
• Functionprompt.tips 为prompt设置内容 接收text 和 time两个参数，关闭时间处理同UI.prompt主方法
• Functionprompt.destroy 关闭prompt

demo

//默认时间UI.prompt('操作失败');//指定时间UI.prompt('操作失败',2400);//主动控制vara=UI.prompt('正在发送',0);a.tips('发送成功'，1200);varb=UI.prompt('请等待……',0);b.destroy();

2.6、UI.cover 全屏浮层

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

param 传入参数

• Objectparam 参数对象
• Stringparam.html 弹层内容
• Function [param.init] 对象构建完成时的回调（主要是动画）

returns 返回值

• Objectcover cover对象
• Objectcover.node cover所属DOM
• Functioncover.destroy 关闭cover

demo

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

2.7、UI.ask 输入弹层

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

param 传入参数

• Stringtext 引导信息
• Function [callback] 点击确定时的回调 默认会在掉用后关掉弹层，方法内return false会阻止关闭动作
• Function [param.init] 对象构建完成时的回调（主要是动画）

returns 返回值

• Objectask ask对象
• Objectask.node ask所属DOM
• Functionask.setValue 设置内容
• Functionask.destroy 关闭ask对象

demo

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