WUI v1.1.0

基础说明

开始使用 Getting Started
底层方法 基础支撑
页面元素 规范 / 公共类
模块规范 使用 / 扩展
常见问题 FAQ
更新日志

页面元素

布局 容器 / 栅格 / 后台布局
颜色 主题色 / 内置背景色
图标 字体图标
动画 内置 CSS3 动画
按钮 button 组
表单 form 元素集合
导航 菜单 / 面包屑
选项卡 Tabs 切换
进度条 progress
面板 折叠 / 手风琴
表格 静态 table
徽章 小圆点 / 小边框
时间线 timeline
区块 引用 / 字段集
文字 颜色 / 链接 / 位置
辅助 边距 / 填充 / 横线等

内置模块

弹出层 layer
日期与时间选择 wdate
分页 wpage
模板引擎 wtpl
数据表格 table
表单 form
文件上传 upload
穿梭框 transfer
树形组件 tree
颜色选择器 colorpicker
常用元素操作 element
滑块 slider
评分 rate
轮播 carousel
流加载 flow
工具集 util
简单编辑器 wedit
富文本编辑器 tinymce
下拉菜单 menu
拖动排序 dragsort
自动完成 autocomplete
代码修饰器 code
通知控件 notice
下拉多选控件 xmSelect
滑块验证 sliderVerify
无限级联选择器 cascader
通知控件 - wui.notice

此控件是基于 wui 的 notice 通知控件,可用于美化消息通知,控件支持响应式,算是对 layer 的一个扩展。
模块加载名称:notice
点我一下,再看看右上角

感觉是不是很惊艳呢?很简单几行代码就能实现哦!

<script type="text/javascript">
    wui.use('notice', function () {
        var notice = wui.notice;
        notice.warning("这是一个警告:BALABALA");
    });
</script>

我们为您内置4种常用的通知场景,点击下面的按钮分别试试吧。


提示 警告 成功 失败
//提示
notice.info("我是一个提示!");

//警告
notice.warning("警告:下不为列!");

//成功
notice.success("成功了,看好你哦!");

//失败
notice.error("大佬,出错了!");
目前 notice 组件提供了以下基础参数,你可根据实际场景进行相应的设置
参数选项 说明 类型 默认值
Reverse 是否镜像显示 boolean false
closeButton 显示关闭按钮 boolean true
tapToDismiss 鼠标点击控件任意位置关闭 boolean true
closeOnHover 鼠标划过控件后关闭 boolean true
progressBar 显示控件距离消失时间倒计时进度条 boolean false
timeOut 显示时间,单位:毫秒, 0为不自动关闭 number 3000
iconClass 自定义背景色,支持 wui 内置 css 类名,参考颜色,格式
{
error: '',
info: '',
success: '',
warning: ''
}
Array {
error: 'toast-error',
info: 'toast-info',
success: 'toast-success',
warning: 'toast-warning'
}
icon 自定义通知图标,支持 wui 内置图标,参考图标,格式
{
error: '',
info: '',
success: '',
warning: ''
}
Array {
error: 'wui-icon-grievance',
info: 'wui-icon-notice',
success: 'wui-icon-emoji',
warning: 'wui-icon-tips'
}
positionClass 通知控件显示位置,可选项:
top-center:顶部中间
bottom-center:底部中间
top-full-width:顶部通栏
bottom-full-width:底部通栏
top-left:顶部左侧
top-right:项部右侧
bottom-right:底部右侧
bottom-left:底部左侧
string top-right
showMethod 显示方式,可选项:
fadeIn、slideDown、show
string fadeIn
hideMethod 隐藏方式,可选项:
fadeOut、slideUp、hide
string fadeOut
showEasing 显示时的动画,可选项:swing、linear
swing:动画速度由快到慢
linear:动画速度一样
string swing
hideEasing 消失时的动画,可选项:swing、linear
swing:动画速度由快到慢
linear:动画速度一样
string swing
showDuration 显示动画的时间,单位:毫秒 number 300
hideDuration 消失动画的时间,单位:毫秒 number 1000
onclick 通知控件关闭时的回调 Function -
escapeHtml 通知内容支持HTML语法,如加个超连接,设置为 true 则会将HTML代码转义后再显示 boolean false

举个栗子

<script type="text/javascript">
    wui.use('notice', function () {
        var notice = wui.notice;

        //就在这里设置参数
        notice.options = {
            closeButton:false,
            ... ...
        };

        notice.warning("警告:BALABALA");
    });
</script>
© 2021 Wangren.Net  Layui  tinyMCE  SUI Mobile