目录
  1. WIKI教程
  2. 学习Framework7
  3. Framework7 - 消息( Messages)

Framework7 - 消息( Messages)

描述 (Description)

消息是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 课程和描述
1

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

您可以使用此类来指示一个发件人在当前会话中针对单个消息（已接收或已发送）的最后收到或发送的消息。

5

message-first

您可以使用此类来指示一个发件人在当前会话中针对单个消息（已接收或已发送）首先收到或首次发送的消息。

使用JavaScript初始化消息

您可以使用以下方法使用JavaScript初始化消息 - 

myApp.messages(messagesContainer, parameters)

该方法有两种选择 -

  • messagesContainer - 它是一个必需的HTML元素或字符串，包含消息容器HTML元素。

  • parameters - 它指定带有消息参数的对象。

消息参数

下表显示了带描述的消息的参数。

S.No 参数和描述 类型 默认
1

autoLayout

它通过启用它为每条消息添加了额外的必需类。

booleantrue
2

newMessagesFirst

您可以在顶部显示消息，而不是通过启用它在底部显示。

booleanfalse
3

messages

它显示一组消息，其中每条消息都应表示为带有消息参数的对象。

array-
4

messageTemplate

它显示单个消息模板。

string-

消息属性

下表显示了带描述的消息的属性。

S.No 财产和描述
1

myMessages.params

您可以使用object初始化传递的参数。

2

myMessages.container

使用消息栏HTML容器定义DOM7元素。

消息方法

下表显示了带描述的消息的方法。

S.No 方法和描述
1

myMessages.addMessage(messageParameters, method, animate);

可以使用method参数将消息添加到开头或结尾。

它有以下参数 -

  • messageParameters - 它提供要添加的消息参数。

  • method - 这是一种字符串类型，它将消息添加到消息容器的开头或结尾。

  • animate - 它是一个布尔类型，通过将其设置为false来添加没有任何转换或滚动动画的消息。 默认情况下，它将是真的。

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字符串。

string-
2

name

它指定发件人名称。

string-
3

avatar

它指定发件人头像URL字符串。

string-
4

time

它指定消息的时间字符串，如'9:45 AM'，'18:35'。

string-
5

type

它提供的消息类型是否可以发送或接收消息。

stringsent
6

label

它定义了消息的标签。

string-
7

day

它给出了消息的日期字符串，如'sunday'，'monday'，'yesterday'等。

string-

使用HTML初始化消息

您可以使用HTML而不使用JavaScript来初始化消息，方法是使用附加的messages-init类messages并使用data- attributes传递所需的参数，如下面的代码片段所示 - 

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

例子 (Example)

以下示例演示了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>

输出 (Output)

让我们执行以下步骤，看看上面给出的代码是如何工作的 -

  • 将上面给出的HTML代码保存为服务器根文件夹中的messages.html文件。

  • 以http://localhost/messages.html打开此HTML文件，输出显示如下。

  • 当您在消息框中键入消息并单击“发送”按钮时，它会指定您的消息已发送并在右侧以绿色背景显示。

  • 您收到的消息显示在左侧，带有灰色背景和发件人姓名。

新页面打开
<上一篇.Framework7 - 无限滚动( Infinite Scroll)
Framework7 - 消息栏( Message Bar).下一篇>
↑回到顶部↑
WIKI教程 @2018