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
Tab选项卡 - 页面元素

导航菜单可应用于头部和侧边,Tab选项卡提供多套风格,支持响应式,支持删除选项卡等功能。面包屑结构简单,支持自定义分隔符。
依赖加载组件:element (请注意:必须加载element模块,相关功能才能正常使用,详见:内置组件 - 常用元素操作)
Tab广泛应用于Web页面,因此我们也对其进行了良好的支持。wui内置多种Tab风格,支持删除选项卡、并提供响应式支持。
这是一个最基本的例子:
  • 网站设置
  • 用户管理
  • 权限分配
  • 商品管理
  • 订单管理
如果需要对Tab进行外部新增、删除、切换等操作,请移步到“内置组件-常用元素操作”页面中查阅:基础方法
内容2
内容3
内容4
内容5
<div class="wui-tab">
  <ul class="wui-tab-title">
    <li class="wui-this">网站设置</li>
    <li>用户管理</li>
    <li>权限分配</li>
    <li>商品管理</li>
    <li>订单管理</li>
  </ul>
  <div class="wui-tab-content">
    <div class="wui-tab-item wui-show">内容1</div>
    <div class="wui-tab-item">内容2</div>
    <div class="wui-tab-item">内容3</div>
    <div class="wui-tab-item">内容4</div>
    <div class="wui-tab-item">内容5</div>
  </div>
</div>

<script>
//注意:选项卡 依赖 element 模块,否则无法进行功能性操作
wui.use('element', function(){
  var element = wui.element;

  //…
});
</script>
  • 网站设置
  • 用户管理
  • 权限分配
  • 商品管理
  • 订单管理
<div class="wui-tab wui-tab-brief" w-filter="docDemoTabBrief" style="margin: 0 0 20px;">
    <ul class="wui-tab-title">
        <li class="wui-this">网站设置</li>
        <li>用户管理</li>
        <li>权限分配</li>
        <li>商品管理</li>
        <li>订单管理</li>
    </ul>
</div>
通过追加 class:wui-tab-brief 来设定简洁风格。 值得注意的是,如果存在 wui-tab-item 的内容区域,在切换时自动定位到对应内容。如果不存在内容区域,则不会定位到对应内容。你通常需要设置过滤器,通过 element 模块的监听 tab 事件来进行切换操作。详见文档左侧【内置组件 - 基本元素操作 element】
  • 网站设置
  • 用户管理
  • 权限分配
  • 商品管理
  • 订单管理
1
2
3
4
5
6
<div class="wui-tab wui-tab-card">
  <ul class="wui-tab-title">
    <li class="wui-this">网站设置</li>
    <li>用户管理</li>
    <li>权限分配</li>
    <li>商品管理</li>
    <li>订单管理</li>
  </ul>
  <div class="wui-tab-content" style="height: 100px;">
    <div class="wui-tab-item wui-show">1</div>
    <div class="wui-tab-item">2</div>
    <div class="wui-tab-item">3</div>
    <div class="wui-tab-item">4</div>
    <div class="wui-tab-item">5</div>
    <div class="wui-tab-item">6</div>
  </div>
</div>
通过追加class:wui-tab-card来设定卡片风格
当容器的宽度不足以显示全部的选项时,即会自动出现展开图标,如下以卡片风格为例(注意:所有Tab风格都支持响应式):
  • 网站设置
  • 用户管理
  • 权限分配
  • 商品管理
  • 订单管理
1
2
3
4
5
6
你可以对父层容器设置属性 w-allowClose="true" 来允许Tab选项卡被删除
  • 网站设置
  • 用户基本管理
  • 权限分配
  • 全部历史商品管理文字长一点试试
  • 订单管理
1
2
3
4
5
6
<div class="wui-tab" w-allowClose="true">
  <ul class="wui-tab-title">
    <li class="wui-this">网站设置</li>
    <li>用户基本管理</li>
    <li>权限分配</li>
    <li>全部历史商品管理文字长一点试试</li>
    <li>订单管理</li>
  </ul>
  <div class="wui-tab-content">
    <div class="wui-tab-item wui-show">1</div>
    <div class="wui-tab-item">2</div>
    <div class="wui-tab-item">3</div>
    <div class="wui-tab-item">4</div>
    <div class="wui-tab-item">5</div>
    <div class="wui-tab-item">6</div>
  </div>
