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 的示例,该示例在此链接中进行了解释