消息是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 | Classes&说明 |
|---|---|
| 1 | messages-content 这是一个必需的附加类，添加到"page-content"并用于消息包装. |
| 2 | 消息 这是消息泡沫的必需元素. |
| 3 | messages-date 它使用日期戳容器显示发送的消息的日期和时间或收到. |
| 4 | 消息 这是一条要显示的消息. |
下表显示了包含描述的简单消息内部部件的类.
| S.No | Classes&说明 |
|---|---|
| 1 | 消息名称 它提供发件人姓名. |
| 2 | 消息文本 用泡泡定义文本类型. |
| 3 | 消息头像 它指定发件人头像. |
| 4 | 消息标签 它指定了气泡下方的文本标签. |
下表显示了单个消息容器描述的其他类.
| S.No | Classes&说明 |
|---|---|
| 1 | 消息发送 它指定消息是由用户发送的，并在右侧以绿色背景颜色显示. |
| 2 | 收到消息 它用于显示单个消息，表明该消息已被用户接收并保留在左侧，背景为灰色. |
| 3 | message-pic 这是一个用于显示带有单条信息的图像的附加类. |
| 4 | 消息与头像 这是一个额外的课程用头像显示单个消息(接收或发送). |
| 5 | 消息与尾巴 您可以为单个消息添加一个气泡尾部(recei) ved或发送). |
下表显示了包含说明的单个邮件的可用类.
| S.No | Classes&说明 |
|---|---|
| 1 | message-hide-name 这是一个用于隐藏单个邮件(已接收或已发送)的邮件名称的附加类. |
| 2 | message-hide-avatar 这是一个额外的类，用于隐藏单个消息(接收或发送)的消息头像. |
| 3 | message-hide-label 这是隐藏单个消息(已接收或已发送)的消息标签的附加类. |
| 4 | message-last 您可以使用此课程来指示一个发件人在当前会话中为单个消息(已接收或已发送)发送的最后一条消息. |
| 5 | 消息优先 您可以使用此类来表示第一次rec一个发件人在当前会话中为一条消息(已接收或已发送)发送或首次发送消息. |
您可以使用以下方法使用JavaScript初始化消息 :
myApp.messages(messagesContainer，parameters)
该方法有两个选项 :
messagesContainer : 它是必需的HTML元素或字符串，包含消息容器HTML元素.
参数 : 它指定一个带有消息参数的对象.
下表显示了参数带描述的消息.
| S.否 | 参数&说明 | 键入 | 默认 |
|---|---|---|---|
| 1 | autoLayout 它通过启用它为每条消息添加了额外的必需类. | boolean | true |
| 2 | newMessagesFirst 您可以在顶部显示消息，而不是通过启用它在底部显示. | boolean | false |
| 3 | 消息 它显示一系列消息每个消息应该用消息参数表示为对象. | array | - |
| 4 | messageTemplate 它显示单个消息模板. | string | - |
下表显示了带描述的消息的属性.
| S.No | &安培;说明 |
|---|---|
| 1 | myMessages.params 您可以使用object初始化传递的参数. |
| 2 | myMessages.container 定义带有消息栏HTML容器的DOM7元素. |
下表显示了带描述的消息的方法.
下表显示了包含描述的单个消息的参数.
| S.No | 参数&说明 | 键入 | 默认 |
|---|---|---|---|
| 1 | text 它定义了消息文本，可以是HTML字符串. | string | - |
| 2 | 名称 它指定了发件人名称. | string | - |
| 3 | 头像 它指定发件人头像网址字符串. | string | - |
| 4 | 时间 它指定了消息的时间字符串，如'9:45 AM'，'18:35'. | string | - |
| 5 | 输入 它提供的消息类型是否可以发送或收到消息. | string | 已发送 |
| 6 | 标签 它定义了邮件的标签. | string | - |
| 7 | day 它给出了消息的日期字符串比如'sunday'，'monday'，'today'等. | string | - |
您可以使用以下内容初始化消息没有JavaScript的HTML，使用附加的 messages-init 类到消息并使用 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://img01.yuandaxia.cn/Content/img/tutorials/framework7/framework7.ios.min.css" />
<link rel = "stylesheet"
href = "https://img01.yuandaxia.cn/Content/img/tutorials/framework7/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>让我们执行以下步骤，看看上面给出的代码如何工作 : 去;
将上面给出的HTML代码保存为服务器根文件夹中的 messages.html 文件.
将此HTML文件打开为http://localhost/messages.html，输出显示如下.
当您在消息框中键入消息并单击"发送"按钮时，它会指定您的消息已发送并在右侧以绿色背景显示.
您收到的信息显示在左侧，带有灰色背景和发件人姓名.
