HTML CSS JAVASCRIPT PYTHON PYTHON2 JAVA C C++ C# SQL Excel Linux AI BOOTSTRAP PHP 教程库 参考手册 技术文章 测验 练习 HOWTO FAQ
❮ 上一节 下一节 ❯

Framework7 - Messages 消息组件

描述

Messages(消息)是 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

它是添加到"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

您可以使用此类来指示当前对话中某个发送者针对单个消息(已接收或已发送)接收或发送的最后一条消息。
5

message-first

您可以使用此类来指示当前对话中某个发送者针对单个消息(已接收或已发送)接收或发送的第一条消息。

使用 JavaScript 初始化消息

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

myApp.messages(messagesContainer, parameters)

该方法采用两个选项 −

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

  • parameters −它指定一个带有消息参数的对象。

消息参数

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

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

autoLayout

通过启用它，它会向每条消息添加其他必需的类。

 boolean true
2

newMessagesFirst

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

 boolean false
3

messages

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

 array -
4

messageTemplate

显示单个消息模板。

 string -

消息属性

下表显示了消息的属性及其说明。

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

 string -
2

name

指定发件人姓名。

 string -
3

avatar

它指定发送者头像 URL 字符串。

 string -
4

time

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

 string -
5

type

它提供消息的类型，无论是发送还是接收消息。

 string 已发送
6

label

它定义消息的标签。

 string -
7

day

它提供消息的日期字符串，如sunday', 'monday', 'yesterday' 等。

 string -

使用 HTML 初始化消息

您可以通过使用 messages 的附加 messages-init 类，使用 HTML 初始化消息(无需 JavaScript)，并使用 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;

        // 表示对话标志
        var dialogueStarted = false;
        
        // 此处初始化消息
        var myMessages = myApp.messages('.messages', {
        autoLayout:true
        });
        
        // 初始化消息栏
        var myMessagebar = myApp.messagebar('.messagebar');
        
        // 点击按钮后显示文本
        $$('.messagebar .link').on('click', function () {
                     
            // 指定消息文本
            var messageText = myMessagebar.value().trim();
            
            // 如果没有消息，则退出
            if (messageText.length === 0) return;
            
            // 指定空消息栏
            myMessagebar.clear()
            
            // 定义随机消息类型
            var messageType = (['sent', 'received'])[Math.round(Math.random())];
            
            // 为收到的消息提供头像和名称
            var avatar, name;
            
            if(messageType === 'received') {
            name = 'Smith';
            }
            
            // 添加消息
            myMessages.addMessage ({
                            
                // 提供消息文本
                text: messageText,
                
                // 显示随机消息类型
                type: messageType,
                
                // 指定发件人的头像和姓名
                avatar: avatar,
                name: name,
                
                // 显示消息的日期和时间
                day: !conversationStarted ? 'Today' : false,
                time: !conversationStarted ? (new Date()).getHours() + ':' + (new Date()).getMinutes() : false
            })

            // 您可以在此处更新对话标志
            conversationStarted = true;
         });

      </script>
   </body>

</html>

输出

让我们执行以下步骤来查看上述代码的工作原理 −

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

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

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

  • 您收到的消息与发件人姓名一起显示在左侧，背景为灰色。

❮ 上一节 下一节 ❯