在微信上关注我们
该组件由触发器和侧滑元素两部分组成。触发器上添加 data-am-offcanvas 属性，侧滑元素使用固定的 HTML 结构。
<!-- 链接触发器， href 属性为目标元素 ID -->
<a href="#doc-oc-demo1" data-am-offcanvas>点击显示侧边栏</a>
<!-- 侧边栏内容 -->
<div id="doc-oc-demo1" class="am-offcanvas">
<div class="am-offcanvas-bar">
<div class="am-offcanvas-content">
<p>
我不愿让你一个人 <br/>
承受这世界的残忍 <br/>
我不愿眼泪陪你到 永恒
</p>
</div>
</div>
</div>
设置 effect: 'push'。
<!-- 按钮触发器， 需要指定 target -->
<button class="am-btn am-btn-primary" data-am-offcanvas="{target: '#doc-oc-demo2', effect: 'push'}">点击显示侧边栏</button>
<!-- 侧边栏内容 -->
<div id="doc-oc-demo2" class="am-offcanvas">
<div class="am-offcanvas-bar">
<div class="am-offcanvas-content">
<p>
我不愿让你一个人 <br/>
承受这世界的残忍 <br/>
我不愿眼泪陪你到 永恒
</p>
</div>
</div>
</div>
边栏默认显示在左侧，在内容容器上添加 .am-offcanvas-bar-flip class 调整为右侧。
<!-- 按钮触发器， 需要指定 target -->
<button class="am-btn am-btn-success" data-am-offcanvas="{target: '#doc-oc-demo3'}">右侧显示边栏</button>
<!-- 侧边栏内容 -->
<div id="doc-oc-demo3" class="am-offcanvas">
<div class="am-offcanvas-bar am-offcanvas-bar-flip">
<div class="am-offcanvas-content">
<p>
我不愿让你一个人 <br/>
承受这世界的残忍 <br/>
我不愿眼泪陪你到 永恒 <br/>
</p>
<p><a href="http://music.163.com/#/song?id=385554" target="_blank">网易音乐</a> </p>
</div>
</div>
</div>
<div id="my-id" class="am-offcanvas">
<div class="am-offcanvas-bar am-offcanvas-bar-flip">...</div>
</div>
首先，按照以下结构组织好侧栏内容：
<div id="your-id" class="am-offcanvas">
<div class="am-offcanvas-bar">
<!-- 你的内容 -->
</div>
</div>
在要触发侧栏的元素上添加 data-am-offcanvas 属性：
<a> 元素，则把 href 的值设置为边栏的 ID：href="#your-id"；data-am-offcanvas 的值里面指定侧边栏 ID：<button data-am-offcanvas="{target: '#your-id'}"></button>
| 属性 | 描述 |
|---|---|
{target: '#your-id'} | 指定侧边栏，如果是 a 元素则写在 href 里 |
{effect: 'push'} | 边栏动画效果，可选的值为 overlay | push 默认为 overlay |
组织好 OffCanvas HTML 以后，可以通过 Javascript 调用。
$('#my-offcanvas').offCanvas(options);
注意： 这里 #my-offcanvas 直接指向侧边栏元素，而不是触发器。
options.effect，值为 overlay | push，默认为 overlay。$('#my-offcanvas').offCanvas({effect: 'push'});
通过 $().offCanvas(options) 设置，参数同上。
$().offCanvas(options) - 设置边栏参数并打开边栏$().offCanvas('open') - 打开边栏$().offCanvas('close') - 关闭边栏| 事件名称 | 描述 |
|---|---|
open:offcanvas:amui | 打开边栏时立即触发 |
close:offcanvas:amui | 关闭边栏时立即触发 |
