侧栏

优质

小牛编辑

152浏览

2023-12-01

让我们看看如何添加侧栏。我们的APP可能包含两种侧栏,一个在左边,另一个在右边。我们应该在body的开始处添加侧栏的htmlbody:

<body>
    <!-- First, we need to add Panel's overlay that will overlays app while panel is opened -->
    <div class="panel-overlay"></div>
 
    <!-- Left panel -->
    <div class="panel panel-left">
        ... panel content goes here ...
    </div>
 
    <!-- Right panel -->
    <div class="panel panel-right">
        ... panel content goes here ...
    </div>
 
    ...
</body>

在我们添加侧栏后,我们需要为每个侧栏选择打开效果。可能有两种效果:"Reveal"(侧栏从整个App的内容中移出)和"Cover"(侧栏覆盖App的内容)。如果您想要使用"Reveal"效果应该向侧栏添加 "panel-reveal" 类, 如果要使用"Cover"效果则添加 "panel-cover" 类:

<body>
    <!-- First, we need to add Panel's overlay that will overlays app while panel is opened -->
    <div class="panel-overlay"></div>
 
    <!-- Left panel, let it be with reveal effect -->
    <div class="panel panel-left panel-reveal">
        ... panel content goes here ...
    </div>
 
    <!-- Right panel, with cover effect -->
    <div class="panel panel-right panel-cover">
        ... panel content goes here ...
    </div>
 
    ...
</body>

打开和关闭侧栏

从 HTML

Ok, 现在当我们的App里有侧栏,我们需要知道如何打开/关闭它们:

为了打开侧栏，我们需要添加"open-panel" 类到任意HTML元素上(最好加到链接节点上)
为了关闭侧栏，我们需要添加"close-panel" 类到任意HTML元素上(最好加到链接节点上)
如果你的App里有两个侧栏，链接默认将打开/关闭左侧栏
如果你想要指定哪个侧栏被开启/关闭,那么它可以通过HTML元素上额外的属性data-panel="left"完成。

根据以上注意点：

<body>
  <!-- Panels Overlay -->
  <div class="panel-overlay"></div>
 
  <!-- Left Panel with Reveal effect -->
  <div class="panel panel-left panel-reveal">
    <div class="content-block">
      <p>Left Panel content here</p>
      <!-- Click on link with "close-panel" class will close panel -->
      <p><a href="#" class="close-panel">Close me</a></p>
      <!-- Click on link with "open-panel" and data-panel="right" attribute will open Right panel -->
      <p><a href="#" data-panel="right" class="open-panel">Open Right Panel</a></p>
    </div>
  </div>
 
  <!-- Right Panel with Cover effect -->
  <div class="panel panel-right panel-cover">
    <div class="content-block">
      <p>Right Panel content here</p>
      <!-- Click on link with "close-panel" class will close panel -->
      <p><a href="#" class="close-panel">Close me</a></p>
      <!-- Click on link with "open-panel" and data-panel="left" attribute will open Left panel -->
      <p><a href="#" data-panel="left" class="open-panel">Open Left Panel</a></p>
    </div>
  </div>
 
  ...
  <div class="page-content">
    <div class="content-block">
      <!-- If no data-panel attribute, Left panel will be opened by default -->
      <p><a href="#" class="open-panel">Open Left Panel</a></p>
      <!-- Click on link with "open-panel" and data-panel="right" attribute will open Right panel -->
      <p><a href="#" data-panel="right" class="open-panel">Open Right Panel</a></p>
    </div>
  </div>
  ...
</body>

使用 JavaScript

我们也可以通过使用JavaScript打开和关闭侧栏,为此我们需要查看相关的App方法：

myApp.openPanel(position) - 打开侧栏.

position - string - 侧栏打开的位置: "left" 或 "right". 必需.

myApp.closePanel() - 关闭最近打开的侧栏.

