显示/隐藏
显示与隐藏
用来显示或隐藏的内容
<a class="btn primary" data-display data-target="#taget1" data-trigger-method="toggle">显示与隐藏</a>
<div class="red box fade in" id="taget1">用来显示或隐藏的内容</div>
弹出面板
<a class="btn primary outline" data-display data-backdrop="clean" data-target="!new" data-trigger-method="toggle" data-arrow="true" data-content="Hello" data-placement="beside-top" data-template="<div class='layer has-padding'>{0}</div>">显示弹出面板</a>
内置插件 popover
<a class="btn primary outline" data-display="popover" data-content="Hello">显示弹出面板</a>
左侧滑动菜单
<a class="btn primary outline" data-display data-backdrop="true" data-target="#target2" data-trigger-method="toggle" data-placement="left"><i class="icon-bars"></i> &nbsp;菜单</a>
<div id="target2" class="layer hidden affix dock-left" style="min-width: 10rem">
  <div class="list with-divider">
    <a class="item"><i class="muted icon-home"></i>&nbsp; 首页</a>
    <a class="item"><i class="muted icon-folder-close"></i>&nbsp; 项目</a>
    <a class="item"><i class="muted icon-bug"></i>&nbsp; BUG</a>
  </div>
</div>
覆盖层
<a class="btn primary outline" data-display data-backdrop="clean" data-target="!new" data-target-dismiss="true" data-content="用于覆盖层内容" data-placement="overlay" data-target-class="layer red has-padding" style="width: 10rem; height: 5rem">打开覆盖层</a>
下拉菜单
<a class="btn primary outline" data-display data-backdrop="clean" data-target="#target3" data-target-dismiss="true" data-placement="beside-bottom-start">打开下拉菜单</a>
<div id="target3" class="layer hidden">
  <div class="list" style="min-width: 10rem">
    <a class="item">确认</a>
    <a class="item">编辑</a>
    <a class="item">删除</a>
  </div>
</div>
内置插件 dropdown
<a class="btn primary outline" data-display="dropdown" data-placement="beside-bottom-start">打开下拉菜单</a>
<div class="list dropdown-menu">
  <a class="item">确认</a>
  <a class="item">编辑</a>
  <a class="item">删除</a>
</div>
漂浮消息
<a class="btn primary outline" data-display data-target-dismiss="true" data-auto-hide="5000" data-target="!new" data-animate="scale-suggest" data-content="Hello" data-placement="bottom-center" data-template="<div class='layer has-margin has-padding success'><i class='icon-check'></i> {0}</div>">显示漂浮消息</a>
内置插件 messager
<a data-display="messager" data-type="success" data-content="hello">显示漂浮消息</a>
// 或者使用 JavaScript 动态弹出漂浮消息
$.messager.show('消息内容', {type: 'success', placement: 'top'});
对话框
打开对话框
<a class="btn primary outline" data-display data-backdrop="true" data-target="#target4" data-placement="bottom">打开对话框</a>
<div id="target4" class="affix dock-bottom modal hidden">
  <div class="heading">
    <div class="title"><strong>对话框</strong></div>
    <nav class="nav"><a data-dismiss="display"><i class="icon-remove muted"></i></a></nav>
  </div>
  <div class="content article box">
    <p>这是对话框内容</p>
    <p>^_^....</p>
  </div>
</div>
内置插件 modal
<a data-display="modal" data-content="对话框内容">打开对话框</a>
远程对话框
<a class="btn primary outline" data-display data-backdrop="true" data-target="#target4" data-placement="bottom" data-remote="doc/part/remote-content-example.html" data-template="<div class='modal'>{0}</div>">打开远程对话框</a>
内置插件 modal
<a data-display="modal" data-remote="doc/part/remote-content-example.html">打开对话框</a>
加载远程内容
<div id="test" data-display data-trigger="false" data-target="!self" data-display-auto data-remote="doc/part/remote-content-example.html" data-name='test'>此处的内容将会被远程内容取代</div>
标签页
Tab1 内容
<nav class="nav" data-display data-selector="a" data-show-single="true" data-active-class="active">
  <a class="active" data-target="#tab1">标签1</a>
  <a data-target="#tab2">标签2</a>
  <a data-target="#tab3">标签3</a>
</nav>
<div>
  <div class="box primary in" id="tab1">Tab1 内容</div>
  <div class="box red hidden" id="tab2">Tab2 内容</div>
  <div class="box green hidden" id="tab3">Tab3 内容</div>
</div>
折叠
内置插件 collapse

内置插件折叠不支持动画选项,包括 animateduration

折叠一
折叠一 内容
折叠二
折叠二 内容
折叠三
折叠三 内容
<a class='btn primary-pale fluid' data-display="collapse" data-target="#target6" data-group=".group1">折叠一</a>
<div class="collapse group1" id="target6">
  <div class="box primary">折叠一 内容</div>
</div>
<a class='btn green-pale fluid' data-display="collapse" data-target="#target7" data-group=".group1">折叠二</a>
<div class="collapse group1" id="target7">
  <div class="box green">折叠二 内容</div>
</div>
<a class='btn red-pale fluid' data-display="collapse" data-target="#target8" data-group=".group1">折叠三</a>
<div class="collapse group1" id="target8">
  <div class="box red">折叠三 内容</div>
</div>