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 会对 select、checkbox、radio 等原始元素隐藏,从而进行美化修饰处理。但这需要依赖于 form 组件,所以你必须加载 form,并且执行一个实例。#详见说明

wui.use('form', function(){
  var form = wui.form; //只有执行了这一步,部分表单元素才会自动修饰成功

  //……

  //但是,如果你的HTML是动态生成的,自动渲染就会失效
  //因此你需要在相应的地方,执行下述方法来进行渲染
  form.render();
});

同理的还有 element 模块

即便我们也希望尽可能多的内置字体图标,但因为文件大小或者可能对大部分不适用,所以,当你使用wui时,可能会出现内置图标不够用的情况。下面我们用最简单的方法教大家扩展自己的图标库:

首先,您需要有自己的图标库,您可以直接去 图标库网站https://www.iconfont.cn/ 下载

然后,将您自己下载的图标库相关CSS及图标文件放在 /static/wui/icon 目录下,iocn 目录自己那建的哦 :)

打开 /static/wui/wui.css 文件,在其最底部添加一行:

@import "icon/iconfont.css";

至此,大功告成,您可以开始使用您自己新加的图标啦!

注意:您自己添加的图标库因为和 wui 里面的 Class 命名不一样,调用时需要注意哦,如

//wui 调用方式


//新图标库调用方式

© 2021 Wangren.Net  Layui  tinyMCE  SUI Mobile