febs-ui 库是一些常用的ui的合集; febs-ui 库依赖 febs-browser 库
设计上
- 可以通过修改
febsui-icon.css
,febsui.css
来个性化ui样式. - 尽量使用js方法的方式来构建ui.
- 默认样式为iOS样式
febs-ui 引入了febs-browser(实现了jquery的部分接口), 无需额外引入jquery;
如果需要jquery, 请在febs-ui,febs之前引用
可以查看 demo
Install
Use npm to install:
npm install febs-ui --save
browser
以下列方式使用
copy directory
node_modules/febs-browser/dist/febs
to client
copy directory
node_modules/febs-ui/dist/febsui
to client
<!-- 会自动关联 febsui-icon.css -->
babel
以下列方式使用
; // or 'febs';; // 或是在html头部引用样式. //febsui;
framework
目前实现了如下控件.
- jquery extend
- css
- button
- loading
- toast
- alert dialog
- confirm dialog
- edit dialog
- custom dialog
- paging
- switch
- checkbox
- radio
- swiper
- popover
- actionSheet
- upload
extend
引入了 如下几个jquery插件方法. (febsui无需额外使用jquery库)
/** * @desc 设置为disable (对input, button等元素有效). */; /** * @desc 返回当前控件是否为disable状态. */;/** * @desc 判断第一个元素是否可见. */;/** * @desc 判断是否存在可见元素. */;
initial ui
对于非js调用创建的ui, 在编辑好html标签代码后, 需要调用相应的初始化方法进行控件初始化.
页面加载完成ready
事件触发后, 会自动调用一次初始化方法; 当如果在后续进行dom的修改添加新控件时, 需要手动调用初始化方法.
特殊的事件处理方式.
/*** @desc: 阻止在elem上的move或touchmove事件.*/febsui:void;
初始化方法列表
/*** @desc: 对页面上所有类型的ui控件进行初始化.*/febsui; /** * @desc 初始化页面上所有swiper控件 * 默认在页面加载完成时会调用一次; 加入新的swiper控件时需调用一次. */febsui; /** * @desc 初始化页面上所有switch控件 * 默认在页面加载完成时会调用一次; 加入新的switch控件时需调用一次. */febsui; /** * @desc 初始化页面上所有checkbox控件 (带 febsui-checkbox 类的控件) * 默认在页面加载完成时会调用一次; 加入新的checkbox控件时需调用一次. */febsui; /** * @desc 初始化页面上所有radio控件 (带febsui-radio类的控件) * 默认在页面加载完成时会调用一次; 加入新的radio控件时需调用一次. */febsui;/*** @desc: 初始化popover控件.* 对页面上 的所有 <popover> 元素进行初始化.* 在增加新的popover到页面后, 需要手动调用此方法.*/febsui; /*** @desc: 初始化actionSheet控件.* 对页面上 的所有 <actionsheet> 元素进行初始化.* 在增加新的actionsheet到页面后, 需要手动调用此方法.*/febsui;/*** @desc: 初始化dialog控件.* 对页面上 的所有 <dialog> 元素进行初始化.* 在增加新的dialog到页面后, 需要手动调用此方法.*/febsui:void;/*** @desc: 初始化uploader控件.* 对页面上 的所有 <uploader> 元素进行初始化.* 在增加新的uploader到页面后, 需要手动调用此方法.*/febsui:void;/*** @desc: 用于解决ie9下不支持css:animation; 初始化<div class="febsui-icon-spin1/febsui-icon-spin1-white">控件.*/febsui:void;/*** @desc: 对所有的button控件进行初始化, 保证移动端touch穿透体验.*/febsui:void;
调用ui初始化方法之后, 会对html元素结构进行操作后初始化事件. 如果需要手动设置初始化事件, 可以调用如下方法.
/** * @desc 对元素进行事件初始化. * @param elem: 已经是完整的样式. */febsui; /** * @desc 对元素进行事件初始化. * @param elem: 已经是完整的样式. */febsui; /** * @desc 对元素进行事件初始化. * @param elem: 已经是完整的样式. */febsui; /** * @desc 对元素进行事件初始化. * @param elem: 已经是完整的样式. */febsui; /** * @desc 对元素进行事件初始化. * @param elem: 已经是完整的样式. */febsui:void;
css
类 | 说明 |
---|---|
febsui-ellipsis | 单行文字缩略. |
febsui-ellipsis-multiline | 多行文字缩略. 默认4行; 修改 -webkit-line-clamp: 4; line-clamp: 4; 自定义 |
febsui-visible | 设置为 visibility: visible; febsui-visible与febsui-invisible 之间切换有渐变效果 |
febsui-invisible | 设置为 visibility: hidden; febsui-visible与febsui-invisible 之间切换有渐变效果 |
button
default primary secondary warning danger disabled
loading
已经对需要显示的信息进行了转义
/*** @desc: 当前是否显示.* @return boolean.*/febsui
/*** @desc: 使用延时显示加载框.* @param text: 提示文本.* @param timeout: 延时显示, 默认为0.* @param spinClass: 默认为 febsui-icon-spin1-white ; ie9以下浏览器使用 febsui-icon-spin3-white* @param spinLeft: 是否在左侧显示spin.* @param whiteBg: 使用白色背景* @return: */febsui /*** @desc: 通过每500ms改变文本的方式显示加载框; 例如显示 3,2,1,3,2,1循环显示.* @param textArray: 变化的文本数组.* @param changeTextCB: 当前显示文本的回调. function(text).* @param hideCB: 隐藏加载框时的设置文本的函数. function().* @return: */febsui /*** @desc: 隐藏加载对话框* @return: */febsui
使用如下代码可以创建spin动画.
toast
已经对需要显示的信息进行了转义
/** * @desc: 显示提示. * @param ctx: { * ctx.title: 标题. * ctx.durable: 持续的时间 ms. * ctx.icon: 前置图标. * ctx.callback: function() * ctx.center: 默认为false; 是否使用居中的显示方式. * } * or string. */febsui;/*** @desc 手动隐藏toast.*/febsui;
dialog
已经对需要显示的信息进行了转义
/*** @desc: 隐藏对话框* @param selector: 关闭指定的窗口; null则关闭所有.* @param finishCb: 完成时的回调.* @return: */febsui: void; /** * @desc: 显示警告对话框. (回调函数的上下文为当前窗口) * @param ctx: { * ctx.cssClass: 自定义的扩展样式.* ctx.blackBg: 使用黑色背景.* ctx.title: 标题.* ctx.content: 内容文字.* ctx.contentHtml: html格式的内容 (与content二选一)* ctx.confirm: function()* ctx.okText* }* or string.*/febsui; /** * @desc: 显示确认对话框. (回调函数的上下文为当前窗口) * @param ctx: { * ctx.cssClass: 自定义的扩展样式.* ctx.blackBg: 使用黑色背景.* ctx.title: 标题.* ctx.content: 内容文字.* ctx.contentHtml: html格式的内容 (与content二选一)* ctx.confirm: function()* ctx.cancel: function()* ctx.okText 确认按钮文字* ctx.cancelText: 取消按钮文字* }*/febsui; /** * @desc: 显示文本输入确认对话框. (回调函数的上下文为当前窗口) * @param ctx: { * ctx.cssClass: 自定义的扩展样式. * ctx.blackBg: 使用黑色背景. * ctx.title: 标题. * ctx.content: 内容文字. * ctx.contentHtml: html格式的内容 (与content二选一) * ctx.editText: 输入框文字. * ctx.confirm: function(text) * ctx.cancel: function() * ctx.okText: * ctx.cancelText: * } */febsui;
page
/*** @desc: 初始化page控件.* @param elem: 将控件插入到elem中, elem是一个jquery的对象.* @param curPage: 当前页* @param pageCount: 总页数* @param totalCount: 总条数* @param pageCallback: 页面跳转函数, function(page) * @return: */febsui
custom dialog
可以自行定义dialog的内容
标题 ... 取消 确认
must provide a
id
attrubute
将为自定义dialog元素添加一个
'id-'+元素id
的类; 对自定义dialog样式设定时, 使用这个类名, 而不要使用id来定义
在页面中查找dialog可以使用
$('.id-元素id')
或$('.febsui-dialog[data-id="元素id"]')
来查找
属性
属性 | 说明 | 值 |
---|---|---|
data-mask-close | 表明点击空白处是否关闭对话框. (默认false) | 允许的值为: true, false |
data-mask-zindex | dialog 的父mask层的 z-index | 默认值为 20000 |
方法
/** * @desc 判断是否是popover */;/** * @desc 显示dialog */; /** * @desc 隐藏dialog; */;
switch
示例
<!-- 默认是on状态. --> <!-- off状态. --> <!-- disabled状态. -->
类
类名 | 说明 |
---|---|
febsui-switch-on | 此类表示switch为on状态. |
febsui-switch-off | 此类表示switch为off状态. |
方法
/** * @desc 判断是否是switch */;/** * @desc 监听变化事件 */; or ; /** * @desc 手动触发事件 */; or ; /** * @desc 改变状态 * @param isOn: 设置控件的状态. * @param trigger: 可选, 是否触发事件监听 (状态未改变不触发). */; /** * @desc 返回当前控件的状态. */;
checkbox
示例
checkbox
方法
/** * @desc 判断是否是checkbox */;/** * @desc 设置当前checkbox的checked状态. * @param checked: 当参数不存在时返回是否是checked状态. 否则设置checked状态. * @return 当获取checked状态时返回 boolean; 当设置状态时返回dom. */;/** * @desc 监听变化事件 */;
radio
radio 同checkbox一样使用.
male female
方法
/** * @desc 判断是否是radio */;/** * @desc 获得radio组当前值. */;/** * @desc 设置radio组当前值. */;/** * @desc 设置当前radio的checked状态. * @param checked: 当参数不存在时返回是否是checked状态. 否则设置checked状态. * @return 当获取checked状态时返回 boolean; 当设置状态时返回dom. */;/** * @desc 监听变化事件 */;
swiper
跑马灯效果
示例
1 2 3 4
垂直模式, 默认仅将touch事件在swiper内有效, 即不会引起父控件滚动.
swiper page 之间不能有margin等空隙; 需要空隙在内部的div中实现.
类
febsui-swiper-vertical
: 可以设置为垂直滚动样式.
属性
属性 | 说明 | 值 |
---|---|---|
data-current | 表明当前显示的页面 | 允许的值为: 整数索引位置 |
data-dots | 表明是否显示当前页指示器; (默认 true) | 允许的值: true, false |
data-loop | 表明是否允许循环显示. (默认 true) | 允许的值: true, false |
data-dot-color | 指示器颜色 | 例如: #ffffff |
data-auto | 自动切换动画; 如果存在则会在指定时间内自动切换动画. 其他非数值值将默认为 7000; 改变此属性后, 动画速度会改变, 但不可从0(禁止)变为动画. | 例如: 3000 |
data-align | 指明当前page在页面中的对齐方式, (默认 center) | 允许的值: 'center', 偏移像素数值 |
方法
/** * @desc 判断是否是swiper */; /** * @desc 设置指示器颜色. */; /** * @desc 设置动画速度, ms为下一次变换的间隔时间, 0则无动画. * 如果当前为0, 则无效. */; /** * @desc 获取当前页面索引. */; /** * @desc 移动到前一页. * @param trigger: 是否触发事件 (默认false). */; /** * @desc 移动到后一页. * @param trigger: 是否触发事件 (默认false). */; /** * @desc 移动到指定页. * @param index: 页索引. * @param animation: 是否存在动画 (默认true). * @param trigger: 是否触发事件 (默认false). */; /** * @desc 返回总共多少页. */;
事件
/** * @desc (特殊方法) 正在进行手动移动监听. 传入null方法则取消回调. * @param percent: 移动到下一个page的百分比; 负数表示移到到上一个page. */; /** * @desc 监听变化事件 */; or ; /** * @desc 手动触发事件 */; or ;
popover
示例
<!-- 使用 top, left 样式来指定位置 --> cell1 cell2 cell3 <!-- 使用 data-attach 来固定位置到指定元素 --> <!-- {{ children nodes }} -->show
must provide a
id
attrubute
将为popover元素添加一个
'id-'+元素id
的类; 对popover样式设定时, 使用这个类名, 而不要使用id来定义
在页面中查找popover可以使用
$('.id-元素id')
或$('.febsui-popover[data-id="元素id"]')
来查找
属性
属性 | 说明 | 值 |
---|---|---|
data-direction | 表明popover的方向. (默认为auto) | 允许的值为: left, right, top, bottom, center, auto |
data-offset | 表明提示位置(三角尖)的偏移像素. (auto时忽略此数值) | 允许的值: 只能为数值 |
data-attach | 表明显示时自动显示在此元素的指定位置. | 例如: #btn1 |
data-blackBg | 是否使用黑色背景 | 允许的值: true, false |
方法
/** * @desc 判断是否是popover */;/** * @desc 显示popover * @param mask 是否显示掩码背景. * @param attachNode 附加到此节点上显示. 如果不存在, 则查询 data-attach 属性. */; /** * @desc 隐藏popover; 显示后点击也会隐藏. */;
actionsheet
示例
cell1 cell2 CANCEL
must provide a
id
attrubute
将为actionsheet元素添加一个
'id-'+元素id
的类; 对actionsheet样式设定时, 使用这个类名, 而不要使用id来定义
在页面中查找actionsheet可以使用
$('.id-元素id')
或$('.febsui-actionsheet[data-id="元素id"]')
来查找
类
类名 | 说明 |
---|---|
febsui-actionsheet-cell | 正常的单元格 |
febsui-actionsheet-cancel | 底部cancel的单元格 |
属性
属性名 | 说明 | 取值 |
---|---|---|
data-blackBg | 是否使用黑色背景 | 允许的值: true, false |
方法
/** * @desc 判断是否是actionsheet */;/** * @desc 显示actionsheet */; /** * @desc 隐藏actionsheet; 显示后点击也会隐藏. */;
upload
示例
上传图片
或使用 on
方式绑定事件.
;;;;
属性
属性 | 说明 | 值 |
---|---|---|
data-api | 上传文件的api地址 | |
data-accept | 接受文件的类型 | (可选) MIME_type值 |
data-filename | 是否显示选中的文件名 | (可选) true |
data-begin | 上传开始的回调 | (可选) function(uploader, filename) {} |
data-finish | 上传成功的回调 | (可选) function(uploader, serverData) {} |
data-progress | 上传进度的回调 | (可选) function(uploader, percent) {} |
data-error | 上传错误的回调 | (可选) function(uploader, err) {}; err可能的值有: febsui.uploadErr.nofile - 未选择文件 febsui.uploadErr.sizeExceed - 文件太大 febsui.uploadErr.crc32 - 计算本地文件hash值时错误 febsui.uploadErr.net - ajax上传时出错 其他 |
data-maxsize | 最大的文件字节大小 | (可选) 10240 |
data-multiple | 是否多选 | (可选) false / true |
data-timeout | 发送的timeout; ms | (可选) 5000 |
事件.
事件名 | 说明 | 参数 |
---|---|---|
uploadBegin | 上传开始的回调 | event, {filename:string} |
uploadProgress | 上传进程的回调 | event, {progress:number} |
uploadError | 上传错误的回调 | event, {err:any} |
uploadFinish | 上传完成的回调 | event, {responseData:any} |
方法
/** * @desc 重设为未开始上传的样式 */;
上传控件配合 febs
库使用. js的使用方式为:
如果是ie9以下浏览器, 服务器返回的数据时, 需要把响应头的content-type的值设为
text/plain
或者text/html
; 否则会出现提示保存文件.
multipart/form-data方式上传.
/** * Desc: * upload控件使用一个接口来上传文件, 使用multpart/form-data方式传输: * 1. uploadUrl: 上传文件. * Example: * 前台引入: * 1. 在需要upload的页面上使用如下语句: * <form method="post" role="form" enctype="multipart/form-data" id="fileForm"> * <input type="file" class="form-control" name="file" onchange="febsui.upload(cfg)" multiple> * <input type="submit" value="提交"> <!-- ie9以下浏览器需要提供此元素 --> * </form> * 后台: * 1. 在uploadUrl中调用 await require('febs').controls.upload.accept(app, conditionCB); 当满足条件时将存储, 并返回true表示成功. */ 客户端调用如下接口上传文件 /** * 并且 <input type="file" name="file"... 中, 必须存在name属性. * 使用post方式上传文件. * @param cfg: object, 其中 * { * data: , // 上传到服务器的任意字符串数据. * formObj: , // 含有enctype="multipart/form-data"的form * fileObj: , // form中的file对象 * fileIndex: , // 选中的file文件的索引; 默认为0; * uploadUrl: , // 上传文件内容的url. 系统将自动使用 uploadUrl?crc32=&size=的方式来上传. * maxFileSize: , // 允许上传的最大文件.0表示无限制.默认为0 * fileType: , // 允许的文件类型. 如: image/gif,image/jpeg,image/x-png * beginCB: , // 上传开始的回调. function(uploader); 调用uploader.abort() 可以停止上传. * finishCB: , // 上传完成后的回调. function(err, fileObj, serverData, xhr=null) * // err: - febsui.uploadErr.nofile 未选择文件. * // - febsui.uploadErr.sizeExceed 文件太大. * // - febsui.uploadErr.crc32 计算本地文件hash值时错误. * // - febsui.uploadErr.net ajax上传时出错. * // serverData: 服务器返回的数据. * progressCB: , // 上传进度的回调. function(fileObj, percent), * headers: { // 设置request headers * 'customHeader': 'value' * }, * crossDomain: true, // 跨域, 默认为true * withCredentials: true, // 是否附带cookie, 默认为true * checkoutCrc32: true, // 是否上传 crc32,size,ajaxmark(防止chrome优化) 三个参数. * timeout: 5000, // 上传超时时间. * sliceOffset: 0, // 上传数据偏移地址. (ie9及以下不支持). * sliceLength: -1, // 上传数据段长度 (-1表示到结尾). (ie9及以下不支持). * } */ febsui;
使用 sliceOffset, sliceLength 字段可以进行断点续传.
上传完成后, 如果需要清空文件选择框, 调用 ctx.fileObj.value=""
例子 后台:
exports{ var r = await controlsuploadacceptctx { console; console; console; return 'tempPath/temp.filename'; };};
前台:
<script type="text/javascript" charset="utf-8" src="/febs/febs.min.js"></script><script type="text/javascript" charset="utf-8" src="/febsui/febsui.min.js"></script> <script type="text/javascript"> { febsui;}</script> <form method="post" role="form" enctype="multipart/form-data" id="fileForm"> <input id="filec" type="file" name="file" onchange="javascript:upload()" multiple></form>
base64方式上传.
客户端调用如下接口上传文件.
/** * post方式上传文件. * 使用文件流片段的方式. 每个片段进行验证.速度稍慢 * @param cfg: object, 其中 * { * data: , // 上传到服务器的任意字符串数据,将在发送请求时发送. * fileBase64Str: , // 文件的base64格式字符串 * headerUrl: , // 上传开始前的header请求地址. * uploadUrl: , // 上传文件内容的url. * chunkSize: 1024*20, // 每次上传的块大小.默认20kb * beginCB: , // 上传开始的回调. function(uploader); 调用uploader.abort() 可以停止上传. * finishCB: , // 上传完成后的回调. function(err, serverData) * // err: - febsui.uploadErr.nofile 未选择文件. * // - febsui.uploadErr.sizeExceed 文件太大. * // - febsui.uploadErr.crc32 计算本地文件hash值时错误. * // - febsui.uploadErr.net ajax上传时出错. * // serverData: 服务器返回的数据. 至少包含一个filename * progressCB: , // 上传进度的回调. function(percent) * } */febsui;
例子 后台:
// 处理上传请求.exports { await febsuiuploadBase64;} // 处理上传片段.exports { await febsuiuploadBase64acceptctx { var img = ; var info = await img; return febsutils; } { // get upload session info. return ctxsessionuploadSegInfo; } { // set upload sessoin info. ctxsessionuploadSegInfo = data; } { // clear upload session info. ctxsessionuploadSegInfo = undefined; };}
前台:
<script type="text/javascript" charset="utf-8" src="/febs/febs.min.js"></script><script type="text/javascript" charset="utf-8" src="/febsui/febsui.min.js"></script> <script type="text/javascript"> febsui;</script>