赞助者成为赞助者

弹出

弹出组件用于管理弹出窗口中内容的显示。弹出窗口用于临时显示信息。在用户点击弹出窗口外或明确地将其关闭之前，弹出窗口将一直保持显示状态。

请注意，不建议在小屏幕（iPhone）上使用弹出框。在小屏幕上，您应该使用 操作表。

弹出框布局

首先，我们来看一下弹出框布局，它很简单

<body>
    ...
    <div class="popover">
        <!-- Popover's arrow -->
        <div class="popover-arrow"></div>

        <!-- Popover content -->
        <div class="popover-inner">
            <!-- Any HTML content here -->
        </div>
    </div>
</body>

弹出框是一个高度可自定义的元素，您可以在其中放置任何内容，甚至可以包含带导航的另一个视图。

弹出框应用程序方法

让我们看一下相关的应用程序方法来使用弹出框

app.popover.create(parameters) - 创建弹出框实例

  • parameters - object。带有弹出框参数的对象

该方法返回已创建的弹出框实例

app.popover.destroy(el) - 销毁弹出框实例

  • el - HTMLElement 或 string（带 CSS 选择器）或 object。要销毁的弹出框元素或弹出框实例。

app.popover.get(el) - 通过 HTML 元素获取弹出框实例

  • el - HTMLElement 或 string（带 CSS 选择器）。弹出框元素。

该方法返回弹出框的实例

app.popover.open(el, targetEl, animate) - 打开弹出框

  • el - HTMLElement 或 string（带 CSS 选择器）。要打开的弹出框元素。
  • targetEl - HTMLElement 或 string（带 CSS 选择器）。目标元素，将在该元素周围设置弹出框的位置
  • animate - boolean。使用动画打开弹出框。

该方法返回弹出框的实例

app.popover.close(el, animate) - 关闭弹出框

  • el - HTMLElement 或 string（带 CSS 选择器）。要关闭的弹出框元素。
  • animate - boolean。使用动画关闭弹出框。

该方法返回弹出框的实例

弹出框参数

现在，让我们看一看创建弹出框所需的一系列可用参数

参数类型默认值说明
elHTMLElement弹出框元素。如果您已在 HTML 中有弹出框元素并想使用此元素创建新实例，这可能有用
arrowbooleantrue启用弹出框箭头/角
contentstring完整弹出框 HTML 布局字符串。如果您想动态创建弹出框元素，这可能很有用
verticalPositionstringauto强制设置弹出框的垂直位置，可以是 auto、top 或 bottom
backdropbooleantrue启用弹出框的背景（后面显示半透明的深色层）
backdropUniquebooleanfalse如果启用，则为该模式创建唯一的背景元素
backdropElHTMLElement
string		自定义背景元素的 HTML 元素或字符串 CSS 选择器
closeByBackdropClickbooleantrue启用后，点击背景可关闭弹出框
closeByOutsideClickbooleantrue启用时，在点击气泡外部时关闭气泡
closeOnEscapebooleanfalse启用时，按 ESC 键盘键关闭气泡
animatebooleantrue气泡是否应该带动画打开/关闭。可以在 .open() 和 .close() 方法中覆盖
targetElHTMLElement
string		目标元素的 HTML 元素或字符串 CSS 选择器
targetX数字从屏幕左侧到虚拟目标元素的水平偏移量。在不使用真实目标元素 (targetEl) 时必需
targetY数字从屏幕顶部到虚拟目标元素的垂直偏移量。在不使用真实目标元素 (targetEl) 时必需
targetWidth数字0虚拟目标元素宽度（以像素为单位）。在不使用真实目标元素 (targetEl) 时必需
targetHeight数字0虚拟目标元素高度（以像素为单位）。在不使用真实目标元素 (targetEl) 时必需
containerElHTMLElement
string		要挂载模式的元素（默认为应用根元素）
on对象

带有事件处理程序的对象。例如

var popover = app.popover.create({
  content: '<div class="popover">...</div>',
  on: {
    opened: function () {
      console.log('Popover opened')
    }
  }
})

注意，所有以下参数都可以用在 popover 属性下的全局应用参数中，以设置所有气泡的默认值。例如

var app = new Framework7({
  popover: {
    closeByBackdropClick: false,
  }
});

如果你使用自动初始化的气泡（例如，你不通过 app.popover.create 创建它们），则可以通过 data- 属性传递所有可用的气泡参数。例如

<!-- Pass parameters as kebab-case data attributes -->
<div class="popover" data-close-on-escape="true" data-backdrop="false">
  ...
</div>

