本文概述
- 邮件布局
- 消息页面布局
- 使用JavaScript初始化消息
- 消息参数
邮件布局
...<
div class="page">
<
div class="page-content messages-content">
<
div class="messages">
<
!-- Date stamp -->
<
div class="messages-date">
Sunday, Feb 9 <
span>
12:58<
/span>
<
/div>
<
!-- Sent message (by default - green and on right side) -->
<
div class="message message-sent">
<
!-- Bubble with text -->
<
div class="message-text">
Hello<
/div>
<
/div>
<
!-- Another sent message -->
<
div class="message message-sent">
<
!-- Bubble with text -->
<
div class="message-text">
How are you?<
/div>
<
/div>
<
!-- Received message (by default - grey on left side) -->
<
div class="message message-with-avatar message-received">
<
!-- Sender name -->
<
div class="message-name">
Kate<
/div>
<
!-- Bubble with text -->
<
div class="message-text">
I am fine, thanks<
/div>
<
!-- Sender avatar -->
<
div style="background-image:url(http://lorempixel.com/output/people-q-c-100-100-9.jpg)" class="message-avatar">
<
/div>
<
/div>
<
!-- Another date stamp -->
<
div class="messages-date">
Sunday, Feb 3 <
span>
11:58<
/span>
<
/div>
<
!-- Sent message with image -->
<
div class="message message-pic message-sent">
<
!-- Bubble with image -->
<
div class="message-text">
<
img src="http://lorempixel.com/300/300/">
<
/div>
<
!-- Message label -->
<
div class="message-label">
Delivered 2 days ago<
/div>
<
/div>
<
!-- Sent message with single message date -->
<
div class="message message-sent">
<
!-- Bubble with text -->
<
div class="message-text">
How are you?<
div class="message-date">
Nov 11, 2016<
/div>
<
/div>
<
!-- Message label -->
<
div class="message-label">
Delivered 2 days ago<
/div>
<
/div>
<
/div>
<
/div>
<
/div>
...
消息页面布局以下是消息页面布局的类别列表:
- “ messages-content”:这是添加到“ page-content”并用于消息包装的必需的附加类。
- “消息”:它也是消息气泡的必需附加包装。
- “ messages-date”:它使用日期戳容器显示发送或接收的消息的日期和时间。
- “消息”:用于显示单个消息。
以下是简单消息内部部分的类:
- message-name:用于提供发件人名称。
- message-text:用于定义气泡类型的文本。
- message-avatar:用于指定发件人头像。
- message-label:用于指定气泡下方的文本标签。
单个消息容器的其他类的列表:
指数 | 类 | 描述 |
---|---|---|
1) | message-sent | 它指定消息是由用户发送的, 并在右侧以绿色背景色显示。 |
2) | message-received | 它用于显示单个消息, 表明该消息已被用户接收, 并停留在左侧, 背景为灰色。 |
3) | message-pic | 它是用于显示带有单个消息的图像的附加类。 |
4) | message-with-avatar | 它是用于显示带有头像的单个消息(已接收或已发送)的附加类。 |
5) | message-with-tail | 你可以为单个消息(已接收或已发送)添加气泡尾。 |
指数 | 类 | 描述 |
---|---|---|
1) | message-hide-name | 它是用于隐藏单个消息(已接收或已发送)的消息名称的附加类。 |
2) | message-hide-avatar | 它是用于隐藏单个消息(已接收或发送)的消息头像的附加类。 |
3) | message-hide-label | 它是用于隐藏单个消息(已接收或已发送)的消息标签的附加类。 |
4) | message-last | 你可以使用此类指示一个发件人针对单个消息(已接收或已发送)在当前对话中最后接收或发送的消息。 |
5) | message-first | 你可以使用此类来指示一个发件人在当前会话中针对单个消息(已接收或已发送)的第一个接收到的消息或第一个发送的消息。 |
myApp.messages(messagesContainer, parameters)
这里:
- messagesContainer:这是必需的HTML元素或包含消息容器HTML元素的字符串。
- 参数:它指定带有消息参数的对象。
指数 | 参数 | 类型 | 描述 |
---|---|---|---|
1) | autoLayout | boolean | 通过启用它, 它向每条消息添加了附加的必需类。 |
2) | newMessagesFirst | boolean | 你可以通过启用消息在顶部显示消息, 而不是在底部显示消息。 |
3) | messages | array | 它显示消息数组, 其中每个消息都应表示为带有消息参数的对象。 |
4) | messageTemplate | string | 它显示单个消息模板。 |
以下是消息方法的列表:
指数 | 方法 | 描述 |
---|---|---|
1) | myMessages.addMessage(messageParameters, method, animate); | 根据方法参数将新消息添加到末尾或开头:messageParameters:要添加的消息的对象参数。需要。方法-字符串:(“追加”或“前置”)指示在消息容器的末尾或开头添加新消息。可选, 如果未指定, 则它将根据newMessagesFirst参数添加消息animate-布尔值:(默认为true)。你可以在此处传递false, 消息将立即添加, 而不会进行任何过渡和滚动动画。可选的。方法返回添加的消息的HTMLElement |
2) | myMessages.appendMessage(messageParameters, 动画); | Add new message to the end (to the bottom) |
3) | myMessages.prependMessage(messageParameters, 动画); | Add new message to the beginning (to the top) |
4) | myMessages.addMessages(消息, 方法, 动画); | 一次添加多条消息。消息:包含要添加的消息的数组。数组中的每个消息都应显示为带有消息参数Required的对象。方法返回添加了消息的HTMLElements数组 |
5) | myMessages.removeMessage(message); | 删除消息消息:要删除的消息元素的HTMLElement或字符串(带有CSS选择器)。如果删除了指定的消息, 则Required Method返回true |
6) | myMessages.removeMessages(messages); | 删除多条消息消息:要删除的消息数组(带有HTMLElements)或字符串(带有CSS Selector)。如果指定的消息已删除, 则Required Method返回true。 |
7) | myMessages.scrollMessages(); | 根据newMessagesFirst参数将消息滚动到顶部/底部 |
8) | myMessages.layout(); | 应用邮件自动布局 |
9) | myMessages.clean(); | 清除/删除所有消息 |
10) | myMessages.destroy(); | 销毁消息实例 |
<
!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 = "http://www.srcmini.com/#" class = "link">
Send<
/a>
<
/div>
<
/div>
<
div class="page-content messages-content">
<
div class="messages">
<
div class="messages-date">
Sunday, Feb 9 <
span>
12:58<
/span>
<
/div>
<
div class="message message-sent">
<
div class="message-text">
Hello<
/div>
<
/div>
<
div class="message message-sent">
<
div class="message-text">
How are you?<
/div>
<
/div>
<
div class="message message-received">
<
div class="message-name">
Kate<
/div>
<
div class="message-text">
I am fine, thanks<
/div>
<
div style="background-image:url(http://lorempixel.com/output/people-q-c-100-100-9.jpg)" class="message-avatar">
<
/div>
<
/div>
<
div class="messages-date">
Sunday, Feb 3 <
span>
11:58<
/span>
<
/div>
<
div class="message message-sent">
<
div class="message-text">
Nice photo?<
/div>
<
/div>
<
div class="message message-sent message-pic">
<
div class="message-text">
<
img src="http://lorempixel.com/300/300/">
<
/div>
<
div class="message-label">
Delivered<
/div>
<
/div>
<
div class="message message-received">
<
div class="message-name">
Kate<
/div>
<
div class="message-text">
Wow, awesome!<
/div>
<
div style="background-image:url(http://lorempixel.com/output/people-q-c-100-100-9.jpg)" 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 flagvar conversationStarted = false;
// Here initiliaze the messagesvar myMessages = myApp.messages('.messages', {autoLayout:true});
// Initiliaze the messagebarvar myMessagebar = myApp.messagebar('.messagebar');
// Displays the text after clicking the button$$('.messagebar .link').on('click', function () {// specifies the message textvar messageText = myMessagebar.value().trim();
// If there is no message, then exit from thereif (messageText.length === 0) return;
// Specifies the empty messagebarmyMessagebar.clear()// Defines the random message typevar messageType = (['sent', 'received'])[Math.round(Math.random())];
// Provides the avatar and name for the received messagevar avatar, name;
if(messageType === 'received') {name = 'Kate';
}// It adds the messagemyMessages.addMessage ({// It provides the message texttext: messageText, // It displays the random message typetype: messageType, // Specifies the avatar and name of the senderavatar: avatar, name: name, // Displays the day, date and time of the messageday: !conversationStarted ? 'Today' : false, time: !conversationStarted ? (new Date()).getHours() + ':' + (new Date()).getMinutes() : false})// Here you can update the conversation flagconversationStarted = true;
});
<
/script>
<
/body>
<
/html>
立即测试
推荐阅读
- Framework7消息栏
- Framework7无限滚动
- Framework7自动补全
- 日历参数
- 日历方法和属性
- 访问日历的实例
- 两个值和3D旋转效果
- 单值选取器
- Framework7内联选择器/日期时间