Framework7-JavaScriptを使用したポップオーバーのオープンとクローズ

説明

以下に示すように、関連するアプリメソッドを使用して、JavaScriptでポップオーバーを開いたり閉じたりすることもできます-

* myApp.popover（popover、target）*-ターゲット要素の周りのポップオーバーを開くために使用され、次の引数を受け入れます-
popover -これは_required_引数であり、開くにはポップオーバーの_HTMLElement_または_string（CSSセレクターを使用）_です。
target -_required_引数であり、この要素の周囲にポップオーバー位置を設定するために使用されるターゲット要素の_HTMLElement_または_string（CSSセレクターを使用）_です。
* myApp.closeModal（popover）*-ポップオーバーを閉じて、_popover_引数を受け入れます。これは、_HTMLElement_または_string（CSSセレクターを使用）_です。これはオプションの引数であり、指定されていない場合、開いているポップオーバーのいずれかが閉じられます。

JavaScriptを使用してポップオーバーを開く場合は、_target_要素を渡して、ターゲット要素の周りにポップオーバーを設定する必要があります。

例

次の例は、Framework7でJavaScriptを使用してポップオーバーを開閉する方法を示しています-

<!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>Open and close Popover Using JavaScript</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 open-menus">Menus</a></div>
                        <div class = "center">Open and close Popover Using JavaScript</div>
                        <div class = "right"> <a href = "#" class = "link open-about">About</a></div>
                     </div>
                  </div>

                  <div class = "page-content">
                     <div class = "content-block">
                        <p><a href = "#" class = "open-menus">Open menus Popover</a></p>

                        <p><a href = "#" class = "open-about">Open About 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 = "open-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 = "open-menus">Menus</a>.</p>
                     </div>
                  </div>

               </div>
            </div>
         </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.</p>
            </div>
         </div>
      </div>

      <div class = "popover popover-menus">
         <div class = "popover-angle"></div>
         <div class = "popover-inner">
            <div class = "list-block">
               <ul>
                  <li><a href = "#" class = "list-button item-link">Menu 1</a></li>
                  <li><a href = "#" class = "list-button item-link">Menu 2</a></li>
                  <li><a href = "#" class = "list-button item-link">Menu 3</a></li>
                  <li><a href = "#" class = "list-button item-link">Menu 4</a></li>
                  <li><a href = "#" class = "list-button item-link">Menu 5</a></li>
               </ul>
            </div>
         </div>
      </div>

      <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;

         $$('.open-about').on('click', function () {
            var clickedLink = this;
            myApp.popover('.popover-about', clickedLink);
         });

         $$('.open-menus').on('click', function () {
            var clickedLink = this;
            myApp.popover('.popover-menus', clickedLink);
         });
      </script>
   </body>

</html>

出力

上記のコードがどのように機能するかを確認するために次の手順を実行してみましょう-

上記のHTMLコードを popover_open_close_jsl ファイルとしてサーバーのルートフォルダーに保存します。
このHTMLファイルをhttp：//localhost/popover_open_close_jslとして開くと、出力は以下のように表示されます。
最初のリンクをクリックすると、メニューポップオーバーウィンドウが開き、いくつかのメニュー項目が表示されます。同様に、2番目のリンクをクリックすると、ポップオーバーについてのウィンドウが開きます。
メニューとaboutオプションをクリックすると、メニューとaboutポップオーバーウィンドウも開きます。ポップオーバーは、javascriptを使用してターゲット要素の周りを開閉します。

Framework7-popover-open-close-js

Framework7-JavaScriptを使用したポップオーバーのオープンとクローズ

説明

例

出力

目次