在 Framework7 中使用动态选择器模式

优质

小牛编辑

136浏览

2023-12-01

描述 (Description)

您还可以使用HTML到App方法创建动态选择器模式。它使用两个参数 -

pickerHTML - 它包含pickerHTML模态的字符串元素。
removeOnClose - 它包含布尔值，当您关闭Picker时，它将从DOM中删除。默认情况下，它包含真值。

例子 (Example)

以下示例演示了在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 Picker Modal</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>
         <div>
            <div>
               <div>
                  <div>Dynamic Picker Modal</div>
               </div>
            </div>
            <div>
               <div data-page="index">
                  <div>
                     <div>
                        <p><a href="#">Open Picker</a></p>
                        <p><a href="#">Close Picker</a></p>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
      <script>
         // Here you can initialize the app
         var myApp = new Framework7();
         // If your using custom DOM library, then save it to $$ variable
         var $$ = Dom7;
         // Add the view
         var mainView = myApp.addView('.view-main', {
         // enable the dynamic navbar for this view:
            dynamicNavbar: true
         });
         $$('.create-modal-picker').on('click', function () {
           //Here you can check whether we have already opened picker or not
            if ($$('.picker-modal.modal-in').length > 0) {
               myApp.closeModal('.picker-modal.modal-in');
            }
            myApp.pickerModal(
               '<div>' +
               '<div>' +
               '<div>' +
               '<div></div>' +
               '<div><a href="#">Ok</a></div>' +
               '</div>' +
               '</div>' +
               '<div>' +
               '<div>' +
               '<p>Framework7 - is a free and open source mobile HTML framework to 
                  develop hybrid mobile apps or web apps with iOS & Android native look 
                  and feel. It is also an indispensable prototyping apps tool to show
                  working app prototype as soon as possible in case you need to.</p>' +
               '</div>' +
               '</div>' +
               '</div>'
            )
         });
      </script>
   </body>
</html>

输出 (Output)

让我们执行以下步骤，看看上面给出的代码是如何工作的 -

将上面给出的HTML代码保存为服务器根文件夹中的picker_modal_dynamic.html文件。
以http://localhost/picker_modal_dynamic.html打开此HTML文件，输出显示如下。