移动端安卓和IOS开发框架Framework7教程-侧栏

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

<body>
<div class="panel-overlay"></div>
<div class="panel panel-left">
... panel content goes here ...
</div>
<div class="panel panel-right">
... panel content goes here ...
</div>
...
</body>

复制

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

<body>
<div class="panel-overlay"></div>
<div class="panel panel-left panel-reveal">
... panel content goes here ...
</div>
<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>
<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="close-panel">Close me</a></p>
<p><a href="#" data-panel="right" class="open-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="close-panel">Close me</a></p>
<p><a href="#" data-panel="left" class="open-panel">Open Left Panel</a></p>
</div>
</div>
...
<div class="page-content">
<div class="content-block">
<p><a href="#" class="open-panel">Open Left Panel</a></p>
<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;
}

复制