<body>
  <div class="panel-overlay"></div>
  <div class="panel panel-left panel-reveal">
    <div class="content-block">
      <p>Left Panel content here</p>
      <p><a href="#" class="panel-close">Close me</a></p>
      <p><a href="#" class="open-right-panel">Open Right Panel</a></p>
    </div>
  </div>
  <div class="panel panel-right panel-cover">
    <div class="content-block">
      <p>Right Panel content here</p>
      <p><a href="#" class="panel-close">Close me</a></p>
      <p><a href="#" class="open-left-panel">Open Left Panel</a></p>
    </div>
  </div>
  ...
    <div class="page-content">
      <div class="content-block">
        <p><a href="#" class="open-left-panel">Open Left Panel</a></p>
        <p><a href="#" class="open-right-panel">Open Right Panel</a></p>
      </div>
    </div>
  ...
  <script>
    var myApp = new Framework7();
 
    var $$ = Dom7;
 
    $$('.open-left-panel').on('click', function (e) {
        // 'left' position to open Left panel
        myApp.openPanel('left');
    });
 
    $$('.open-right-panel').on('click', function (e) {
        // 'right' position to open Right panel
        myApp.openPanel('right');
    });
 
    $$('.panel-close').on('click', function (e) {
        myApp.closePanel();
    });
 
  </script>
</body>

Panel 事件

Panel事件对检测用户如何与你的侧栏交互，或者在侧栏打开/关闭时做一些JavaScript操作非常有用。

Event（事件）	Target（目标）	Description（描述）
open	Panel Element<div class="panel">	当侧栏的打开动画开始时，事件将被触发
opened	Panel Element<div class="panel">	当侧栏的打开动画结束时，事件将被触发
close	Panel Element<div class="panel">	当侧栏的关闭动画开始时，事件将被触发
closed	Panel Element<div class="panel">	当侧栏的关闭动画完成时，事件将被触发

这里有一个例子：

var myApp = new Framework7();
 
var $$ = Dom7;
 
$$('.panel-left').on('opened', function () {
    myApp.alert('Left panel opened!');
});
$$('.panel-left').on('close', function () {
    myApp.alert('Left panel is closing!');
});
$$('.panel-right').on('open', function () {
    myApp.alert('Right panel is opening!');
});
$$('.panel-right').on('closed', function () {
    myApp.alert('Right panel closed!');
});

滑动屏幕打开侧栏

Framework7支持通过滑动手势打开侧栏。但有一个限制 —— 只有一个菜单能被设置成允许滑动屏幕打开 (左或右)。

要使用这个功能，我们需要在App初始化时设置相关参数：

var myApp = new Framework7({
    swipePanel: 'left'
});

There are also swipePanelCloseOpposite, swipePanelOnlyClose, swipePanelActiveArea, swipePanelNoFollow, swipePanelThreshold parameters that gives you more control over swipe panels. You can learn more about them in Initialize App section.

侧栏已经被打开？

有时候检测我们的一些侧栏是否是打开的是很有用的。这很容易,当一些菜单被打开时<body>将由以下规则生成被添加的类：with-panel-[position]-[effect]:

如果你有带Cover效果的左侧栏打开着，body会有“with-panel-left-cover”类 <body class="with-panel-left-cover">
如果你有带Reveal效果的左侧栏打开着, body 会有“with-panel-left-reveal”类 <body class="with-panel-left-reveal">
如果你有带Cover效果的右侧栏打开着，body会有"with-panel-right-cover" 类 <body class="with-panel-right-cover">
如果你有带Reveal效果的右侧栏打开着, body 会有"with-panel-right-reveal" 类 <body class="with-panel-right-reveal">

You can use it in JavaScript to detect opened panel:

if ($$('body').hasClass('with-panel-left-cover')) {
    console.log('Left Panel is opened')
}

或者在 CSS 定义额外的样式:

/* Change Status Bar background when panel is opened */        
body.with-panel-left-cover .statusbar-overlay{
    background-color: #333;
}