Framework7 - 创建并打开操作表

更新于 2025/1/7 10:37:17

说明

由于操作表是一个动态元素，因此只能使用 JavaScript 创建和打开它。相关应用程序创建操作表的方法列在下面 −

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

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

S.No	参数 &描述	类型	默认
1	text 这是按钮文本的字符串。	string
2	bold 这是可选参数，当设置为 true 时，会使按钮的文本加粗。	boolean	false
3	color 这是一个可选参数，它是 10 种默认按钮颜色之一。	string
4	bg 这是一个可选参数，它是 10 种默认按钮背景颜色之一。	string
5	label 这是一个可选参数，如果设置为 true，那么它将是标题而不是按钮。	boolean	true
6	disabled 这是一个可选参数，如果您想禁用按钮，请将此参数设置为 true。	boolean	false
7	onClick 这是一个可选参数，是每当用户单击此按钮时都会执行的回调函数。	function

示例

以下示例演示了 Framework7 中 Action Sheet 的使用，单击链接时会显示一组按钮和指定数量的按钮组 −

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