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
面板 - 页面元素

一般的面板通常是指一个独立的容器,而折叠面板则能有效地节省页面的可视面积,非常适合应用于:QA说明、帮助文档等
依赖加载模块:element
卡片面板
本面板外面的灰色边框是为了让大家看得更清楚
卡片面板本身是没有灰底色的哦!
卡片面板
这个卡片面板外面加了 wui 的栅格系统
可以轻松实现响应式布局哦!
<div class="wui-card">
    <div class="wui-card-header">卡片面板</div>
    <div class="wui-card-body">
        本面板外面的灰色边框是为了让大家看得更清楚<br>卡片面板本身是没有灰底色的哦!
    </div>
</div>
如果你的网页采用的是默认的白色背景,不建议使用卡片面板。

杜甫

杜甫的思想核心是儒家的仁政思想,他有“致君尧舜上,再使风俗淳”的宏伟抱负。杜甫虽然在世时名声并不显赫,但后来声名远播,对中国文学和日本文学都产生了深远的影响。杜甫共有约1500首诗歌被保留了下来,大多集于《杜工部集》。

李清照

李清照出生于书香门第,早期生活优裕,其父李格非藏书甚富,她小时候就在良好的家庭环境中打下文学基础。出嫁后与夫赵明诚共同致力于书画金石的搜集整理。金兵入据中原时,流寓南方,境遇孤苦。所作词,前期多写其悠闲生活,后期多悲叹身世,情调感伤。形式上善用白描手法,自辟途径,语言清丽。

鲁迅

鲁迅一生在文学创作、文学批评、思想研究、文学史研究、翻译、美术理论引进、基础科学介绍和古籍校勘与研究等多个领域具有重大贡献。他对于五四运动以后的中国社会思想文化发展具有重大影响,蜚声世界文坛,尤其在韩国、日本思想文化领域有极其重要的地位和影响,被誉为“二十世纪东亚文化地图上占最大领土的作家”。

通过对内容元素设置 class 为 wui-show 来选择性初始展开某一个面板,element 模块会自动呈现状态图标。
<div class="wui-collapse">
  <div class="wui-colla-item">
    <h2 class="wui-colla-title">杜甫</h2>
    <div class="wui-colla-content wui-show">内容区域</div>
  </div>
  <div class="wui-colla-item">
    <h2 class="wui-colla-title">李清照</h2>
    <div class="wui-colla-content">内容区域</div>
  </div>
  <div class="wui-colla-item">
    <h2 class="wui-colla-title">鲁迅</h2>
    <div class="wui-colla-content">内容区域</div>
  </div>
</div>

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

  //…
});
</script>

杜甫

杜甫的思想核心是儒家的仁政思想,他有“致君尧舜上,再使风俗淳”的宏伟抱负。杜甫虽然在世时名声并不显赫,但后来声名远播,对中国文学和日本文学都产生了深远的影响。杜甫共有约1500首诗歌被保留了下来,大多集于《杜工部集》。

李清照

李清照出生于书香门第,早期生活优裕,其父李格非藏书甚富,她小时候就在良好的家庭环境中打下文学基础。出嫁后与夫赵明诚共同致力于书画金石的搜集整理。金兵入据中原时,流寓南方,境遇孤苦。所作词,前期多写其悠闲生活,后期多悲叹身世,情调感伤。形式上善用白描手法,自辟途径,语言清丽。

鲁迅

鲁迅一生在文学创作、文学批评、思想研究、文学史研究、翻译、美术理论引进、基础科学介绍和古籍校勘与研究等多个领域具有重大贡献。他对于五四运动以后的中国社会思想文化发展具有重大影响,蜚声世界文坛,尤其在韩国、日本思想文化领域有极其重要的地位和影响,被誉为“二十世纪东亚文化地图上占最大领土的作家”。

在折叠面板的父容器设置属性 w-accordion 来开启手风琴,那么在进行折叠操作时,始终只会展现当前的面板。
<div class="wui-collapse" w-accordion>
  <div class="wui-colla-item">
    <h2 class="wui-colla-title">杜甫</h2>
    <div class="wui-colla-content wui-show">内容区域</div>
  </div>
  <div class="wui-colla-item">
    <h2 class="wui-colla-title">李清照</h2>
    <div class="wui-colla-content">内容区域</div>
  </div>
  <div class="wui-colla-item">
    <h2 class="wui-colla-title">鲁迅</h2>
    <div class="wui-colla-content">内容区域</div>
  </div>
</div>

杜甫

杜甫的思想核心是儒家的仁政思想,他有“致君尧舜上,再使风俗淳”的宏伟抱负。杜甫虽然在世时名声并不显赫,但后来声名远播,对中国文学和日本文学都产生了深远的影响。杜甫共有约1500首诗歌被保留了下来,大多集于《杜工部集》。

李清照

李清照出生于书香门第,早期生活优裕,其父李格非藏书甚富,她小时候就在良好的家庭环境中打下文学基础。出嫁后与夫赵明诚共同致力于书画金石的搜集整理。金兵入据中原时,流寓南方,境遇孤苦。所作词,前期多写其悠闲生活,后期多悲叹身世,情调感伤。形式上善用白描手法,自辟途径,语言清丽。

鲁迅

鲁迅一生在文学创作、文学批评、思想研究、文学史研究、翻译、美术理论引进、基础科学介绍和古籍校勘与研究等多个领域具有重大贡献。他对于五四运动以后的中国社会思想文化发展具有重大影响,蜚声世界文坛,尤其在韩国、日本思想文化领域有极其重要的地位和影响,被誉为“二十世纪东亚文化地图上占最大领土的作家”。

在需要启用事件监听的父容器设置属性 w-filter="xxx",那么在进行折叠操作时,可以进行折叠操作后的回调操作。
<div class="wui-collapse"  w-filter="test">
  <div class="wui-colla-item">
    <h2 class="wui-colla-title">杜甫</h2>
    <div class="wui-colla-content wui-show">内容区域</div>
  </div>
  <div class="wui-colla-item">
    <h2 class="wui-colla-title">李清照</h2>
    <div class="wui-colla-content wui-show">内容区域</div>
  </div>
  <div class="wui-colla-item">
    <h2 class="wui-colla-title">鲁迅</h2>
    <div class="wui-colla-content wui-show">内容区域</div>
  </div>
</div>

<script>
//注意:折叠面板 依赖 element 模块,否则无法进行功能性操作
wui.use(['element', 'layer'], function(){
  var element = wui.element,
    layer = wui.layer;

    //监听折叠
    element.on('collapse(test)', function(data){
        layer.msg('展开状态:'+ data.show);
    });

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