气泡方法和属性

因此，要创建气泡我们必须调用

var popover = app.popover.create({ /* parameters */ })

此后，我们拥有一个初始化的实例（如上面示例中的 popover 变量），它有有用的方法和属性

属性
popover.app指向全局应用实例的链接
popover.el气泡 HTML 元素
popover.$el带有气泡 HTML 元素的 Dom7 实例
popover.backdropEl背景幕 HTML 元素
popover.$backdropEl带有背景幕 HTML 元素的 Dom7 实例
popover.targetEl气泡目标 HTML 元素
popover.$targetEl带有气泡目标 HTML 元素的 Dom7 实例
popover.params气泡参数
popover.opened布尔属性，指示气泡是否已打开
方法
popover.open(targetEl, animate)在目标元素周围打开气泡。其中
  • targetEl - HTMLElement 或字符串 - 目标元素，围绕此元素设置气泡位置
  • animate - 布尔（默认为 true） - 定义是否应该带动画打开
popover.open(animate)在气泡创建时传递的目标元素周围打开气泡。其中
  • animate - 布尔（默认为 true） - 定义是否应该带动画打开
popover.close(animate)关闭气泡。其中
  • animate - 布尔（默认为 true） - 定义是否应该带动画关闭
popover.destroy()销毁气泡
popover.on(event, handler)添加事件处理程序
popover.once(event, handler)添加事件处理程序，在触发后将移除该处理程序
popover.off(事件, 处理程序)移除事件处理程序
popover.off(事件)移除指定事件的所有处理程序
popover.emit(事件, ...args)在实例上触发事件

可以通过链接上具有特殊类和数据特性的使用，来打开和关闭所需的 popover（如果你在 DOM 中有这些 popover）

  • 要打开 popover，我们需要将 "popover-open" 类添加到任何 HTML 元素（最好是链接）

  • 要关闭 popover，我们需要将 "popover-close" 类添加到任何 HTML 元素（最好是链接）

  • 如果你在 DOM 中有多个 popover，你需要通过此 HTML 元素上的附加 data-popover=".my-popover" 特性来指定合适的 popover

根据以上说明

<!-- In data-popover attribute we specify CSS selector of popover we need to open -->
<p><a href="#" data-popover=".my-popover" class="popover-open">Open Popover</a></p>

<!-- And somewhere in DOM -->
<div class="popover my-popover">
  <div class="popover-inner">
    <!-- Link to close popover -->
    <a class="link popover-close">Close Popover</a>
  </div>
</div>

Popover 事件

Popover 将在 popover 元素上触发以下 DOM 事件，并在应用程序和 popover 实例上触发事件

DOM 事件

事件目标说明
popover:openPopover 元素<div class="popover">Popover 开始其打开动画后，此事件将被触发
popover:openedPopover 元素<div class="popover">Popover 完成其打开动画后，此事件将被触发
popover:closePopover 元素<div class="popover">Popover 开始其关闭动画后，此事件将被触发
popover:closedPopover 元素<div class="popover">Popover 完成其关闭动画后，此事件将被触发

应用程序和 Popover 实例事件

Popover 实例在自身实例和应用程序实例上触发事件。应用程序实例事件具有相同名称，前缀为 popover。

事件参数目标说明
打开popoverpopoverPopover 开始其打开动画后，此事件将被触发。事件处理程序接收 popover 实例作为参数
popoverOpenpopover应用程序
已打开popoverpopoverPopover 完成其打开动画后，此事件将被触发。事件处理程序接收 popover 实例作为参数
popoverOpenedpopover应用程序
关闭popoverpopoverPopover 开始其关闭动画后，此事件将被触发。事件处理程序接收 popover 实例作为参数
popoverClosepopover应用程序
已关闭popoverpopoverPopover 完成其关闭动画后，此事件将被触发。事件处理程序接收 popover 实例作为参数
popoverClosedpopover应用程序
即将销毁popoverpopoverPopover 实例即将被销毁前，此事件将被触发。事件处理程序接收 popover 实例作为参数
popoverBeforeDestroypopover应用程序

CSS 变量

以下是相关的 CSS variables（CSS custom properties） (CSS 自定义属性) 列表。

