Popover

优质

小牛编辑

153浏览

2023-12-01

Popover 组件是用来管理popover里的内容展示。你可以用 popovers 临时显示一些信息. popover 保持可见直到用户点击popover窗口外面或者你明确地移除它。

注意，不推荐在小屏幕(iPhone)上使用 Popover 。在小屏幕上你应该使用操作表来代替。或者使用操作表转换为Popover。

Popover 布局

首先让我们来看看 Popover 布局, 它非常简单, 只需要添加在 <body>的结尾处:

<body>
    ...
    <div class="popover">
        <!-- Popover's angle arrow -->
        <div class="popover-angle"></div>
 
        <!-- Popover content -->
        <div class="popover-inner">
  <!-- Any HTML content here -->
        </div>
    </div>
</body>

Popover 是高度可定制元素，你可以往里面放任何东西，甚至是另一个完整的视图。

打开和关闭 Popover

通过HTML

可以通过在链接里使用特定的类名和data属性，打开和关闭所需的 Popover :

为了打开 popover ，我们需要添加 "open-popover" 类到任意 HTML 元素中 (最好是链接)
为了关闭 popover ，我们需要添加 "close-popover" 类到任意 HTML 元素中 (最好是链接)
如果你的App里有超过一个 popover, 你需要指定适当 popover，则需添加额外的属性data-popover=".my-popover" 到这个 HTML 元素上

Popover 定位

当我们通过这样的方法（通过HTML）打开 Popover , 它会被自动定位到我们点击打开Popover的元素附近。

<body>
  ...  
  <div class="navbar">
    <div class="navbar-inner">
      <!-- In data-popover attribute we specify CSS selector of popover we need to open -->
      <div class="left"><a href="#" data-popover=".popover-about" class="link open-popover">About</a></div>
      <div class="center">Popover</div>
      <div class="right"><a href="#" data-popover=".popover-links" class="link open-popover">Links</a></div>
    </div>
  </div>
  <div class="page-content">
    <div class="content-block">
      <!-- In data-popover attribute we specify CSS selector of popover we need to open -->
      <p><a href="#" data-popover=".popover-about" class="open-popover">Open About Popover</a></p>
      <p><a href="#" data-popover=".popover-links" class="open-popover">Open Links Popover</a></p>
    </div>
  </div>
  ...
 
  <!-- By default popover has 320px width, let's make it a bit narrow -->
  <style>
    .popover {
      width: 200px;
    }
  </style>
 
  <!-- About popover -->
  <div class="popover popover-about">
    <div class="popover-angle"></div>
    <div class="popover-inner">
      <div class="content-block">
        <p>About</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac diam ac quam euismod porta vel a nunc. Quisque sodales scelerisque est, at porta justo cursus ac.</p>
      </div>
    </div>
  </div>
 
  <!-- Links popover -->
  <div class="popover popover-links">
    <div class="popover-angle"></div>
    <div class="popover-inner">
      <div class="list-block">
        <ul>
<li><a href="#" class="list-button item-link">Link 1</a></li>
<li><a href="#" class="list-button item-link">Link 2</a></li>
<li><a href="#" class="list-button item-link">Link 3</a></li>
<li><a href="#" class="list-button item-link">Link 4</a></li>
        </ul>
      </div>
    </div>
  </div>
</body>

使用 JavaScript

我们也可以用使用JavaScript来打开和关闭 Popover ，因此我们需要看一下相关的App方法：

myApp.popover(popover, target) - 在目标元素附近打开 Popover

popover - 需要打开的popover的HTML元素或者字符串 ( CSS 选择器). 必需
target - popover需要围绕的元素（定位元素）HTML元素或者字符串 ( CSS 选择器). 必需
这个方法返回 Popover的 HTML元素

myApp.closeModal(popover) - 关闭 Popover

popover - HTMLElement or string (CSS 选择器). 可选. 如果你没有指定，则所有被打开的都将被关闭

Popover 位置

当我们使用 JavaScript 打开popover ，我们需要通过 target 元素去设定 popover 所围绕的目标元素.

