Framework7-messages

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

Framework7-メッセージ

説明

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

メッセージのレイアウト

framework7には、次のメッセージレイアウト構造があります- 

<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 Classes & Description
1

messages-content

これは、「ページコンテンツ」に追加され、メッセージラッパーに使用される必須の追加クラスです。

2

messages

これは、メッセージバブルの必須要素です。

3

messages-date

日付スタンプコンテナを使用して、送受信されたメッセージの日付と時刻を表示します。

4

message

表示されるのは単一のメッセージです。

単一メッセージの内部部品

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

S.No Classes & Description
1

message-name

送信者名を提供します。

2

message-text

バブルタイプでテキストを定義します。

3

message-avatar

送信者のアバターを指定します。

4

message-label

バブルの下のテキストラベルを指定します。

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

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

S.No Classes & Description
1

message-sent

これは、メッセージがユーザーによって送信され、右側に緑色の背景色で表示されることを指定します。

2

message-received

これは、メッセージがユーザーによって受信され、灰色の背景色で左側に留まっていることを示す単一のメッセージを表示するために使用されます。

3

message-pic

これは、単一のメッセージで画像を表示するための追加のクラスです。

4

message-with-avatar

これは、アバターで単一のメッセージ（受信または送信）を表示するための追加のクラスです。

5

message-with-tail

単一のメッセージ（受信または送信）にバブルテールを追加できます。

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

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

S.No Classes & Description
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要素または文字列です。
  • パラメータ-メッセージのパラメータを持つオブジェクトを指定します。

メッセージパラメータ

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

S.No Parameter & Description Type Default
1

autoLayout

有効にすることで、各メッセージに必要なクラスを追加します。

boolean true
2

newMessagesFirst

有効にすると、メッセージを下部に表示する代わりに上部に表示できます。

boolean false
3

messages

各メッセージがメッセージパラメータを持つオブジェクトとして表されるメッセージの配列を表示します。

array -
4

messageTemplate

単一のメッセージテンプレートが表示されます。

string -

メッセージのプロパティ

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

S.No Property & Description
1

myMessages.params

渡されたパラメーターをオブジェクトで初期化できます。

2

myMessages.container

メッセージバーHTMLコンテナでDOM7要素を定義します。

メッセージメソッド

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

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

S.No Method & Description
1

myMessages.addMessage(messageParameters, method, animate);

methodパラメーターを使用して、メッセージを先頭または末尾に追加できます。

次のパラメータがあります-

  • 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 Parameter & Description Type Default
1

text

メッセージテキストを定義します。これはHTML文字列にすることもできます。

string -
2

name

送信者名を指定します。

string -
3

avatar

送信者のアバターURL文字列を指定します。

string -
4

time

「9:45 AM」、「18:35」などのメッセージの時間文字列を指定します。

string -
5

type

メッセージを送信できるか受信したかに関係なく、メッセージのタイプを提供します。

string sent
6

label

メッセージのラベルを定義します。

string -
7

day

「日曜日」、「月曜日」、「昨日」などのメッセージの曜日文字列を提供します。

string -

HTMLを使用したメッセージの初期化

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

...
   <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コードを messagesl ファイルとしてサーバーのルートフォルダーに保存します。
  • このHTMLファイルをhttp：//localhost/messageslとして開くと、出力は以下のように表示されます。
  • メッセージボックスにメッセージを入力して[送信]ボタンをクリックすると、メッセージが送信され、右側に緑色の背景色で表示されることが指定されます。
  • 受信したメッセージは、送信者名とともに灰色の背景とともに左側に表示されます。
「https://www.finddevguides.com/index.php?title=Framework7-messages&oldid=30456」から取得
Powered by MediaWiki