Framework7 - 创建和打开操作表

描述

由于操作表 (Action Sheet) 是一个动态元素，它只能使用 JavaScript 来创建和打开。下面列出了创建操作表的相关应用方法：

myApp.actions(groups) - 用于创建和打开具有指定数量按钮组的操作表。
myApp.actions(buttons) - 用于创建一个包含一个组和定义数量按钮的操作表。
- groups - 一个按钮组数组，每个组包含一个按钮数组。
- buttons - 一个按钮数组，其中只有一个组。
此方法将返回动态创建的操作表的 HTMLElement。

按钮数组中的每个按钮都必须以对象的形式呈现，其按钮参数如以下表格所示：

序号	参数及描述	类型	默认值
1	text 按钮文本的字符串。	字符串
2	粗体可选参数，设置为true时，使按钮文本加粗。	布尔值	false
3	color 可选参数，是 10 种默认按钮颜色之一。	字符串
4	bg 可选参数，是 10 种默认按钮背景颜色之一。	字符串
5	label 可选参数，如果设置为true，则它将是标题而不是按钮。	布尔值	true
6	disabled 可选参数，如果要禁用按钮，则将此参数设置为true。	布尔值	false
7	onClick 可选参数，是回调函数，每当用户点击此按钮时将执行。	函数

示例

以下示例演示了在 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>Create and open Action Sheet</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"> </div>
                        <div class = "center">Action Sheet</div>
                        <div class = "right"> </div>
                     </div>
                  </div>
                  
                  <div class = "page-content">
                     <div class = "content-block">
                        <p><a href = "#" class = "ac-1"><b>One group</b> with <b>three buttons</b></a></p>
                        
                        <p><a href = "#" class = "ac-2"><b>One group</b> with <b>title</b> and <b>three buttons</b></a></p>
                        
                        <p><a href = "#" class = "ac-3"><b>Two groups</b></a></p>
                        
                        <p><a href = "#" class = "ac-4"><b>Three groups</b></a></p>
                        
                        <p><a href = "#" class = "ac-5">With <b>callbacks</b> on click</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();
         var $$ = Dom7;

         $$('.ac-1').on('click', function () {
            var buttons = [
               {
                  text: 'Button1',
                  color: 'green'
               },
               {
                  text: 'Button2',
                  color: 'green'
               },
               {
                  text: 'Cancel',
                  color: 'red'
               },
            ];
            myApp.actions(buttons);
         });

         $$('.ac-2').on('click', function () {
            var buttons = [
               {
                  text: 'Some Text',
                  label: true
               },
               {
                  text: 'Button1',
                  color: 'pink'
               },
               {
                  text: 'Button2',
                  color: 'pink'
               },
               {
                  text: 'Cancel',
                  color: 'green'
               },
            ];
            myApp.actions(buttons);
         });

         $$('.ac-3').on('click', function () {
            var buttons1 = [
               {
                  text: 'Some Text',
                  label: true
               },
               {
                  text: 'Button1',
                  bold: true
               },
               {
                  text: 'Button2',
                  bold: true
               },
               {
                  text: 'Button3',
                  bold: true
               },
               {
                  text: 'Button4',
               }
            ];
            var buttons2 = [
               {
                  text: 'Cancel',
                  color: 'red'
               }
            ];
            var groups = [buttons1, buttons2];
            myApp.actions(groups);
         });

         $$('.ac-4').on('click', function () {
            var buttons1 = [
               {
                  text: 'Share',
                  label: true
               },
               {
                  text: 'Email',
               },
               {
                  text: 'Message',
               }
            ];
            var buttons2 = [
               {
                  text: 'Social Networks',
                  label: true
               },
               {
                  text: 'Facebook',
               },
               {
                  text: 'YouTube',
               }
            ];
            var buttons3 = [
               {
                  text: 'Cancel',
                  color: 'red'
               }
            ];
            var groups = [buttons1, buttons2, buttons3];
            myApp.actions(groups);
         });

         $$('.ac-5').on('click', function () {
            var buttons = [
               {
                  text: 'Callback Button1',
                  onClick: function () {
                     myApp.alert('Callback Button1 clicked');
                  }
               },
               {
                  text: 'Callback Button2',
                  onClick: function () {
                     myApp.alert('Callback Button2 clicked');
                  }
               },
               {
                  text: 'Cancel',
                  color: 'red',
                  onClick: function () {
                     myApp.alert('Cancel clicked');
                  }
               },
            ];
            myApp.actions(buttons);
         });
      </script>
   </body>

</html>

输出

让我们执行以下步骤来查看上述代码的工作原理：

将上述 HTML 代码保存为actionsheet_create_open.html文件到您的服务器根目录。
以 https:///actionsheet_create_open.html 的方式打开此 HTML 文件，输出结果如下所示。
单击第一个选项时，将创建一个包含三个按钮的一个组的操作表。
单击第二个选项时，将创建一个包含三个按钮和一个标题的一个组的操作表。
单击第三个选项时，将创建两个组；单击第四个选项时，将创建三个组。
在最后一个选项中，单击选项时会执行回调函数。

framework7_overlays.htm

打印页面