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>

该布局在不同的区域包含以下类 −

消息页面布局

下表显示了消息页面布局的类以及说明。

序号	类和说明
1	messages-content 这是添加到“page-content”中的必需的附加类，用于消息包装器。
2	messages 这是消息气泡的必需元素。
3	messages-date 它使用日期戳容器显示发送或接收消息的日期和时间。
4	message 它是要显示的单个消息。

单个消息内部部分

下表显示了简单消息内部部分的类以及说明。

序号	类和说明
1	message-name 它提供发件人姓名。
2	message-text 使用气泡类型定义文本。
3	message-avatar 它指定发件人头像。
4	message-label 它指定气泡下方文本标签。

单个消息容器的附加类

下表显示了单个消息容器描述的附加类。

序号	类和说明
1	message-sent 它指定消息是由用户发送的，并在右侧以绿色背景颜色显示。
2	message-received 用于显示单个消息，指示该消息是用户接收的，并保留在左侧，背景颜色为灰色。
3	message-pic 它是显示单个消息图像的附加类。
4	message-with-avatar 它是显示单个消息（接收或发送）和头像的附加类。
5	message-with-tail 你可以在单条信息（接收或发送）中添加气泡尾巴。

适用于单条信息的附加可用类

下表显示了适用于单条信息且带有说明的可用类。

序号	类和说明
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 − 它指定具有消息参数的对象。

消息参数

下表显示了具有说明的消息参数。

序号	参数和说明	类型	默认
1	autoLayout 启用 autoLayout 后，它将对每条信息添加所需的附加类。	布尔值	true
2	newMessagesFirst 启用 newMessagesFirst 后，你可以在顶部显示信息，而不是在底部显示信息。	布尔值	false
3	messages 它显示一个由表示为具有消息参数的对象的信息组成的数组。	数组	-
4	messageTemplate 它显示单条信息模板。	字符串	-

信息属性

下表显示了具有说明的消息属性。

序号	属性及说明
1	myMessages.params 你可以使用对象初始化传递的参数。
2	myMessages.container 定义带有消息栏 HTML 容器的 DOM7 元素。

序号

属性及说明

myMessages.params

你可以使用对象初始化传递的参数。

myMessages.container

定义带有消息栏 HTML 容器的 DOM7 元素。

信息方法

下表显示了具有说明的消息方法。

下面列出了具有说明的消息方法。

序号	方法和说明
1	myMessages.addMessage(messageParameters, method, animate); 可以使用 method 参数将信息添加到开头或结尾。它具有以下参数 − messageParameters − 它提供要添加的消息参数。 method − 它是一种字符串类型，可以将信息添加到消息容器的开头或结尾。 animate − 它是一种布尔类型，通过将 animate 设置为 false 来添加一条没有过渡或滚动动画的信息。默认情况下，animate 为 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); 你可以删除多条信息。它具有以下参数 − 消息 − 这是一个必需的数组，它包含用于移除消息的 HTML 元素或字符串。
7	myMessages.scrollMessages(); 你可以根据新消息的第一个参数从上到下或从下到上滚动消息。
8	myMessages.layout(); 消息可以应用自动布局。
9	myMessages.clean(); 它用于清理消息。
10	myMessages.destroy(); 它用于销毁消息。

单个消息参数

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

序号	参数和说明	类型	默认
1	text 它定义消息文本，它可以是 HTML 字符串。	字符串	-
2	name 它指定发件人名称。	字符串	-
3	avatar 它指定发件人头像的 URL 字符串。	字符串	-
4	time 它指定消息的时间字符串，如“9:45 AM”、“18:35”。	字符串	-
5	type 它提供消息的类型，它可以是已发送或已接收的消息。	字符串	sent
6	label 它定义消息的标签。	字符串	-
7	day 它提供消息的日期字符串，如“星期日”、“星期一”、“昨天”等。	字符串	-

使用 HTML 初始化消息

你可以使用附加的 messages-init 类将 messages 放在 HTML 中，并且使用 data- 属性来传递所需参数，如下面给出的代码片段中所示，而无需 JavaScript 来初始化消息。

...
   <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 文件，并保存在你的服务器根文件夹中。
以 https://127.0.0.1/messages.html 的形式打开此 HTML 文件，输出将显示如下。
当你在消息框中输入消息并单击发送按钮时，它指定你的消息已发送，并在右侧以绿色背景色显示。
你接收到的消息与发件人名称一起显示在左侧，背景为灰色。

打印页面