</div>
与默认相比没有什么特别的结构,就是多了个属性 w-allowClose="true"
  • 网站设置
  • 用户管理
  • 权限分配
  • 商品管理
  • 订单管理
内容1
内容2
内容3
内容4
内容5
<div class="wui-tab" w-filter="demo" w-allowclose="true">
    <ul class="wui-tab-title">
        <li class="wui-this" w-id="11">网站设置</li>
        <li w-id="22">用户管理</li>
        <li w-id="33">权限分配</li>
        <li w-id="44">商品管理</li>
        <li w-id="55">订单管理</li>
    </ul>
    <div class="wui-tab-content">
        <div class="wui-tab-item wui-show">内容1</div>
        <div class="wui-tab-item">内容2</div>
        <div class="wui-tab-item">内容3</div>
        <div class="wui-tab-item">内容4</div>
        <div class="wui-tab-item">内容5</div>
    </div>
</div>
<div class="site-demo-button" style="margin-bottom: 0;">
    <button class="wui-btn site-demo-active" data-type="tabAdd">新增Tab项</button>
    <button class="wui-btn site-demo-active" data-type="tabDelete">删除:商品管理</button>
    <button class="wui-btn site-demo-active" data-type="tabChange">切换到:用户管理</button>
</div>
<script type="text/javascript">
    wui.use('element', function(){
        var $ = wui.jquery
                ,element = wui.element; //Tab的切换功能,切换事件监听等,需要依赖element模块

        //触发事件
        var active = {
            tabAdd: function(){
                //新增一个Tab项
                element.tabAdd('demo', {
                    title: '新选项'+ (Math.random()*1000|0) //用于演示
                    ,content: '内容'+ (Math.random()*1000|0)
                    ,id: new Date().getTime() //实际使用一般是规定好的id,这里以时间戳模拟下
                })
            }
            ,tabDelete: function(othis){
                //删除指定Tab项
                element.tabDelete('demo', '44'); //删除:“商品管理”


                othis.addClass('wui-btn-disabled');
            }
            ,tabChange: function(){
                //切换到指定Tab项
                element.tabChange('demo', '22'); //切换到:用户管理
            }
        };

        $('.site-demo-active').on('click', function(){
            var othis = $(this), type = othis.data('type');
            active[type] ? active[type].call(this, othis) : '';
        });
    });
</script>
你可以通过对选项卡设置属性 w-id="xxx" 来作为唯一的匹配索引,以用于外部的定位切换,如后台的左侧导航、以及页面地址 hash 的匹配。
<div class="wui-tab" w-filter="test1">
  <ul class="wui-tab-title">
    <li class="wui-this" w-id="111" >文章列表</li>
    <li w-id="222">发送信息</li>
    <li w-id="333">权限分配</li>
    <li w-id="444">审核</li>
    <li w-id="555">订单管理</li>
  </ul>
  <div class="wui-tab-content">
    <div class="wui-tab-item wui-show">1</div>
    <div class="wui-tab-item">2</div>
    <div class="wui-tab-item">3</div>
    <div class="wui-tab-item">4</div>
    <div class="wui-tab-item">5</div>
  </div>
</div>
属性 w-id 是扮演这项功能的主要角色,它是动态操作的重要凭据,如:
<script>
wui.use('element', function(){
  var element = wui.element;

  //获取hash来切换选项卡,假设当前地址的hash为w-id对应的值
  var layid = location.hash.replace(/^#test1=/, '');
  element.tabChange('test1', layid); //假设当前地址为:http://a.com#test1=222,那么选项卡会自动切换到“发送消息”这一项

  //监听Tab切换,以改变地址hash值
  element.on('tab(test1)', function(){
    location.hash = 'test1='+ this.getAttribute('w-id');
  });
});
</script>
同样的还有增加选项卡和删除选项卡,都需要用到 w-id,更多动态操作请阅读:element 模块
无论是导航、还是 Tab,都需依赖 element 模块,大部分行为都是在加载完该模块后自动完成的,但一些交互操作,如 Tab 事件监听等,需按照场景选择性使用。你可以移步 element 模块 了解详情
© 2021 Wangren.Net  Layui  tinyMCE  SUI Mobile