Framework7-popover-dynamic
提供：Dev Guides
Framework7-動的ポップオーバー
説明
ポップオーバーは、以下に示すように、関連するアプリのメソッドを使用して動的に作成できます-
- * myApp.popover（popoverHTML、target、removeOnClose）*-このメソッドは以下の引数を受け入れます
- popoverHTML -ポップオーバーのHTML文字列です。
- target -ポップオーバーの位置を設定するために使用されるターゲット要素の_HTMLElementまたは文字列（CSSセレクター付き）_です。 これは_required_引数です。
- removeOnClose -_Boolean_タイプであり、オプションの引数です。 デフォルトでは、_true_に設定されており、閉じたときにDOMからポップオーバーが削除されます。
動的に作成されたポップオーバーのHTMLElementは、このメソッドによって返されます。
例
次の例は、Framework7での動的ポップオーバーの使用を示しています-
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>Dynamic Popover</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css">
</head>
<body>
<div class="views">
<div class="view view-main">
<div class="pages">
<div data-page="home" class="page navbar-fixed">
<div class="navbar">
<div class="navbar-inner">
<div class="left"> <a href="#" class="link create-menus">Menus</a></div>
<div class="center">Dynamic Popover</div>
<div class="right"> <a href="#" class="link create-about">About</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-menus">Create Menus Popover</a></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat <a href="#" class="create-about">About</a> nibh iaculis quis. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum <a href="#" class="create-menus">Menus</a>.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<style>.popover{width:300px;}</style>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<script>
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.</p>'+
'</div>'+
'</div>'+
'</div>'
myApp.popover(popoverHTML, clickedLink);
});
$$('.create-menus').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">Menus 1</li>'+
'<li><a href="#" class="item-link list-button">Menus 2</li>'+
'<li><a href="#" class="item-link list-button">Menus 3</li>'+
'<li><a href="#" class="item-link list-button">Menus 4</li>'+
'<li><a href="#" class="item-link list-button">Menus 5</li>'+
'</ul>'+
'</div>'+
'</div>'+
'</div>'
myApp.popover(popoverHTML, clickedLink);
});
</script>
</body>
</html>出力
上記のコードがどのように機能するかを確認するために次の手順を実行してみましょう-
- 上記のHTMLコードを popover_dynamicl ファイルとしてサーバーのルートフォルダーに保存します。
- このHTMLファイルをhttp：//localhost/popover_dynamiclとして開くと、出力は以下のように表示されます。
- 最初のリンクをクリックして、ポップオーバーに関するダイナミックを作成できます。 同様に、動的メニューのポップオーバーを作成するには、2番目のリンクをクリックします。
- リンクをクリックすると、ダイナミックポップオーバーが作成され、外側をクリックしてポップオーバーを閉じることができます。
リンクをクリックすると、ダイナミックポップオーバーが開き、外側のマウスをクリックしてポップオーバーを閉じます。
