Framework7 - messagebar 消息栏
描述
Framework7 提供特殊的可调整大小的工具栏，以便与应用程序中的消息系统配合使用。
以下代码显示消息栏布局out −
<div clas = "toolbar messagebar">
<div clas = "toolbar-inner">
<textarea placeholder = "Message"></textarea>
<a href = "#" clas = "link">Send</a>
</div>
</div>
在消息栏中，"page"里面很重要，在"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 元素或字符串，其中包含 messagebar 容器 HTML 元素。
parameters − 它指定一个带有 messagebar 参数的对象。
例如 −
var myMessagebar = app.messagebar('.messagebar', {
maxHeight: 200
});
消息栏参数
maxHeight − 用于设置文本区域的最大高度，将根据文本量调整大小。参数类型为number，默认值为null。
消息栏属性
下表显示消息栏属性 −
| S.No | 属性 &描述 |
|---|---|
| 1 | myMessagebar.params 您可以使用传递的初始化参数指定对象。 |
| 2 | myMessagebar.container 您可以使用 messagebar 容器 HTML 元素指定 dom7 元素。 |
| 3 | myMessagebar.textarea 您可以使用 messagebar textarea HTML 元素指定 dom7 元素。 |
Messagebar 方法
下表显示了 messagebar 方法 −
| S.No | 方法和描述 |
|---|---|
| 1 | myMessagebar.value(newValue); 如果未指定 newValue，则设置消息栏文本区域值/文本并返回消息栏文本区域值。 |
| 2 | myMessagebar.clear(); 清除文本区域并更新/重置大小。 |
| 3 | myMessagebar.destroy(); 销毁消息栏实例。 |
使用初始化消息栏HTML
您可以通过将 messagebar-init 类添加到 .messagebar 来使用 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>
访问 Messagebar 的实例
如果使用 HTML 初始化消息栏实例，则可以访问该实例；这是通过使用其容器元素的 f7 Message bar 属性实现的。
var myMessagebar = $$('.messagebar')[0].f7Messagebar;
// 现在您可以使用它了
myMessagebar.value('Hello world');
您可以查看 Messagebar 的示例，该示例在此链接中进行了解释
