移动端安卓和IOS开发框架Framework7教程-Popover 布局

zaixianshouce

浏览: 257363 次

最近访客更多访客>>

libian339

hanxin830311

hwp81226

Lucifer-luci

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Framework7

Framework7

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

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

Popover 布局

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

<body>
...
<div class="popover">
<div class="popover-angle"></div>
<div class="popover-inner">
</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">
<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">
<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>
...
<style>
.popover {
width: 200px;
}
</style>
<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>
<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 完成结束动画后，事件将被触发。

0
顶

0
踩

分享到：

移动端安卓和IOS开发框架Framework7教程-P ... | 移动端安卓和IOS开发框架Framework7教程-P ...

2016-06-03 09:12
浏览 1129
评论(0)
分类:移动开发
查看更多

发表评论

文章已被作者锁定，不允许评论。

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论