Framework7 Messages
Framework7 Messages are the components which are used for comment and messaging system in the application.
Messages layout
Messages Page Layout
Following is a list of classes of messages page layout:
- "messages-content": It is a required additional class added to "page-content" and used for messages wrapper.
- "messages": It is also a required additional wrapper for messages bubbles.
- "messages-date": It uses date stamp container to display date and time of message sent or received.
- "message": It is used to display single message.
Single Message Inner Parts
Following are the classes of simple message inner parts:
- message-name: It is used to provide the sender name.
- message-text: It is used to define the text with bubble type.
- message-avatar: It is used to specify the sender avatar.
- message-label: It is used to specify the text label below the bubble.
Additional classes for Single Message Container
A list of additional classes for single message container:
Index |
Class |
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
Index |
Class |
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). |
Initialize Messages with JavaScript
The following method is used to initialize the messages with JavaScript:
Here:
- 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
Index |
Parameter |
Type |
Description |
1) |
autoLayout |
boolean |
It adds additional required classes to each message by enabling it. |
2) |
newMessagesFirst |
boolean |
You can display message on top instead of displaying on bottom by enabling it. |
3) |
messages |
array |
It displays an array of messages in which each message should be represented as object with message parameters. |
4) |
messageTemplate |
string |
It displays the single message template. |
Message Methods
Following is a list of message methods:
Index |
Method |
Description |
1) |
myMessages.addMessage(messageParameters, method, animate); |
Add new message to the end or to the beginning depending on method parameter:
messageParameters: object parameters of message to add. Required.
method - string: ('append' or 'prepend') dictates to add new message in the end or in the beginning of messages container. Optional, if not specified, then it will add message depending on newMessagesFirst parameter
animate - boolean: (by default true) You may pass here false and message will be added immediately without any transiton and scrolling animation. Optional.
Method returns HTMLElement of added messsage |
2) |
myMessages.appendMessage(messageParameters, animate); |
Add new message to the end (to the bottom) |
3) |
myMessages.prependMessage(messageParameters, animate); |
Add new message to the beginning (to the top) |
4) |
myMessages.addMessages(messages, method, animate); |
Add multiple messages per once.
Messages: array with messages to add. Each message in array should be presented as object with message parameters Required.
Method returns array of HTMLElements with added messsages |
5) |
myMessages.removeMessage(message); |
Remove message
message: HTMLElement or string (with CSS Selector) of message element to remove. Required
Method returns true if specified message was removed |
6) |
myMessages.removeMessages(messages); |
Remove multiple messages
messages: array (with HTMLElements) or string (with CSS Selector) of messages to remove. Required
Method returns true if specified messages was removed. |
7) |
myMessages.scrollMessages(); |
Scroll messages to top/bottom depending on newMessagesFirst parameter |
8) |
myMessages.layout(); |
Apply messages auto layout |
9) |
myMessages.clean(); |
Clean/remove all the messages |
10) |
myMessages.destroy(); |
Destroy messages instance |
Example
Test it Now
|