<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> 菜单</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> 首页</a>
<a class="item"><i class="muted icon-folder-close"></i> 项目</a>
<a class="item"><i class="muted icon-bug"></i> 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>
<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
内置插件折叠不支持动画选项,包括 animate
和 duration
。
<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>