Framework7-actionsheet-create-open

提供：Dev Guides
移動先:案内、検索

Framework7-アクションシートを作成して開く

説明

_Action Sheet_は動的な要素であるため、JavaScriptのみを使用して作成および開くことができます。 _Action Sheet_を作成する関連アプリのメソッドは以下のとおりです-

  • * myApp.actions（groups）*-指定された数のボタングループで_Action Sheet_を作成して開くために使用されます。
  • * myApp.actions（buttons）*-グループと定義された数のボタンで_Action Sheet_を作成して開くために使用されます。
  • groups -_groups_の配列であり、各グループには_buttonsの配列_が含まれます。
  • ボタン-それは_ボタンの配列_であり、そこでは1つのグループが存在します_。 +このメソッドは、_Action Sheet_の動的に作成されたHTMLElementを返します。

ボタンの配列内のすべてのボタンは、次の表にリストされているように、ボタンのパラメータを持つ_Object_として提示する必要があります

S.No Parameter & Description Type Default
1

text

これは、ボタンのテキストを含む文字列です。

string
2

bold

これはオプションのパラメーターであり、_true_に設定するとボタンのテキストが_bolder_になります。

boolean false
3

color

これはオプションのパラメーターであり、10個のデフォルトボタン色の1つです。

string
4

bg

これはオプションのパラメーターであり、10のデフォルトボタン背景色の1つです。

string
5

label

これはオプションのパラメーターであり、_true_に設定されている場合、ボタンではなくタイトルになります。

boolean true
6

disabled

これはオプションのパラメーターであり、ボタンを無効にする場合は、このパラメーターを_true_に設定します。

boolean false
7

onClick

これはオプションのパラメーターであり、ユーザーがこのボタンをクリックするたびに実行されるコールバック関数です。

function

例

次の例は、Framework7でのアクションシートの使用方法を示しています。リンクをクリックすると、1つのグループと指定した数のボタングループが表示されます- 

<!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_openl ファイルとしてサーバーのルートフォルダーに保存します。
  • このHTMLファイルをhttp：//localhost/actionsheet_create_openlとして開くと、出力は以下のように表示されます。
  • 最初のオプションをクリックすると、1つのグループに3つのボタンがあるアクションシートが作成されます。
  • 2番目のオプションをクリックすると、3つのボタンと1つのグループのタイトルを含むアクションシートが作成されます。
  • 3番目のオプションをクリックすると、2つのグループが作成され、4番目のオプションをクリックすると、3つのグループが作成されます。
  • 最後のオプションでは、オプションをクリックするとコールバック関数が実行されます。
「https://www.finddevguides.com/index.php?title=Framework7-actionsheet-create-open&oldid=30375」から取得
Powered by MediaWiki