framework7教程

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	类和描述
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 指定消息是用户发送的，右侧显示绿色背景色。 td>
2	message-received 用于显示单条消息，表示该消息已被用户接收并停留在左侧，背景颜色为灰色.
3	message-pic 它是一个附加的类，用于显示带有单个消息的图像。
4	message-with-avatar 这是一个附加的类，用于显示带有头像的单个消息（接收或发送）。
5	message-with-tail 您可以为单个消息（接收或发送）添加气泡尾。

单个消息的其他可用类

下表显示了带有描述的单个消息的可用类。

S.No	类和描述
1	message-hide-name 它是一个额外的类，用于隐藏单个消息（接收或发送）的消息名称。 td>
2	message-hide-avatar 它是一个额外的类，用于隐藏单个消息（接收或发送）的消息头像。 td>
3	message-hide-label 它是一个附加类，用于隐藏单个消息（接收或发送）的消息标签。 td>
4	message-last 你可以使用这个类来指示一个发件人在当前对话中最后收到或发送的一条消息（接收或发送).
5	message-first 你可以使用这个类来指示一个发送者在当前对话中第一个收到或第一个发送的消息（接收或发送).

使用 JavaScript 初始化消息

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

myApp.messages(messagesContainer, parameters)

该方法有两个选项-

messagesContainer-它是包含消息容器 HTML 元素的必需 HTML 元素或string。 parameters-它指定一个带有消息参数的对象。

消息参数

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

S.No	参数和说明	输入	默认
1	autoLayout 它通过启用它为每条消息添加额外的必需类。	boolean	true
2	newMessagesFirst 您可以通过启用消息在顶部显示而不是在底部显示。	boolean	false
3	messages 它显示一个消息array，其中每条消息都应表示为带有消息参数的对象。	array	-
4	messageTemplate 显示单个消息模板。	string	-

消息属性

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

S.No	属性和描述
1	myMessages.params 可以用对象初始化传入的参数。
2	myMessages.container 使用消息栏 HTML 容器定义 DOM7 元素。

消息方法

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

下面给出了带有描述的消息方法列表。

S.No	方法和说明
1	myMessages.addMessage(messageParameters, method, animate); 可以使用方法参数将消息添加到开头或结尾。它有以下参数- messageParameters-提供要添加的消息参数。 method-它是一种string类型，将消息添加到消息容器的开头或结尾。 animate-它是一种布尔类型，通过将其设置为 false 来添加没有任何过渡或滚动动画的消息。默认情况下，它将为 true。
2	myMessages.appendMessage(messageParameters, animate); 它在消息容器的末尾添加一条消息。
3	myMessages.prependMessage(messageParameters, animate); 它在消息容器的开头添加一条消息。
4	myMessages.addMessages(messages, method, animate); 您可以一次添加多条消息。它具有以下参数- messages-它提供了一个要添加的消息array，这些消息应该表示为带有消息参数的对象。
5	myMessages.removeMessage(message); 用于删除消息。它有以下参数- message-它是删除消息元素的必需 HTML 元素或string。
6	myMessages.removeMessages(messages); 您可以删除多条消息。它具有以下参数- messages-它是一个必需的array，其中包含删除消息的 HTML 元素或string。
7	myMessages.scrollMessages(); 您可以根据新消息的第一个参数从上到下滚动消息，反之亦然。
8	myMessages.layout(); 可以对消息应用自动布局。
9	myMessages.clean(); 用于清理消息。
10	myMessages.destroy(); 用于销毁消息。

单个消息参数

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

S.No	参数和说明	输入	默认
1	text 它定义了消息文本，可以是一个 HTML string。	string	-
2	name 指定发件人姓名。	string	-
3	avatar 指定发件人头像 URL string。	string	-
4	time 它指定消息的时间string，如'9:45 AM'、'18:35'。	string	-
5	type 它提供消息的类型，是否可以发送或接收消息。	string	sent
6	label 它定义了消息的标签。	string	-
7	day 它给出消息的日期string，如"sunday"、"monday"、"yesterday"等。	string	-

用 HTML 初始化消息

您可以在没有 JavaScript 的情况下使用 HTML 初始化消息，方法是使用附加的 messages-init 类到 messages 并使用 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 代码保存为服务器根文件夹中的 messages.html 文件。将此 HTML 文件打开为 http://localhost/messages.html，输出如下所示。当您在消息框中键入消息并单击"发送"按钮时，它指定您的消息已发送并在右侧显示为绿色背景。您收到的消息显示在左侧，带有灰色背景和发件人姓名。

找工作要求35岁以下，35岁以上的程序员都干什么去了？

长久以来，一直有一个问题困扰着技术人——如何打破“程序员的35岁职业魔咒”，这一天迟早会到来，或早或晚。

或许是选错了行业，程序员薪水虽高，但光鲜的外表下，背后的苦衷只有自己知道。三十多岁本该是一个人事业的黄金期，但技术变化日新月异，行业竞争异常残酷，对一个企业来说，永远有比你更年轻、劳动成本更低的人可以选择，这让你的中年危机提前到来。破局的智慧可以看看这本书！>>

<< Framework7 无限滚动 Framework7 消息栏 >>

昵称：邮箱：