Framework7-メッセージ

説明

メッセージはFramework7のコンポーネントであり、アプリケーション内のコメントとメッセージングシステムを視覚化できます。

メッセージレイアウト

フレームワーク7のメッセージレイアウト構造は次のとおりです。

<div class = "page">
<div class = "page-content messages-content">
   <div class = "messages">
      <!-- Defines the date stamp -->
      <div class = "messages-date">Monday, Apr 26 <span>10:30</span></div>
      
      <!-- Displays the sent message and by default, it will be in green color on right side -->
      <div class = "message message-sent">
         <!-- Define the text with bubble type -->
         <div class = "message-text">Hello</div>
      </div>
      
      <!-- Displays the another sent message -->
      <div class = "message message-sent">
         <!-- Define the text with bubble type -->
         <div class = "message-text">How are you?</div>
      </div>
      
      <!-- Displays the received message and by default, it will be in grey color on left side -->
      <div class = "message message-with-avatar message-received">
         <!-- Provides sender name -->
         <div class = "message-name">Smith</div>
         <!--  Define the text with bubble type -->
         <div class = "message-text">I am fine, thanks</div>
         <!-- Defines the another date stamp -->
         <div class = "messages-date">Tuesday, April 28 <span>11:16</span></div>
      </div>
      
   </div>
</div>

レイアウトには、さまざまな領域に次のクラスが含まれています-

メッセージページのレイアウト

次の表に、メッセージのクラスのページレイアウトと説明を示します。

S.No	クラスと説明
1	messages-content これは、「page-content」に追加され、メッセージラッパーに使用される必須の追加クラスです。
2	messages メッセージバブルに必須の要素です。
3	messages-date 日付スタンプコンテナを使用して、送受信されたメッセージの日付と時刻を表示します。
4	message 表示されるのは単一のメッセージです。

シングルメッセージインナーパーツ

次の表に、簡単なメッセージ内部パーツのクラスと説明を示します。

S.No	クラスと説明
1	message-name 送信者名を提供します。
2	message-text バブルタイプでテキストを定義します。
3	message-avatar 送信者のアバターを指定します。
4	message-label バブルの下のテキストラベルを指定します。

シングルメッセージコンテナの追加クラス

次の表は、単一メッセージコンテナの説明のための追加のクラスを示しています。

S.No	クラスと説明
1	message-sent これは、メッセージがユーザーによって送信されたことを指定し、右側に緑色の背景色で表示されます。
2	message-received これは、メッセージがユーザーによって受信され、灰色の背景色で左側にとどまっていることを示す単一のメッセージを表示するために使用されます。
3	message-pic これは、単一のメッセージで画像を表示するための追加のクラスです。
4	message-with-avatar これは、アバターで単一のメッセージ（受信または送信）を表示するための追加のクラスです。
5	message-with-tail 単一のメッセージ（受信または送信）にバブルテールを追加できます。

単一メッセージで使用可能な追加のクラス

次の表は、説明付きの単一メッセージで使用可能なクラスを示しています。

S.No	クラスと説明
1	message-hide-name これは、単一のメッセージ（受信または送信）のメッセージ名を非表示にするための追加のクラスです。
2	message-hide-avatar これは、単一のメッセージ（受信または送信）のメッセージアバターを非表示にするための追加のクラスです。
3	message-hide-label これは、単一のメッセージ（受信または送信）のメッセージラベルを非表示にするための追加のクラスです。
4	message-last このクラスを使用して、1つのメッセージ（受信または送信）に対して1人の送信者が現在の会話で最後に受信または送信したメッセージを示すことができます。
5	message-first このクラスを使用して、1つのメッセージ（受信または送信）に対して1人の送信者が現在の会話で最初に受信または最初に送信したメッセージを示すことができます。

JavaScriptでメッセージを初期化する

次の方法を使用して、JavaScriptでメッセージを初期化できます-

myApp.messages(messagesContainer, parameters)