:root {
  --f7-popover-width: 260px;
}
.ios {
  --f7-popover-border-radius: 13px;
  --f7-popover-actions-icon-size: 28px;
  --f7-popover-transition-timing-function: initial;
  --f7-popover-bg-color: rgba(255, 255, 255, 0.95);
  --f7-popover-actions-label-text-color: rgba(0, 0, 0, 0.45);
}
.ios .dark,
.ios.dark {
  --f7-popover-bg-color: rgba(30, 30, 30, 0.95);
  --f7-popover-actions-label-text-color: rgba(255, 255, 255, 0.55);
}
.md {
  --f7-popover-transition-timing-function: cubic-bezier(0, 0.8, 0.34, 1);
  --f7-popover-border-radius: 28px;
  --f7-popover-actions-icon-size: 24px;
}
.md,
.md .dark,
.md [class*='color-'] {
  --f7-popover-bg-color: var(--f7-md-surface-3);
  --f7-popover-actions-label-text-color: var(--f7-md-on-surface-variant);
}

示例

popover.html
<div class="page">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner sliding">
      <div class="title">Popover</div>
      <div class="right">
        <a class="link popover-open" data-popover=".popover-menu">Popover</a>
      </div>
    </div>
  </div>
  <div class="toolbar toolbar-bottom">
    <div class="toolbar-inner">
      <a href="" class="link popover-open" data-popover=".popover-menu">Dummy Link</a>
      <a href="" class="link popover-open" data-popover=".popover-menu">Open Popover</a>
    </div>
  </div>
  <div class="page-content">
    <div class="block">
      <p><a data-popover=".popover-menu" class="button button-fill popover-open">Open popover on me</a></p>
      <p>Mauris fermentum neque et luctus venenatis. Vivamus a sem rhoncus, ornare tellus eu, euismod mauris. In porta
        turpis at semper convallis. Duis adipiscing leo eu nulla lacinia, quis rhoncus metus condimentum. Etiam nec
        malesuada nibh. Maecenas quis lacinia nisl, vel posuere dolor. Vestibulum condimentum, nisl ac vulputate
        egestas, neque enim dignissim elit, rhoncus volutpat magna enim a est. Aenean sit amet ligula neque. Cras
        suscipit rutrum enim. Nam a odio facilisis, elementum tellus non, <a class="popover-open"
          data-popover=".popover-menu">popover</a> tortor. Pellentesque felis eros, dictum vitae lacinia quis, lobortis
        vitae ipsum. Cras vehicula bibendum lorem quis imperdiet.</p>
      <p>In hac habitasse platea dictumst. Etiam varius, ante vel ornare facilisis, velit massa rutrum dolor, ac porta
        magna magna lacinia nunc. Curabitur <a class="popover-open" data-popover=".popover-menu">popover!</a> cursus
        laoreet. Aenean vel tempus augue. Pellentesque in imperdiet nibh. Mauris rhoncus nulla id sem suscipit volutpat.
        Pellentesque ac arcu in nisi viverra pulvinar. Nullam nulla orci, bibendum sed ligula non, ullamcorper iaculis
        mi. In hac habitasse platea dictumst. Praesent varius at nisl eu luctus. Cras aliquet porta est. Quisque
        elementum quis dui et consectetur. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
        ridiculus mus. Sed sed laoreet purus. Pellentesque eget ante ante.</p>
      <p>Duis et ultricies nibh. Sed facilisis turpis urna, ac imperdiet erat venenatis eu. Proin sit amet faucibus
        tortor, et varius sem. Etiam vitae lacinia neque. Aliquam nisi purus, interdum in arcu sed, ultrices rutrum
        arcu. Nulla mi turpis, consectetur vel enim quis, facilisis viverra dui. Aliquam quis convallis tortor, quis
        semper ligula. Morbi ullamcorper <a class="popover-open" data-popover=".popover-menu">one more popover</a> massa
        at accumsan. Etiam purus odio, posuere in ligula vitae, viverra ultricies justo. Vestibulum nec interdum nisi.
        Aenean ac consectetur velit, non malesuada magna. Sed pharetra vehicula augue, vel venenatis lectus gravida
        eget. Curabitur lacus tellus, venenatis eu arcu in, interdum auctor nunc. Nunc non metus neque. Suspendisse
        viverra lectus sed risus aliquet, vel accumsan dolor feugiat.</p>
    </div>
  </div>
  <div class="popover popover-menu">
    <div class="popover-angle"></div>
    <div class="popover-inner">
      <div class="list">
        <ul>
          <li><a href="/dialog/" class="list-button popover-close">Dialog</a></li>
          <li><a href="/tabs/" class="list-button popover-close">Tabs</a></li>
          <li><a href="/panel/" class="list-button popover-close">Side Panels</a></li>
          <li><a href="/list/" class="list-button popover-close">List View</a></li>
          <li><a href="/inputs/" class="list-button popover-close">Form Inputs</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>
改进此文档
在此页面上的