Framework7消息栏

本文概述

• 使用JavaScript初始化消息栏
• 消息栏参数
• 用HTML初始化消息栏

Framework7消息栏是可调整大小的工具栏, 可用于消息。它提供了一个可调整大小的特殊工具栏, 可与应用程序中的消息传递系统一起使用。

消息栏布局的语法：

<div class="page toolbar-fixed">
  <div class="toolbar messagebar">
  <div class="toolbar-inner">
    <textarea placeholder="Message"></textarea><a href="#" class="link">Send</a>
  </div>
</div>   
</div>

消息栏布局的位置非常重要, 它应该在页面内部并且在消息内容之前。

<div class="page toolbar-fixed">
  <!-- messagebar -->
  <div class="toolbar messagebar">
    <div class="toolbar-inner">
      <textarea placeholder="Message"></textarea><a href="#" class="link">Send</a>
    </div>
  </div>
  <!-- messages-content -->
  <div class="page-content messages-content">
    <div class="messages">
      ... messages
    </div>
  </div>
</div>

使用JavaScript初始化消息栏

你可以使用以下方法通过JavaScript初始化消息栏：

myApp.messagesbar(messagesbarContainer, parameters)

该方法有两个选项：

messagesbarContainer：它是必需的HTML元素或包含消息栏容器HTML元素的字符串。

参数：它指定一个带有消息栏参数的对象。

例如：

var myMessagebar = app.messagebar('.messagebar', {
   maxHeight: 200
});

消息栏参数

maxHeight：用于设置文本区域的最大高度, 并将根据其文本量进行调整。参数的类型为number, 默认值为null。

消息栏属性

下表显示了消息栏属性：

消息栏方法

用HTML初始化消息栏

如果不想使用消息栏方法和属性, 则可以使用不带JavaScript的HTML对其进行初始化。

你只需要将messagebar-init类添加到.messagebar中, 就可以使用data-attribute传递所需的参数。

请参阅以下代码, 如何使用HTML初始化消息栏：

<div class = "toolbar messagebar messagebar-init" data-max-height = "200">
   <div class = "toolbar-inner">
      <textarea placeholder = "Message"></textarea>
      <a href = "#" class = "link">Send</a>
   </div>
</div>