Aug
10
Framework7 – Messages ”; Previous Next Description Messages are component of Framework7, which gives visualization of comments and messaging system in the application. Messages Layout The framework7 has the following messages layout structure − <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> The layout contains the following classes in different areas − Messages Page Layout The following table shows the classes of messages page layout with description. 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. Single Message Inner Parts The following table shows the classes of simple message inner parts with description. 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. Additional classes for Single Message Container The following table shows additional classes for single message container description. 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). Additional Available Classes for Single Message The following table shows the available classes for a single message with description. 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). Initializing Messages with JavaScript You can initialize the messages with JavaScript by using the following method − myApp.messages(messagesContainer, parameters) The method takes two options − messagesContainer − It is a required HTML element or string that includes messages container HTML element. parameters − It specifies an object with messages parameters. Messages Parameters The following table shows the parameters of messages with description. 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 – Messages Properties The following table shows the properties of messages with description. 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. Messages Methods The following table shows the methods of messages with description. Given below is the list of methods of messages with description. 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