消息

消息组件为你的App提供了可视评论和消息系统。

消息组件布局

...   
<div class="page">
  <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">
        <!-- Bubble with text -->
        <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-with-avatar message-received">
        <!-- Sender name -->
        <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>
 
      <!-- 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>
    </div>
  </div>
</div>        
...

消息组件的页面布局:

• "messages-content" - 消息容器，应该加到"page-content"类上

• "messages" - 消息气泡的容器，必需

• "messages-date" - 单个时间戳容器，包含会话日期和时间（在<span>标签中）

• "message" - 单条消息

单条消息的内部结构:

• "message-name" - 发送者名称

• "message-text" - 文本气泡

• "message-avatar" - 发送者头像

• "message-label" - 气泡下的文本标签

单条消息容器的一些附加class

• "message-sent" - 标识一条被用户发送过的消息，它会位于容器的右侧并且拥有绿色的背景

• "message-received" - 标识一条被用户接收的消息，它会位于容器的左侧并且拥有灰色的背景

• "message-pic" - 为单条带<img>的消息添加类，除了image，该条消息不可以包括其他元素

• "message-with-avatar" - 包含头像

• "message-with-tail" - 包含一个小尾巴

单条消息的一个附加的class

• "message-hide-name" - 隐藏名字

• "message-hide-avatar" - 隐藏头像

• "message-hide-label" - 隐藏消息标签

• "message-last" - 如果这是一个发送者连续会话的最后一条，则带有一个小尾巴并且有更大的底部留白

• "message-first" - 如果这是一个发送者会话的第一条，则带有发送者的名称

Messages Auto Layout

消息自动布局

Framework7 may add all required additional classes (like "message-pic", "message-with-avatar", "message-with-tail", etc) to each message automatically. For this case we need to use autoLayout:true parameter when initializing 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"><img src="http://lorempixel.com/300/300/"></div>
        <div class="message-label">Delivered 2 days ago</div>
      </div>
...

That is all, Framework7 will add all required classes to these messages. You just need to keep "message-sent", "message-received" classes

Initialize Messages with JavaScript

Now, when we have Messages' HTML, we need to initialize it. We need to use related App's method:

For example:

var myMessages = app.messages('.messages', {
    autoLayout: true
});

Messages Parameters

Let's look on list of all available parameters:

Message Template

You can modify message template by passing your custom Template7-formatted template. By default it is:

{{#if day}}
<div class="messages-date">{{day}} {{#if time}}, <span>{{time}}</span>{{/if}}</div>
{{/if}}
<div class="message message-{{type}} {{#if hasImage}}message-pic{{/if}} {{#if avatar}}message-with-avatar{{/if}} message-appear-
    {{#if name}}<div class="message-name">{{name}}</div>{{/if}}
    <div class="message-text">{{text}}</div>
    {{#if avatar}}<div class="message-avatar" style="background-image:url({{avatar}})"></div>{{/if}}
    {{#if label}}<div class="message-label">{{label}}</div>{{/if}}
</div>

Messages Methods & Properties

After we initialize Messages we have its initialized instance in variable (like myMessages variable in example above) with helpful methods and properties:

Single Message Parameters

Let's look on single message parameters object that we should use to addMessage, appendMessage and prependMessage methods:

Initialize Messages with HTML

If you don't need to use Messages methods and properties you can initialize it using HTML without JavaScript. You can do that just by adding additional "messages-init" class to .messages. In this case we may pass required parameters using data- attributes.

...   
  <div class="page-content messages-content">
    <!-- Additional "messages-init" class-->
    <div class="messages messages-init" data-auto-layout="true" data-new-messages-first="false">
      <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>
  </div>
...

Access to Messages's Instance

If you initialize Messages using HTML it is still possible to access to Messages's instance. It is "f7Messages" property of messages's container HTML element:

var myMessages = $$('.messages')[0].f7Messages;
 
// Now you can use it
myMessages.layout();