Framework7 - 覆盖动态选择器模式

更新于 2025/1/8 22:22:17

描述

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

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

示例

以下示例演示了如何在 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 class="views">
         <div class="view view-main">
            <div class="navbar">
               <div class="navbar-inner">
                  <div class="center sliding">Dynamic Picker Modal</div>
               </div>
            </div>
            <div class="pages">
               <div data-page="index" class="page navbar-fixed">
                  <div class="page-content">
                     <div class="content-block">
                        <p><a href="#" class="create-modal-picker">Open Picker</a></p>
                        <p><a href="#" class="close-picker">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>
         // 您可以在此处初始化应用程序
         var myApp = new Framework7();

         // 如果您使用自定义 DOM 库，则将其保存到 $$ 变量
         var $$ = Dom7;

         // 添加视图
         var mainView = myApp.addView('.view-main', {
         // 为该视图启用动态导航栏:
            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 class="picker-modal">' +
               '<div class="toolbar">' +
               '<div class="toolbar-inner">' +
               '<div class="left"></div>' +
               '<div class="right"><a href="#" class="close-picker">Ok</a></div>' +
               '</div>' +
               '</div>' +
               '<div class="picker-modal-inner">' +
               '<div class="content-block">' +
               '<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>