この方法には2つのオプションがあります-

messagesContainer −メッセージコンテナのHTML要素を含む必須のHTML要素または文字列です。
parameters −メッセージパラメータでオブジェクトを指定します。

メッセージパラメータ

次の表に、メッセージのパラメータと説明を示します。

S.No	パラメータと説明	タイプ	デフォルト
1	autoLayout メッセージを有効にすることで、各メッセージに必要なクラスを追加します。	ブール値	true
2	newMessagesFirst メッセージを有効にすると、メッセージを下に表示する代わりに上に表示できます。	ブール値	false
3	messages これは、各メッセージがメッセージパラメータを持つオブジェクトとして表される必要があるメッセージの配列を表示します。	アレイ	-
4	messageTemplate 単一のメッセージテンプレートが表示されます。	ストリング	-

メッセージのプロパティ

次の表に、メッセージのプロパティと説明を示します。

S.No	プロパティと説明
1	myMessages.params 渡されたパラメータはオブジェクトで初期化できます。
2	myMessages.container メッセージバーのHTMLコンテナを使用してDOM7要素を定義します。

メッセージメソッド

次の表に、メッセージの方法と説明を示します。

以下に、説明付きのメッセージのメソッドのリストを示します。

S.No	方法と説明
1	myMessages.addMessage(messageParameters, method, animate); メソッドパラメータを使用して、メッセージを最初または最後に追加できます。次のパラメータがあります- messageParameters −追加するメッセージパラメータを提供します。 method −メッセージコンテナの先頭または末尾にメッセージを追加する文字列型です。 animate−これはブール型であり、falseに設定することにより、遷移やスクロールアニメーションなしでメッセージを追加します。デフォルトでは、trueになります。
2	myMessages.appendMessage(messageParameters, animate); メッセージコンテナの最後にメッセージを追加します。
3	myMessages.prependMessage(messageParameters, animate); メッセージコンテナの先頭にメッセージを追加します。
4	myMessages.addMessages(messages, method, animate); 一度に複数のメッセージを追加できます。次のパラメータがあります- messages −追加するメッセージの配列を提供します。これは、メッセージパラメータを持つオブジェクトとして表す必要があります。
5	myMessages.removeMessage(message); メッセージを削除するために使用されます。次のパラメータがあります- message −メッセージ要素を削除するのは必須のHTML要素または文字列です。
6	myMessages.removeMessages(messages); 複数のメッセージを削除できます。次のパラメータがあります- messages −メッセージを削除するのはHTML要素または文字列を含む必須の配列です。
7	myMessages.scrollMessages(); 新しいメッセージの最初のパラメータに応じて、メッセージを上から下に、またはその逆にスクロールできます。
8	myMessages.layout(); 自動レイアウトをメッセージに適用できます。
9	myMessages.clean(); メッセージをクリーンアップするために使用されます。
10	myMessages.destroy(); メッセージを破棄するために使用されます。

単一メッセージパラメータ

次の表は、説明付きの単一メッセージのパラメーターを示しています。

S.No	パラメータと説明	タイプ	デフォルト
1	text HTML文字列である可能性のあるメッセージテキストを定義します。	ストリング	-
2	name 送信者名を指定します。	ストリング	-
3	avatar 送信者のアバターのURL文字列を指定します。	ストリング	-
4	time 「9:45 AM」、「18：35」のようなメッセージの時間文字列を指定します。	ストリング	-
5	type メッセージを送信できるか受信できるかを示すメッセージのタイプを提供します。	ストリング	送信
6	label メッセージのラベルを定義します。	ストリング	-
7	day 'sunday'、 'monday'、 'yesterday'などのメッセージの日文字列を提供します。	ストリング	-

HTMLでメッセージを初期化する

以下に示すコードスニペットに示すように、追加のmessages-initクラスをメッセージに使用し、data-属性を使用して必要なパラメーターを渡すことにより、JavaScriptを使用せずにHTMLでメッセージを初期化できます。

