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 中,我们加入了强劲的栅格系统和后台布局方案,这意味着你终于可以着手采用 wui 排版你的响应式网站和后台系统了。wui 的栅格系统采用业界比较常见的 12 等分规则,内置移动设备、平板、桌面中等和大型屏幕的多终端适配处理,最低能支持到ie8。而你应当更欣喜的是,wui 还开放了经典的后台布局方案,快速搭建一个属于你的后台系统将变得十分轻松自如。
在 wui 中,我们提供了一个容器元素,它能方便的定义一个全屏或定宽的布局集合,对于一些有需求的页面搭建非常适用。
类型 样式名 备注
全屏容器 wui-main 定义一个宽度为100%的容器
定宽容器 wui-main-768
wui-main-960
wui-main-980
wui-main-1190
wui-main-1210
内置 5 种常见页面的宽度,分别对应宽度为 768px、960px、980px、1190px、1210px
//这是一个面分之百宽的容器
//这个容器宽度为 980px ,不信你试试!
全屏容器 和 定宽容器 还可以嵌套使用,用于实现类似于网站导航等一些特殊结构及浏览器适配,如:
两端灰色部分会随浏览器大小自动变化(这里的示例已是在一个定宽元素内,宽度也会是表现出固定宽度)
但里面的藏青部分是永远固定宽度的。
在一个全屏容器中嵌套一个宽度为 980px 的定宽容器。
为了丰富网页布局,简化 HTML/CSS 代码的耦合,并提升多终端的适配能力,wui 引进了自己的一套具备响应式能力的栅格系统。我们将容器进行了 12 等分,预设了 4*12 种 CSS 排列类,它们在移动设备、平板、桌面中/大尺寸四种不同的屏幕下发挥着各自的作用。
1 采用 wui-row 来定义行,如:<div class="wui-row"></div>
2 采用类似 wui-col-xs* 这样的预设类来定义一组列(column),且放在行(row)内。其中:
变量 xs 代表的是不同屏幕下的标记(可选值见下文)
变量 * 代表的是该列所占用的12等分数(如6/12),可选值为 1 - 12
如果多个列的“等分数值”总和等于12,则刚好满行排列。如果大于12,多余的列将自动另起一行。
3 列可以同时出现最多四种不同的组合,分别是:xs(超小屏幕,如手机)、sm(小屏幕,如平板)、md(桌面中等屏幕)、lg(桌面大型屏幕),以呈现更加动态灵活的布局。
4 可对列追加类似 wui-col-space5、 wui-col-xs-offset3 这样的预设类来定义列的间距和偏移。
5 最后,在列(column)元素中放入你自己的任意元素填充内容,完成布局!
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
... ...
1/12
你的内容 9/12
你的内容 3/12
以上为常规布局(以中型屏幕桌面为例)
移动:6/12 | 平板:6/12 | 桌面:4/12
移动:6/12 | 平板:6/12 | 桌面:4/12
移动:4/12 | 平板:12/12 | 桌面:4/12
移动:4/12 | 平板:7/12 | 桌面:8/12
移动:4/12 | 平板:5/12 | 桌面:4/12
以上为移动设备、平板、桌面端的不同表现
你的内容 9/12
你的内容 3/12
移动:6/12 | 平板:6/12 | 桌面:4/12
移动:6/12 | 平板:6/12 | 桌面:4/12
移动:4/12 | 平板:12/12 | 桌面:4/12
移动:4/12 | 平板:7/12 | 桌面:8/12
移动:4/12 | 平板:5/12 | 桌面:4/12
栅格的响应式能力,得益于CSS3媒体查询(Media Queries)的强力支持,从而针对四类不同尺寸的屏幕,进行相应的适配处理
超小屏幕
(手机<786px)
小屏幕
(平板≥786px)
中等屏幕
(桌面≥982px)
大型屏幕
(桌面≥1220px)
.wui-container 的值 auto 768px 960px 1190px
标记 xs sm md lg
列对应类
* 为1-12的等分数值
wui-col-xs* wui-col-sm* wui-col-md* wui-col-lg*
总列数 12
响应行为 始终按设定的比例水平排列 在当前屏幕下水平排列,如果屏幕大小低于临界值则堆叠排列
类名(class) 说明
wui-show-*-block 定义不同设备下的 display: block; * 可选值有:xs、sm、md、lg
wui-show-*-inline 定义不同设备下的 display: inline; * 可选值同上
wui-show-*-inline-block 定义不同设备下的 display: inline-block; * 可选值同上
wui-hide-* 定义不同设备下的隐藏类,即: display: none; * 可选值同上
将栅格放入一个带有 class="wui-container" 的特定的容器中,以便在小屏幕以上的设备中固定宽度,让列可控。
……
当然,你还可以不固定容器宽度。将栅格或其它元素放入一个带有 class="wui-fluid" 的容器中,那么宽度将不会固定,而是 100% 适应
……
通过“列间距”的预设类,来设定列之间的间距。且一行中最左的列不会出现左边距,最右的列不会出现右边距。列间距在保证排版美观的同时,还可以进一步保证分列的宽度精细程度。我们结合网页常用的边距,预设了 12 种不同尺寸的边距,分别是:
wui-col-space1
wui-col-space2
wui-col-space4
wui-col-space5
wui-col-space6
wui-col-space8
wui-col-space10
wui-col-space12
wui-col-space14
wui-col-space15
wui-col-space16
wui-col-space18
wui-col-space20
wui-col-space22
wui-col-space24
wui-col-space25
wui-col-space26
wui-col-space28
wui-col-space30
支持列之间为 1px-30px 区间的所有双数间隔,以及 1px、5px、15px、25px 的单数间隔
下面是一个简单的例子,列间距为10px:
4/12
4/12
4/12
4/12
4/12
4/12
如果需要的间距高于30px(一般不常见),请采用偏移,下文继续讲解 对列追加 类似 wui-col-xs-offset* 的预设类,从而让列向右偏移。其中 * 号代表的是偏移占据的列数,可选中为 1 - 12。
如:wui-col-xs-offset3,即代表在“中型桌面屏幕”下,让该列向右偏移 3 个列宽度
类名 说明
wui-col-#-offset* # 可选值有:xs、sm、md、lg,作用为哪种屏幕尺寸下偏移;
* 为 xs 时可选值为 1 ~ 12
   sm 时可选值为 1 ~ 12
   md 时可选值为 1 ~ 12
   lg  时可选值为 1 ~ 12
