Framework7-消息 - 芒果文档

📌 相关文章

📜 Framework7-消息

📅 最后修改于: 2020-10-25 02:59:03 🧑 作者: Mango

描述

消息是Framework7的组件，它使应用程序中的注释和消息传递系统可视化。

讯息版面

framework7具有以下消息布局结构-



   
      
      Monday, Apr 26 10:30
      
      
      
         
         Hello
      
      
      
      
         
         How are you?
      
      
      
      
         
         Smith
         
         I am fine, thanks
         
         Tuesday, April 28 11:16

布局在不同区域包含以下类-

消息页面布局

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

S.No	Classes & Description
1	messages-content It is a required additional class added to “page-content” and used for messages wrapper.
2	messages It is a required element for messages bubbles.
3	messages-date It uses date stamp container to display date and time of message sent or received.
4	message It is a single message to be displayed.

单个消息内部

下表显示了带有说明的简单消息内部部分的类别。

S.No	Classes & Description
1	message-name It provides the sender name.
2	message-text Define the text with bubble type.
3	message-avatar It specifies the sender avatar.
4	message-label It specifies the text label below the bubble.

单消息容器的其他类

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

S.No	Classes & Description
1	message-sent It specifies that message was sent by the user and is displayed with green background color on the right side.
2	message-received It is used for displaying the single message indicating that, the message was received by user and stays on the left side with grey background color.
3	message-pic It is an additional class for displaying image with a single message.
4	message-with-avatar It is an additional class for displaying a single message (received or sent) with avatar.
5	message-with-tail You can add a bubble tail for single message (received or sent).

单个消息的其他可用类

下表显示了单个消息的可用类别及其说明。

S.No	Classes & Description
1	message-hide-name It is an additional class for hiding message name for a single message (received or sent).
2	message-hide-avatar It is an additional class for hiding message avatar for a single message (received or sent).
3	message-hide-label It is an additional class for hiding message label for a single message (received or sent).
4	message-last You can use this class to indicate the last received or sent message in current conversation by one sender for a single message (received or sent).
5	message-first You can use this class to indicate first received or first sent message in current conversation by one sender for a single message (received or sent).

使用JavaScript初始化消息

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

myApp.messages(messagesContainer, parameters)

该方法有两个选择-

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

消息参数

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

S.No	Parameter & Description	Type	Default
1	autoLayout It adds additional required classes to each message by enabling it.	boolean	true
2	newMessagesFirst You can display message on top instead of displaying on bottom by enabling it.	boolean	false
3	messages It displays an array of messages in which each message should be represented as object with message parameters.	array	–
4	messageTemplate It displays the single message template.	string	–

邮件属性

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

S.No	Property & Description
1	myMessages.params You can initialize the passed parameters with object.
2	myMessages.container Defines the DOM7 element with a message bar HTML container.

S.No

Property & Description

myMessages.params

You can initialize the passed parameters with object.

myMessages.container

Defines the DOM7 element with a message bar HTML container.

讯息方式

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

以下是带有说明的消息方法列表。

S.No	Method & Description
1	myMessages.addMessage(messageParameters, method, animate); The message can be added to the beginning or to the end by using the method parameter. It has the following parameters − messageParameters − It provides message parameters to add. method − It is a string type that adds message to the beginning or to the end of messages container. animate − It is a boolean type, which adds a message without any transition or scrolling animation by setting it to false. By default, it will be true.
2	myMessages.appendMessage(messageParameters, animate); It adds a message to the end of message container.
3	myMessages.prependMessage(messageParameters, animate); It adds a message to the beginning of message container.
4	myMessages.addMessages(messages, method, animate); You can add multiple messages at one time. It has the following parameter − messages − It provides an array of messages to add, which should be represented as object with message parameters.
5	myMessages.removeMessage(message); It is used to remove the message. It has the following parameter − message − It is a required HTML element or string that removes the message element.
6	myMessages.removeMessages(messages); You can remove the multiple messages. It has the following parameter − messages − It is a required array with HTML elements or string that removes the messages.
7	myMessages.scrollMessages(); You can scroll messages from top to bottom and vice versa depending on the first parameter of new message.
8	myMessages.layout(); Auto layout can be applied to the messages.
9	myMessages.clean(); It is used to clean the messages.
10	myMessages.destroy(); It is used to destroy the messages.

单个消息参数

下表显示了单个消息的参数及其说明。

S.No	Parameter & Description	Type	Default
1	text It defines the message text, which could be a HTML string.	string	–
2	name It specifies the sender name.	string	–
3	avatar It specifies the sender avatar URL string.	string	–
4	time It specifies the time string of the message like ‘9:45 AM’, ’18:35′.	string	–
5	type It provides type of message whether it could be sent or recieved message.	string	sent
6	label It defines the label of the message.	string	–
7	day It gives the day string of the message like ‘sunday’, ‘monday’, ‘yesterday’ etc.	string	–

用HTML初始化消息

可以通过使用附加信息，初始化类的消息初始化没有JavaScript与HTML的消息，并使用数据-属性来传递所需的参数，如图中的代码如下代码段给定-

例

以下示例演示了在Framework7中消息的用法-


      
      
      Messages
      
      
   

   
      
         
            
               
                  
                  
                     
                         
                        Messages
                         
                     
                  
                  
                  
                     
                        Send
                     
                  
                  
                  
                     
                        Friday, Apr 26 10:30
                        
                           Hello
                        
                        
                        
                           Happy Birthday
                        
                        
                        
                           Smith
                           Thank you
                           
                        
                        
                        Saturday, Apr 27 9:30
                        
                           Good Morning...
                        
                        
                        
                           
                           Delivered
                        
                        
                        
                           Smith
                           Very Good Morning...

输出

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

将以上给定的HTML代码另存为服务器根文件夹中的messages.html文件。
以http：//localhost/messages.html格式打开此HTML文件，并显示如下所示的输出。
当您在消息框中键入消息并单击“发送”按钮时，它指定您的消息已发送并在右侧以绿色背景色显示。
您收到的消息显示在左侧，带有灰色背景以及发件人姓名。