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](http://demo.citongs.com/febsui)
# Install
Use npm to install:
```js
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
```html
febsui.dialog_showToast({content:'即将开始', icon:'ok'});
```
# babel
以下列方式使用
```js
import febs from 'febs-browser'; // or 'febs'
import febsui from 'febs-ui';
import 'febs-ui/febsui.css'; // 或是在html头部引用样式.
//
febsui.dialog_showToast({content:'即将开始', icon:'ok'});
```
# framework
目前实现了如下控件.
- [jquery extend](#extend)
- [css](#css)
- [button](#button)
- [loading](#loading)
- [toast](#toast)
- [alert dialog](#dialog)
- [confirm dialog](#dialog)
- [edit dialog](#dialog)
- [custom dialog](#custom-dialog)
- [paging](#page)
- [switch](#switch)
- [checkbox](#checkbox)
- [radio](#radio)
- [swiper](#swiper)
- [popover](#popover)
- [actionSheet](#actionsheet)
- [upload](#upload)
### extend
引入了 如下几个jquery插件方法. (febsui无需额外使用jquery库)
```js
/**
* @desc 设置为disable (对input, button等元素有效).
*/
$('').setDisabled(isDisable);
/**
* @desc 返回当前控件是否为disable状态.
*/
$('').isDisabled();
/**
* @desc 判断第一个元素是否可见.
*/
$('').isVisible();
/**
* @desc 判断是否存在可见元素.
*/
$('').hasVisible();
```
### initial ui
对于非js调用创建的ui, 在编辑好html标签代码后, 需要调用相应的初始化方法进行控件初始化.
页面加载完成`ready`事件触发后, 会自动调用一次初始化方法; 当如果在后续进行dom的修改添加新控件时, 需要手动调用初始化方法.
特殊的事件处理方式.
```js
/**
* @desc: 阻止在elem上的move或touchmove事件.
*/
febsui.preventEvent(elem:any):void;
```
初始化方法列表
```js
/**
* @desc: 对页面上所有类型的ui控件进行初始化.
*/
febsui.ui_init();
/**
* @desc 初始化页面上所有swiper控件
* 默认在页面加载完成时会调用一次; 加入新的swiper控件时需调用一次.
*/
febsui.ui_swiper_init(elem?:any);
/**
* @desc 初始化页面上所有switch控件
* 默认在页面加载完成时会调用一次; 加入新的switch控件时需调用一次.
*/
febsui.ui_switch_init(elem?:any);
/**
* @desc 初始化页面上所有checkbox控件 (带 febsui-checkbox 类的控件)
* 默认在页面加载完成时会调用一次; 加入新的checkbox控件时需调用一次.
*/
febsui.ui_checkbox_init(elem?:any);
/**
* @desc 初始化页面上所有radio控件 (带febsui-radio类的控件)
* 默认在页面加载完成时会调用一次; 加入新的radio控件时需调用一次.
*/
febsui.ui_radio_init(elem?:any);
/**
* @desc: 初始化popover控件.
* 对页面上 的所有 元素进行初始化.
* 在增加新的popover到页面后, 需要手动调用此方法.
*/
febsui.ui_popover_init(elem?:any);
/**
* @desc: 初始化actionSheet控件.
* 对页面上 的所有 元素进行初始化.
* 在增加新的actionsheet到页面后, 需要手动调用此方法.
*/
febsui.ui_actionSheet_init(elem?:any);
/**
* @desc: 初始化dialog控件.
* 对页面上 的所有 元素进行初始化.
* 在增加新的dialog到页面后, 需要手动调用此方法.
*/
febsui.ui_dialog_init(elem?:any):void;
/**
* @desc: 初始化uploader控件.
* 对页面上 的所有 元素进行初始化.
* 在增加新的uploader到页面后, 需要手动调用此方法.
*/
febsui.ui_uploader_init(elem?:any):void;
/**
* @desc: 用于解决ie9下不支持css:animation; 初始化
控件.
*/
febsui.ui_spin_init(elem?:any):void;
/**
* @desc: 对所有的button控件进行初始化, 保证移动端touch穿透体验.
*/
febsui.ui_button_init(elem?:any):void;
```
调用ui初始化方法之后, 会对html元素结构进行操作后初始化事件. 如果需要手动设置初始化事件, 可以调用如下方法.
```js
/**
* @desc 对元素进行事件初始化.
* @param elem: 已经是完整的样式.
*/
febsui.ui_swiper_init_event(elem:selector);
/**
* @desc 对元素进行事件初始化.
* @param elem: 已经是完整的样式.
*/
febsui.ui_switch_init_event(elem:selector);
/**
* @desc 对元素进行事件初始化.
* @param elem: 已经是完整的样式.
*/
febsui.ui_checkbox_init_event(elem:selector);
/**
* @desc 对元素进行事件初始化.
* @param elem: 已经是完整的样式.
*/
febsui.ui_radio_init_event(elem:selector);
/**
* @desc 对元素进行事件初始化.
* @param elem: 已经是完整的样式.
*/
febsui.ui_button_init_event(elem:selector):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
```html
default
primary
secondary
warning
danger
disabled
```
### loading
已经对需要显示的信息进行了转义
```js
/**
* @desc: 当前是否显示.
* @return boolean.
*/
febsui.loading_isVisiable()
```
```js
/**
* @desc: 使用延时显示加载框.
* @param text: 提示文本.
* @param timeout: 延时显示, 默认为0.
* @param spinClass: 默认为 febsui-icon-spin1-white ; ie9以下浏览器使用 febsui-icon-spin3-white
* @param spinLeft: 是否在左侧显示spin.
* @param whiteBg: 使用白色背景
* @return:
*/
febsui.loading_show(text, timeout, spinClass, spinLeft, whiteBg)
/**
* @desc: 通过每500ms改变文本的方式显示加载框; 例如显示 3,2,1,3,2,1循环显示.
* @param textArray: 变化的文本数组.
* @param changeTextCB: 当前显示文本的回调. function(text).
* @param hideCB: 隐藏加载框时的设置文本的函数. function().
* @return:
*/
febsui.loading_show_text(textArray, changeTextCB, hideCB)
/**
* @desc: 隐藏加载对话框
* @return:
*/
febsui.loading_hide()
```
使用如下代码可以创建spin动画.
```html
```
### toast
已经对需要显示的信息进行了转义
```js
/**
* @desc: 显示提示.
* @param ctx: {
* ctx.title: 标题.
* ctx.durable: 持续的时间 ms.
* ctx.icon: 前置图标.
* ctx.callback: function(){} // 对话框消失后的回调.
* ctx.center: 默认为false; 是否使用居中的显示方式.
* }
* or string.
*/
febsui.toast( ctx );
/**
* @desc 手动隐藏toast.
*/
febsui.toast_hide();
```
### dialog
已经对需要显示的信息进行了转义
```js
/**
* @desc: 隐藏对话框
* @param selector: 关闭指定的窗口; null则关闭所有.
* @param finishCb: 完成时的回调.
* @return:
*/
febsui.dialog_hide(selector?: any, finishCb?:()=>{}): void;
/**
* @desc: 显示警告对话框. (回调函数的上下文为当前窗口)
* @param ctx: {
* ctx.cssClass: 自定义的扩展样式.
* ctx.blackBg: 使用黑色背景.
* ctx.title: 标题.
* ctx.content: 内容文字.
* ctx.contentHtml: html格式的内容 (与content二选一)
* ctx.confirm: function(){} // 点击确认键的回调.
* ctx.okText
* }
* or string.
*/
febsui.dialog_showAlert( ctx );
/**
* @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.dialog_showConfirm( ctx );
/**
* @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.dialog_showConfirmEdit( ctx );
```
### page
```js
/**
* @desc: 初始化page控件.
* @param elem: 将控件插入到elem中, elem是一个jquery的对象.
* @param curPage: 当前页
* @param pageCount: 总页数
* @param totalCount: 总条数
* @param pageCallback: 页面跳转函数, function(page) {}
* @return:
*/
febsui.page_init(elem, curPage, pageCount, totalCount, pageCallback)
```
### custom dialog
可以自行定义dialog的内容
```html
```
> 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 |
方法
```js
/**
* @desc 判断是否是popover
*/
$('.febsui-dialog').isDialog();
/**
* @desc 显示dialog
*/
$('.febsui-dialog').dialogShow(cb:()=>{});
/**
* @desc 隐藏dialog;
*/
$('.febsui-dialog').dialogHide(cb:()=>{});
```
### switch
示例
```html
```
类
| 类名| 说明 |
|----|----|
| febsui-switch-on | 此类表示switch为on状态. |
| febsui-switch-off | 此类表示switch为off状态. |
方法
```js
/**
* @desc 判断是否是switch
*/
$('.febsui-switch').isSwitch();
/**
* @desc 监听变化事件
*/
$('.febsui-switch').switch(function(){
//
});
or
$('.febsui-switch').on('switch', function(){});
/**
* @desc 手动触发事件
*/
$('.febsui-switch').switch();
or
$('.febsui-switch').on('switch');
/**
* @desc 改变状态
* @param isOn: 设置控件的状态.
* @param trigger: 可选, 是否触发事件监听 (状态未改变不触发).
*/
$('.febsui-switch').switchOn(isOn, trigger);
/**
* @desc 返回当前控件的状态.
*/
$('.febsui-switch').switchIsOn();
```
### checkbox
示例
```html
checkbox
//
// 原生用法.
//
// get checked.
$('#checkbox1')[0].checked;
// set checked.
$('#checkbox1')[0].checked = true;
//
// febsui 用法.
//
// get value.
$('#checkbox1').checkboxChecked();
// set value.
$('#checkbox1').checkboxChecked(true);