...
   <div class = "page-content messages-content">
      <!-- Initialize the messages using additional "messages-init" class-->
      <div class = "messages messages-init" data-auto-layout = "true" data-new-messages-first = "false">
         ...

      </div>
   </div>
...

例

次の例は、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>Messages</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 toolbar-fixed">
                  
                  <div class = "navbar">
                     <div class = "navbar-inner">
                        <div class = "left"> </div>
                        <div class = "center">Messages</div>
                        <div class = "right"> </div>
                     </div>
                  </div>
                  
                  <div class = "toolbar messagebar">
                     <div class = "toolbar-inner">
                        <textarea placeholder = "Message"></textarea><a href = "#" class = "link">Send</a>
                     </div>
                  </div>
                  
                  <div class = "page-content messages-content">
                     <div class = "messages">
                        <div class = "messages-date">Friday, Apr 26 <span>10:30</span></div>
                        <div class = "message message-sent">
                           <div class = "message-text">Hello</div>
                        </div>
                        
                        <div class = "message message-sent">
                           <div class = "message-text">Happy Birthday</div>
                        </div>
                        
                        <div class = "message message-received">
                           <div class = "message-name">Smith</div>
                           <div class = "message-text">Thank you</div>
                           <div style = "background-image:url(/framework7/images/person.png)" class = "message-avatar"></div>
                        </div>
                        
                        <div class = "messages-date">Saturday, Apr 27 <span>9:30</span></div>
                        <div class = "message message-sent">
                           <div class = "message-text">Good Morning...</div>
                        </div>
                        
                        <div class = "message message-sent">
                           <div class = "message-text"><img src = "/framework7/images/gm.jpg"></div>
                           <div class = "message-label">Delivered</div>
                        </div>
                        
                        <div class = "message message-received">
                           <div class = "message-name">Smith</div>
                           <div class = "message-text">Very Good Morning...</div>
                           <div style = "background-image:url(/framework7/images/person.png)" class = "message-avatar"></div>
                        </div>
                     </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;

         // It indicates conversation flag
         var conversationStarted = false;

         // Here initiliaze the messages
         var myMessages = myApp.messages('.messages', {
            autoLayout:true
         });

         // Initiliaze the messagebar
         var myMessagebar = myApp.messagebar('.messagebar');

         // Displays the text after clicking the button
         $$('.messagebar .link').on('click', function () {
         
            // specifies the message text
            var messageText = myMessagebar.value().trim();
            
            // If there is no message, then exit from there
            if (messageText.length === 0) return;

            // Specifies the empty messagebar
            myMessagebar.clear()

            // Defines the random message type
            var messageType = (['sent', 'received'])[Math.round(Math.random())];

            // Provides the avatar and name for the received message
            var avatar, name;
            
            if(messageType === 'received') {
               name = 'Smith';
            }
            
            // It adds the message
            myMessages.addMessage ({
            
               // It provides the message text
               text: messageText,
            
               // It displays the random message type
               type: messageType,
            
               // Specifies the avatar and name of the sender
               avatar: avatar,
               name: name,
            
               // Displays the day, date and time of the message
               day: !conversationStarted ? 'Today' : false,
               time: !conversationStarted ? (new Date()).getHours() + ':' + (new Date()).getMinutes() : false
            })

            // Here you can update the conversation flag
            conversationStarted = true;
         });

      </script>
   </body>

</html>

出力

上記のコードがどのように機能するかを確認するために、次の手順を実行してみましょう-

上記のHTMLコードを次のように保存します messages.html サーバーのルートフォルダにあるファイル。
このHTMLファイルをhttp：//localhost/messages.htmlとして開くと、出力が次のように表示されます。
メッセージボックスにメッセージを入力して[送信]ボタンをクリックすると、メッセージが送信されたことを示し、右側に緑色の背景色で表示されます。
受信したメッセージは、送信者名とともに灰色の背景で左側に表示されます。