<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
你可以使用这个类来指示一个发送者在当前对话中第一个收到或第一个发送的消息(接收或发送).
|
myApp.messages(messagesContainer, 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 | - |
... <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> ...
<!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>