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 为 Wangren 系统中的前端框架模块,以 Layui(版本号v2.5.6)为基础,与 Wangren 系统中其他模块进行了深度整合和二次开发,并在 Layui 的基础上进行了多处升级和优化,二次开发和整合后的 wui 已经不能直接按照 Layui 官方进行升级,所以在此进行相关文档的备份和展示,后续随着 Layui 官方和 Wangren 系统持续升级,WUI 也会持续进行升级和发布。
wui 兼容人类正在使用的全部浏览器(IE6/7除外),可作为 PC 端后台系统与前台界面的速成开发方案。
你可以在我们的 官网下载页面 下载到 wui 的最新版,它经过了自动化构建,更适合用于生产环境。目录结构如下:
  ├─css //css目录
  │  └─modules    //模块css目录
  │     ├─wdate
  │     ├─layer
  │     ├─ ...
  │     └─code.css
  ├─font          //字体图标目录
  ├─images        //图片资源目录(目前只有编辑器用到的GIF表情)
  │─library       //模块核心目录
  │  └─modules    //各模块组件
  │─wui.css       //核心样式文件
  └─wui.js        //基础核心库

获得 wui 后,将其完整地部署到你的项目目录(或静态资源服务器),你只需要引入下述两个文件:

./wui/wui.css
./wui/wui.js

没错,不用去管其它任何文件。因为他们(比如各模块)都是在最终使用的时候才会自动加载。这是一个基本的入门页面:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>开始使用wui</title>
  <link rel="stylesheet" href="../wui/wui.css">
</head>
<body>

<!-- 你的HTML代码 -->

<script src="../wui/wui.js"></script>
<script>
//一般直接写在一个js文件中
wui.use(['layer', 'form'], function(){
  var layer = wui.layer
  ,form = wui.form;

  layer.msg('Hello World');
});
</script>
</body>
</html>

wui 定义为「经典模块化」,并非是自吹她自身有多优秀,而是有意避开当下 JS 社区的主流方案,试图以尽可能简单的方式去诠释高效!她的所谓经典,是在于对返璞归真的执念,她以当前浏览器普通认可的方式去组织模块!我们认为,这恰是符合当下国内绝大多数程序员从旧时代过渡到未来新标准的最佳指引。所以 wui 本身也并不是完全遵循于AMD时代,准确地说,她试图建立自己的模式,所以你会看到:

//wui模块的定义
wui.define([mods], function(exports){

  //……
  
  exports('mod', api);
});

//wui模块的使用
wui.use(['mod1', 'mod2'], function(args){
  var mod = wui.mod1;

  //……

});

没错,她具备早前 AMD 的影子,又并非受限于 CommonJS 的那些条条框框,wui 认为这种轻量的组织方式,比WebPack更符合绝大多数场景。所以她坚持采用经典模块化,也正是能让人避开工具的复杂配置,回归简单,安静高效地编织原生态的 HTML / CSS / JavaScript。

但是 wui 又并非是 RequireJS 那样的模块加载器,而是一款 UI 解决方案,与 BootStrap 的不同又在于:wui 糅合了自身对经典模块化的理解。

我们推荐你遵循 wui 的模块规范建立一个入口文件,并通过 wui.use() 方式来加载该入口文件,如下所示:

<script>
wui.config({
  base: '/res/js/modules/' //你存放新模块的目录,注意,不是wui的模块目录
}).use('index'); //加载入口
</script>

上述的 index 即为你 /res/js/modules/ 目录下的 index.js,它的内容应该如下:

/**
  项目JS主入口
  以依赖wui的layer和form模块为例
**/
wui.define(['layer', 'form'], function(exports){
  var layer = wui.layer
  ,form = wui.form;

  layer.msg('Hello World');

  exports('index', {}); //注意,这里是模块输出的核心,模块名必须和use时的模块名一致
});
© 2021 Wangren.Net  Layui  tinyMCE  SUI Mobile