Framework7 - Messages 消息组件
描述
Messages(消息)是 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 它是添加到"page-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 指定消息由用户发送,右侧显示绿色背景色。 |
2 | message-received 用于显示单条消息,表示消息已被用户接收,左侧显示灰色背景色。 |
3 | message-pic 用于显示带有单条消息的图片的附加类。 |
4 | message-with-avatar 这是一个附加类,用于显示带有头像的单条消息(已接收或已发送)。 |
5 | message-with-tail 您可以为单条消息(已接收或已发送)添加气泡尾部。 |
单条消息的其他可用类
下表显示了单条消息的可用类及其说明。
S.No | 类&描述 |
---|---|
1 | message-hide-name 这是一个用于隐藏单个消息(已接收或已发送)的消息名称的附加类。 |
2 | message-hide-avatar 这是一个用于隐藏单个消息(已接收或已发送)的消息头像的附加类。 |
3 | message-hide-label 这是一个用于隐藏单个消息(已接收或已发送)的消息标签的附加类。 |
4 | message-last 您可以使用此类来指示当前对话中某个发送者针对单个消息(已接收或已发送)接收或发送的最后一条消息。 |
5 | message-first 您可以使用此类来指示当前对话中某个发送者针对单个消息(已接收或已发送)接收或发送的第一条消息。 |
使用 JavaScript 初始化消息
您可以使用以下方法用 JavaScript 初始化消息 −
myApp.messages(messagesContainer, parameters)
该方法采用两个选项 −
messagesContainer − 它是一个必需的 HTML 元素或字符串,其中包含消息容器 HTML 元素。
parameters −它指定一个带有消息参数的对象。
消息参数
下表显示了带有说明的消息参数。
S.No | 参数 &描述 | 类型 | 默认 |
---|---|---|---|
1 | autoLayout 通过启用它,它会向每条消息添加其他必需的类。 |
boolean | true |
2 | newMessagesFirst 您可以通过启用它来将消息显示在顶部而不是显示在底部。 |
boolean | false |
3 | messages 显示消息数组,其中每条消息应表示为带有消息参数的对象。 |
array | - |
4 | messageTemplate 显示单个消息模板。 |
string | - |
消息属性
下表显示了消息的属性及其说明。
S.No | 属性和说明 |
---|---|
1 | myMessages.params 您可以使用对象初始化传递的参数。 |
2 | myMessages.container 使用消息栏 HTML 容器定义 DOM7 元素。 |
消息方法
下表显示了带说明的消息方法。
S.No | 方法与说明 |
---|---|
1 | myMessages.addMessage(messageParameters, method, animate); 使用方法参数可将消息添加到开头或结尾。 其参数如下 −
|
2 | myMessages.appendMessage(messageParameters, animate); 它将一条消息添加到消息容器的末尾。 |
3 | myMessages.prependMessage(messageParameters, animate); 它将一条消息添加到消息容器的开头。 |
4 | myMessages.addMessages(messages, method, animate); 您可以一次添加多条消息时间。 它具有以下参数 −
|
5 | myMessages.removeMessage(message); 它用于删除消息。 它具有以下参数 −
|
6 | myMessages.removeMessages(messages); 您可以删除多条消息。 它具有以下参数 −
|
7 | myMessages.scrollMessages(); 您可以根据新消息的第一个参数从上到下滚动消息,反之亦然。 |
8 | myMessages.layout(); 可以对消息应用自动布局。 |
9 | myMessages.clean(); 用于清除消息。 |
10 | myMessages.destroy(); 用于销毁消息。 |
单条消息参数
下表显示了单条消息的参数及说明。
S.No | 参数 &描述 | 类型 | 默认 |
---|---|---|---|
1 | text 定义消息文本,可以是 HTML 字符串。 |
string | - |
2 | name 指定发件人姓名。 |
string | - |
3 | avatar 它指定发送者头像 URL 字符串。 |
string | - |
4 | time 它指定消息的时间字符串,如 '9:45 AM'、'18:35'。 |
string | - |
5 | type 它提供消息的类型,无论是发送还是接收消息。 |
string | 已发送 |
6 | label 它定义消息的标签。 |
string | - |
7 | day 它提供消息的日期字符串,如sunday', 'monday', 'yesterday' 等。 |
string | - |
使用 HTML 初始化消息
您可以通过使用 messages 的附加 messages-init 类,使用 HTML 初始化消息(无需 JavaScript),并使用 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; // 表示对话标志 var dialogueStarted = false; // 此处初始化消息 var myMessages = myApp.messages('.messages', { autoLayout:true }); // 初始化消息栏 var myMessagebar = myApp.messagebar('.messagebar'); // 点击按钮后显示文本 $$('.messagebar .link').on('click', function () { // 指定消息文本 var messageText = myMessagebar.value().trim(); // 如果没有消息,则退出 if (messageText.length === 0) return; // 指定空消息栏 myMessagebar.clear() // 定义随机消息类型 var messageType = (['sent', 'received'])[Math.round(Math.random())]; // 为收到的消息提供头像和名称 var avatar, name; if(messageType === 'received') { name = 'Smith'; } // 添加消息 myMessages.addMessage ({ // 提供消息文本 text: messageText, // 显示随机消息类型 type: messageType, // 指定发件人的头像和姓名 avatar: avatar, name: name, // 显示消息的日期和时间 day: !conversationStarted ? 'Today' : false, time: !conversationStarted ? (new Date()).getHours() + ':' + (new Date()).getMinutes() : false }) // 您可以在此处更新对话标志 conversationStarted = true; }); </script> </body> </html>
输出
让我们执行以下步骤来查看上述代码的工作原理 −
将上述 HTML 代码保存为服务器根文件夹中的 messages.html 文件。
将此 HTML 文件作为 http://localhost/messages.html 打开,输出显示如下。
当您在消息框中键入消息并单击"发送"按钮时,它会指定您的消息已发送并在右侧以绿色背景颜色显示。
您收到的消息与发件人姓名一起显示在左侧,背景为灰色。