HTML CSS JAVASCRIPT PYTHON PYTHON2 JAVA C C++ C# SQL Excel Linux AI BOOTSTRAP PHP 教程库 参考手册 技术文章 测验 练习 HOWTO FAQ
❮ 上一节 下一节 ❯

Framework7 - 面板是否打开?

描述

我们可以确定面板是否打开。每当打开某个面板时，<body> 都会生成额外的类，如下所示，该类使用 with-panel-[position]-[effect] 规则。

  • 当您使用封面效果打开左面板时，body 将具有 with-panel-left-cover 类。

  • 当您使用显示效果打开左面板时，body 将具有 with-panel-left-reveal 类。

  • 当您使用封面效果打开右面板时，body 将具有 with-panel-right-cover 类。

  • 当您使用显示效果打开右面板时，body 将具有 with-panel-right-reveal类。

您可以在 JavaScript 或 CSS 中使用它来检测打开的面板，如下所示 −

在 JavaScript 中

if ($$('body').hasClass('with-panel-left-cover')) {
    console.log('左面板已打开')
}

在 CSS 中

body.with-panel-left-cover .statusbar-overlay {
    background-color: #333;
}

这将在面板打开时更改状态栏背景。

framework7_side_panels.html

❮ 上一节 下一节 ❯