目录

Framework7 - 消息栏( Message Bar)

描述 (Description)

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

以下代码显示消息栏布局 -

<div clas = "toolbar messagebar">
   <div clas = "toolbar-inner">
      <textarea placeholder = "Message"></textarea>
      <a href = "#" clas = "link">Send</a>
   </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初始化消息栏 -

myApp.messagesbar(messagesbarContainer, parameters)

该方法有两种选择 -

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

  • parameters - 它指定带有消息栏参数的对象。

例如 -

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

消息栏参数

maxHeight - 用于设置textarea的最大高度,并根据文本的大小调整大小。 参数类型为number ,默认值为null

消息栏属性

下表显示了消息栏属性 -

S.No 属性和描述
1

myMessagebar.params

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

2

myMessagebar.container

您可以使用messagebar容器HTML元素指定dom7元素。

3

myMessagebar.textarea

您可以使用messagebar textarea HTML元素指定dom7元素。

消息栏方法

下表显示了消息栏方法 -

S.No 方法和描述
1

myMessagebar.value(newValue);

如果未指定newValue ,它将设置messagebar textarea值/文本并返回messagebar textarea值。

2

myMessagebar.clear();

它清除textarea并更新/重置大小。

3

myMessagebar.destroy();

它会破坏消息栏实例。

使用HTML初始化消息栏

您可以通过将messagebar-init类添加到.messagebar来使用不使用JavaScript方法和属性的HTML来初始化消息.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>  

访问Messagebar的实例

如果使用HTML初始化消息栏实例,则可以访问消息栏实例; 它是通过使用其容器元素的f7 Message bar属性实现的。

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

您可以看到Messagebar的示例,该link中对此进行了解释

↑回到顶部↑
WIKI教程 @2018