Framework7 - 消息栏

描述

Framework7 提供了特殊的可调整大小的工具栏，用于处理应用程序中的消息系统。

以下代码显示了消息栏布局：

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

在消息栏中，“页面”的内部非常重要，位于“messages-content”的右侧：

<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 初始化消息栏：

myApp.messagesbar(messagesbarContainer, parameters)

此方法有两个选项：

messagesbarContainer - 这是必需的 HTML 元素或字符串，其中包含消息栏容器 HTML 元素。
parameters - 它指定一个包含消息栏参数的对象。

例如：

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

消息栏参数

maxHeight - 用于设置文本区域的最大高度，并将根据文本数量调整大小。参数类型为数字，默认值为null。

消息栏属性

下表显示了消息栏属性：

序号	属性及描述
1	myMessagebar.params 您可以指定包含传递的初始化参数的对象。
2	myMessagebar.container 您可以指定包含消息栏容器 HTML 元素的 dom7 元素。
3	myMessagebar.textarea 您可以指定包含消息栏文本区域 HTML 元素的 dom7 元素。

序号

属性及描述

myMessagebar.params

您可以指定包含传递的初始化参数的对象。

myMessagebar.container

您可以指定包含消息栏容器 HTML 元素的 dom7 元素。

myMessagebar.textarea

您可以指定包含消息栏文本区域 HTML 元素的 dom7 元素。

消息栏方法

下表显示了消息栏方法：

序号	方法及描述
1	myMessagebar.value(newValue); 它设置消息栏文本区域的值/文本，如果未指定newValue，则返回消息栏文本区域的值。
2	myMessagebar.clear(); 它清除文本区域并更新/重置大小。
3	myMessagebar.destroy(); 它销毁消息栏实例。

序号

方法及描述

myMessagebar.value(newValue);

它设置消息栏文本区域的值/文本，如果未指定newValue，则返回消息栏文本区域的值。

myMessagebar.clear();

它清除文本区域并更新/重置大小。

myMessagebar.destroy();

它销毁消息栏实例。

使用 HTML 初始化消息栏

您可以通过向.messagebar添加messagebar-init类来使用 HTML 而无需 JavaScript 方法和属性初始化消息栏，并且您可以使用data-属性传递所需的参数。

以下代码指定了使用 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>

访问消息栏实例

如果您使用 HTML 初始化消息栏，则可以访问消息栏实例；这是通过使用其容器元素的f7 消息栏属性实现的。

var myMessagebar = $$('.messagebar')[0].f7Messagebar;
// Now you can use it
myMessagebar.value('Hello world');

您可以查看此链接中解释的消息栏示例

打印页面