下面是两个采用「列偏移」的实例
4/12
4/12
3/12 右偏移1格
4/12 右偏移2格
4/12
4/12
4/12
3/12 右偏移1格
4/12 右偏移2格
4/12
请注意,列偏移可针对不同屏幕的标准进行设定。 理论上,你可以对栅格进行无穷层次的嵌套,这更加增强了栅格的表现能力。而嵌套的使用非常简单。在列元素(wui-col-xs*)中插入一个行元素(wui-row),即可完成嵌套。下面是一个简单的例子:
4/12
4/12
4/12
4/12
4/12
4/12
事实上IE8和IE9并不支持媒体查询(Media Queries),但你可以使用下面的补丁完美兼容!该补丁来自于开源社区:
<!-- 让IE8/9支持媒体查询,从而兼容栅格 -->
<!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
将上述代码放入你页面 标签内的任意位置 wui 之所以赢得如此多人的青睐,更多是在于它前后台系统通吃的能力。既可编织出绚丽的前台页面,又可满足繁杂的后台功能需求。wui 致力于让每一位开发者都能轻松搭建自己的后台。下面是 wui 提供的一个现场的方案,你可以前往示例页面,预览后台布局效果
<!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.css">
</head>
<body class="wui-layout-body">
<div class="wui-layout wui-layout-admin">
    <div class="wui-header">
        <div class="wui-logo">wui 后台布局</div>
        <!-- 头部区域(可配合wui已有的水平导航) -->
        <ul class="wui-nav wui-layout-left">
            <li class="wui-nav-item"><a href="">控制台</a></li>
            <li class="wui-nav-item"><a href="">商品管理</a></li>
            <li class="wui-nav-item"><a href="">用户</a></li>
            <li class="wui-nav-item">
                <a href="javascript:;">其它系统</a>
                <dl class="wui-nav-child">
                    <dd><a href="">邮件管理</a></dd>
                    <dd><a href="">消息管理</a></dd>
                    <dd><a href="">授权管理</a></dd>
                </dl>
            </li>
        </ul>
        <ul class="wui-nav wui-layout-right">
            <li class="wui-nav-item">
                <a href="javascript:;">
                    <img src="http://t.cn/EaDvz2N" class="wui-nav-img">
                    admin
                </a>
                <dl class="wui-nav-child">
                    <dd><a href="">基本资料</a></dd>
                    <dd><a href="">安全设置</a></dd>
                </dl>
            </li>
            <li class="wui-nav-item"><a href="">退了</a></li>
        </ul>
    </div>

    <div class="wui-side wui-bg-black">
        <div class="wui-side-scroll">
            <!-- 左侧导航区域(可配合wui已有的垂直导航) -->
            <ul class="wui-nav wui-nav-tree"  w-filter="test">
                <li class="wui-nav-item wui-nav-itemed">
                    <a class="" href="javascript:;">所有商品</a>
                    <dl class="wui-nav-child">
                        <dd><a href="javascript:;">列表一</a></dd>
                        <dd><a href="javascript:;">列表二</a></dd>
                        <dd><a href="javascript:;">列表三</a></dd>
                        <dd><a href="">超链接</a></dd>
                    </dl>
                </li>
                <li class="wui-nav-item">
                    <a href="javascript:;">解决方案</a>
                    <dl class="wui-nav-child">
                        <dd><a href="javascript:;">列表一</a></dd>
                        <dd><a href="javascript:;">列表二</a></dd>
                        <dd><a href="">超链接</a></dd>
                    </dl>
                </li>
                <li class="wui-nav-item"><a href="">云市场</a></li>
                <li class="wui-nav-item"><a href="">发布商品</a></li>
            </ul>
        </div>
    </div>

    <div class="wui-body">
        <!-- 内容主体区域 -->
        <div style="padding: 15px;">内容主体区域</div>
    </div>

    <div class="wui-footer">
        <!-- 底部固定区域 -->
        (c) wui.com - 底部固定区域
    </div>
</div>
<script src="../wui.js"></script>
<script>
    //JavaScript代码区域
    wui.use('element', function(){
        var element = wui.element;

    });
</script>
</body>
</html>
© 2021 Wangren.Net  Layui  tinyMCE  SUI Mobile