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
导航相关 - 页面元素

导航一般指页面引导性频道集合,多以菜单的形式呈现,可应用于头部和侧边,是整个网页画龙点晴般的存在。面包屑结构简单,支持自定义分隔符。千万不要忘了加载 element 模块。虽然大部分行为都是在加载完该模块后自动完成的,但一些交互操作,如呼出二级菜单等,需借助element模块才能使用。你可以移步文档左侧【内置模块 - 常用元素操作 element】了解详情
依赖加载模块:element
<ul class="wui-nav" w-filter="">
  <li class="wui-nav-item"><a href="">最新活动</a></li>
  <li class="wui-nav-item wui-this"><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>
  <li class="wui-nav-item"><a href="">社区</a></li>
</ul>

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

  //…
});
</script>
设定 wui-this 来指向当前页面分类。 除了一般的文字导航,我们还内置了图片和徽章的支持,如:
<ul class="wui-nav">
  <li class="wui-nav-item">
    <a href="">控制台<span class="wui-badge">9</span></a>
  </li>
  <li class="wui-nav-item">
    <a href="">个人中心<span class="wui-badge-dot"></span></a>
  </li>
  <li class="wui-nav-item">
    <a href=""><img src="//t.cn/EaDvz2N" class="wui-nav-img">我</a>
    <dl class="wui-nav-child">
      <dd><a href="javascript:;">修改信息</a></dd>
      <dd><a href="javascript:;">安全管理</a></dd>
      <dd><a href="javascript:;">退了</a></dd>
    </dl>
  </li>
</ul>
是否瞬间上了个档次呢?


通过对导航追加CSS背景类,让导航呈现不同的主题色
//如定义一个墨绿背景色的导航
<ul class="wui-nav wui-bg-green" w-filter="">
  …
</ul> 
水平导航支持的其它背景主题有:wui-bg-cyan(藏青)、wui-bg-green(墨绿)、wui-bg-blue(艳蓝)
垂直导航支持的其它背景主题有:wui-bg-cyan(藏青)

<ul class="wui-nav wui-nav-tree" w-filter="test">
<!-- 侧边导航: <ul class="wui-nav wui-nav-tree wui-nav-side"> -->
  <li class="wui-nav-item wui-nav-itemed">
    <a href="javascript:;">默认展开</a>
    <dl class="wui-nav-child">
      <dd><a href="javascript:;">选项1</a></dd>
      <dd><a href="javascript:;">选项2</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="">移动模块</a></dd>
      <dd><a href="">后台模版</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>
水平、垂直、侧边三个导航的HTML结构是完全一样的,不同的是:
垂直导航需要追加 class:wui-nav-tree
侧边导航需要追加 class:wui-nav-tree wui-nav-side
对导航元素结构设定可选属性,可让导航菜单项达到不同效果。目前支持的属性如下:
属性名 可选值 备注
w-shrink 空值(默认)不收缩兄弟菜单子菜单
all 收缩全部兄弟菜单子菜单
展开子菜单时,是否收缩兄弟节点已展开的子菜单,
如: <ul class="wui-nav wui-nav-tree" w-shrink="all"> … </ul>
w-unselect 无需填值 点击指定导航菜单时,不会出现选中效果,
如: <li class="wui-nav-item" w-unselect>刷新</li>
首页 国际新闻 亚太地区 正文
<span class="wui-breadcrumb">
  <a href="">首页</a>
  <a href="">国际新闻</a>
  <a href="">亚太地区</a>
  <a><cite>正文</cite></a>
</span>
你还可以通过设置属性 w-separator="-" 来自定义分隔符。如:
首页 国际新闻 亚太地区 正文
<span class="wui-breadcrumb" w-separator="-">
  <a href="">首页</a>
  <a href="">国际新闻</a>
  <a href="">亚太地区</a>
  <a><cite>正文</cite></a>
</span>
当然,你还可以作为小导航来用,如:
娱乐 八卦 体育 搞笑 视频 游戏 综艺
<span class="wui-breadcrumb" w-separator="|">
  <a href="">娱乐</a>
  <a href="">八卦</a>
  <a href="">体育</a>
  <a href="">搞笑</a>
  <a href="">视频</a>
  <a href="">游戏</a>
  <a href="">综艺</a>
</span>
© 2021 Wangren.Net  Layui  tinyMCE  SUI Mobile