Amaze UI

OffCanvas


侧滑插件。实际使用案例参见菜单组件演示一演示二

基础用法

侧边栏弹出内容,可自定义。

Copy
<!-- 链接触发器, href 属性为目标元素 ID -->
<button class="am-btn am-btn-primary" data-am-offcanvas="{target: '#doc-oc-demo1'}">点击显示侧边栏</button>

<!-- 侧边栏内容 -->
<div id="doc-oc-demo1" class="am-offcanvas">
  <div class="am-offcanvas-bar">
    <div class="am-offcanvas-content">
      <p>
        侧边栏弹出内容,可自定义。
      </p>
    </div>
  </div>
</div>

该组件由触发器和侧滑元素两部分组成。触发器上添加 data-am-offcanvas 属性,侧滑元素使用固定的 HTML 结构。

在线运行

Push 效果

侧边栏弹出内容,可自定义。

Copy
<!-- 按钮触发器, 需要指定 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>
        侧边栏弹出内容,可自定义。
      </p>
    </div>
  </div>
</div>

设置 effect: 'push'

在线运行

右侧显示

侧边栏弹出内容,可自定义。

...
Copy
<!-- 按钮触发器, 需要指定 target -->
<button class="am-btn am-btn-primary" 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>
        侧边栏弹出内容,可自定义。
      </p>
    </div>
  </div>
</div>

<div id="my-id" class="am-offcanvas">
    <div class="am-offcanvas-bar am-offcanvas-bar-flip">...</div>
</div>

边栏默认显示在左侧,在内容容器上添加 .am-offcanvas-bar-flip class 调整为右侧。

在线运行

调用方式

按照以下结构组织好侧栏内容:

<div id="your-id" class="am-offcanvas">
  <div class="am-offcanvas-bar">
    <!-- 你的内容 -->
  </div>
</div>

通过 Data API

在要触发侧栏的元素上添加 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

通过 JS

组织好 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关闭边栏时立即触发

JS 控制示例

侧边栏弹出内容,可自定义。

Copy
<!-- 侧边栏内容 -->
<div id="my-offcanvas" class="am-offcanvas">
  <div class="am-offcanvas-bar">
    <div class="am-offcanvas-content">
      <p>
        侧边栏弹出内容,可自定义。
      </p>
    </div>
  </div>
</div>

<button class="am-btn am-btn-primary doc-oc-js" data-rel="open">打开侧边栏</button>
<button class="am-btn am-btn-primary doc-oc-js" data-rel="close">关闭侧边栏</button>

<script>
  $(function() {
    var id = '#my-offcanvas';
    var $myOc = $(id);
    $('.doc-oc-js').on('click', function() {
      $myOc.offCanvas($(this).data('rel'));
    });

    $myOc.on('open.offcanvas.amui', function() {
      console.log(id + ' 打开了。');
    }).on('close.offcanvas.amui', function() {
      console.log(id + ' 关闭了。');
    });
  });
</script>

下面的示例演示了使用 JS 打开/关闭侧边栏。侧边栏打开以后,关闭按钮无法点击到,可以在控制台输入以下代码模拟点击事件:

$('[data-rel="close"]').click();

在线运行