Framework7消息栏

2024 年 8 月 29 日 | 阅读 2 分钟

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

该方法有两个选项

messagesbarContainer: 这是一个必需的HTML元素或字符串，其中包含消息栏容器HTML元素。

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

例如

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

消息栏参数

maxHeight: 用于设置textarea的最大高度，它将根据其文本的数量进行调整大小。参数的类型是数字，默认值为null。

消息栏属性

下表显示了消息栏的属性

索引	属性	描述
1)	myMessagebar.params	您可以指定带有传递的初始化参数的对象。
2)	myMessagebar.container	您可以指定带有消息栏容器HTML元素的dom7元素。
3)	myMessagebar.textarea	您可以指定带有消息栏textarea HTML元素的dom7元素。

消息栏方法

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

使用HTML初始化消息栏

如果您不想使用消息栏方法和属性，您可以使用HTML在没有JavaScript的情况下对其进行初始化。

您只需要将messagebar-init类添加到 .messagebar，并且可以使用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>

下一个主题Framework7刷新

← 上一个下一个 →