侧边栏 - SUI 移动开发UI库

返回介绍

侧边栏

发布于 2017-06-10 字数 4326 浏览 1285 评论 0

可以从左侧或者右侧滑出的面板。

使用侧栏

在任何元素上增加 .open-panel 类都可以使它能点击打开侧栏。如果有多个侧栏,你可以通过 data-panel='{panel的选择}'来指定具体打开哪一个侧栏

在任何元素上增加 .close-panel 类都可以使他点击关闭侧栏,因为侧栏只能同时打开一个,所以关闭的时候你不用指定是哪一个侧栏。

可以通过 .panel-left 或者 .panel-right 来指定侧栏是从左边还是右边出现。

可以通过 .panel-cover 或者 .panel-reveal 指定侧栏是覆盖在页面上还是推开页面。

配置

默认配置下,侧栏可以通过滑动手势打开,但是不能通过滑动手势关闭。

你可以通过 $.config.swipePanel$.config.swipePanelOnlyClose等参数来配置。具体配置请参见 初始化参数

<div class="page">
  <header class="bar bar-nav">
    <h1 class='title'>侧栏</h1>
  </header>
  <div class="content">
    <div class="content-block">
      <p><a href="#" class="button button-fill open-panel" data-panel='#panel-left-demo'>打开左侧栏</a></p>
    </div>
  </div>
</div>
<div class="panel-overlay"></div>
<!-- Left Panel with Reveal effect -->
<div class="panel panel-left panel-reveal theme-dark" id='panel-left-demo'>
  <div class="content-block">
    <p>这是一个侧栏</p>
    <p>你可以在这里放用户设置页面</p>
    <p><a href="#" class="close-panel">关闭</a></p>
  </div>
  <div class="list-block">
    <!-- .... -->
  </div>
</div>
<div class="panel panel-right panel-reveal">
  <div class="content-block">
    <p>这是一个侧栏</p>
    <!-- Click on link with "close-panel" class will close panel -->
    <p><a href="#" class="close-panel">关闭</a></p>
  </div>
</div>

使用侧栏的时候请注意,务必用 .page 容器把 .bar 和 .content 包裹起来。

使用JS操作侧栏

除了使用 .open-panel.close-panel之外。你可以直接调用 $.openPanel(panel)$.closePanel() 来打开和关闭侧栏

  • $.openPanel(panel): 打开一个指定的panel, 其中 panel 是你需要打开的panel,可以是选择器或者DOM或者Zepto对象。如果没有传panel参数则会自动打开第一个panel。返回bool值表示是否打开成功。
  • $.closePanel(): 关闭打开的panel。返回bool值表示是否关闭成功。
<div class="page">
  <header class="bar bar-nav">
    <h1 class='title'>侧栏</h1>
  </header>
  <div class="content">
    <div class="content-block">
      <p><a href="#" class="button button-fill my-btn">JS打开侧栏</a></p>
    </div>
  </div>
</div>
<div class="panel-overlay"></div>
<!-- Left Panel with Reveal effect -->
<div class="panel panel-right panel-cover theme-dark" id='panel-js-demo'>
  <div class="content-block">
    <p>我是从右边出现的</p>
    <p>并且我是覆盖在页面上而不是推开页面</p>
    <p></p>
    <!-- Click on link with "close-panel" class will close panel -->
    <p><a href="#" class="close-panel">关闭</a></p>
  </div>
</div>
<div class="panel panel-right panel-reveal">
  <div class="content-block">
    <p>这是一个侧栏</p>
    <!-- Click on link with "close-panel" class will close panel -->
    <p><a href="#" class="close-panel">关闭</a></p>
  </div>
</div>
$(document).on("click", ".my-btn", function() {
  $.openPanel("#panel-js-demo");
});

事件

侧栏打开或者关闭的时候,会在 .panel 上触发对应的事件。

事件 说明
open 打开动画开始之前触发。
opened 打开动画结束之后 触发。
close 关闭动画开始之前触发。
closed 关闭动画结束之后 触发。

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

支持 Markdown 语法,需要帮助?

目前还没有任何评论,快来抢沙发吧!