<body>
  ...
  <div class="navbar">
    <div class="navbar-inner">
      <div class="left"><a href="#" class="link open-about">About</a></div>
      <div class="center">Popover</div>
      <div class="right"><a href="#" class="link open-about">Links</a></div>
    </div>
  </div>
  <div class="page-content">
    <div class="content-block">
      <p><a href="#" class="open-about">Open About Popover</a></p>
      <p><a href="#" class="open-links">Open Links Popover</a></p>
      <p>Praesent urna mi, sodales ac dolor vitae, dictum mattis sem. Mauris a dui faucibus, condimentum arcu quis, porta felis. Sed at metus arcu. Maecenas sodales tellus risus, id <a href="#" class="open-about">About</a> nibh iaculis quis. Suspendisse dignissim ante lobortis, molestie nibh id, pharetra risus. Proin blandit neque nec nibh scelerisque, eu vulputate ipsum malesuada. Phasellus sapien diam, fermentum eget ornare in, <a href="#" class="open-links">Links</a> rutrum vel justo. Integer accumsan posuere quam.</p>
    </div>
  </div>
  ...
  <div class="popover popover-about">
    ...
  </div>
  <div class="popover popover-links">
    ...
  </div>
</body>

var myApp = new Framework7();
 
var $$ = Dom7;
 
// Open About popover
$$('.open-about').on('click', function () {
    var clickedLink = this;
    myApp.popover('.popover-about', clickedLink);
});
 
// Open Links popover
$$('.open-links').on('click', function () {
    var clickedLink = this;
    myApp.popover('.popover-links', clickedLink);
});

动态的 Popover

Framework7允许你把HTML内容传给相关的App方法来动态地创建 Popover:

myApp.popover(popoverHTML, target, removeOnClose) - 使用 popoverHTML 内容在 target 元素附近打开popover

popoverHTML - string. popover 的HTML 字符串
target - HTMLElement or string ( CSS 选择器) 设置 popover 位置所围绕的目标元素. 必需
removeOnClose - boolean. 可选, 默认值 - true. 如果是 true，那么 Popover 在关闭时将从DOM中移除
该方法返回动态创建的 Popover的 HTML结构

<body>
  ...
  <div class="navbar">
    <div class="navbar-inner">
      <div class="left"><a href="#" class="link create-about">About</a></div>
      <div class="center">Popover</div>
      <div class="right"><a href="#" class="link create-links">Links</a></div>
    </div>
  </div>
  <div class="page-content">
    <div class="content-block">
      <p><a href="#" class="create-about">Create About Popover</a></p>
      <p><a href="#" class="create-links">Create Links Popover</a></p>
      <p>Praesent urna mi, sodales ac dolor vitae, dictum mattis sem. Mauris a dui faucibus, condimentum arcu quis, porta felis. Sed at metus arcu. Maecenas sodales tellus risus, id <a href="#" class="create-about">About</a> nibh iaculis quis. Suspendisse dignissim ante lobortis, molestie nibh id, pharetra risus. Proin blandit neque nec nibh scelerisque, eu vulputate ipsum malesuada. Phasellus sapien diam, fermentum eget ornare in, <a href="#" class="create-links">Links</a> rutrum vel justo. Integer accumsan posuere quam.</p>
    </div>
  </div>
  ...
</body>

var myApp = new Framework7();
 
var $$ = Dom7;
 
$$('.create-about').on('click', function () {
  var clickedLink = this;
  var popoverHTML = '<div class="popover">'+
            '<div class="popover-inner">'+
              '<div class="content-block">'+
                '<p>About Popover created dynamically.</p>'+
                '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac diam ac quam euismod porta vel a nunc. Quisque sodales scelerisque est, at porta justo cursus ac.</p>'+
              '</div>'+
            '</div>'+
          '</div>'
  myApp.popover(popoverHTML, clickedLink);
});
 
$$('.create-links').on('click', function () {
  var clickedLink = this;
  var popoverHTML = '<div class="popover">'+
            '<div class="popover-inner">'+
              '<div class="list-block">'+
                '<ul>'+
                '<li><a href="#" class="item-link list-button">Link 1</li>'+
                '<li><a href="#" class="item-link list-button">Link 2</li>'+
                '<li><a href="#" class="item-link list-button">Link 3</li>'+
                '</ul>'+
              '</div>'+
            '</div>'+
          '</div>'
  myApp.popover(popoverHTML, clickedLink);
});

Popover 事件

Popover 和任意 Modal拥有一样的事件

Event（事件）	Target（目标）	Description（描述）
open	Popover Element<div class="popover">	当 Popover 开始打开动画时，事件将被触发。
opened	Popover Element<div class="popover">	当 Popover 完成打开动画时，事件将被触发。
close	Popover Element<div class="popover">	当 Popover 开始结束动画时，事件将被触发。
closed	Popover Element<div class="popover">	当 Popover 完成结束动画后，事件将被触发。