Framework7 - 消息栏

描述

Framework7提供了特殊的可调整大小的工具栏，可以与应用程序中的消息传递系统一起使用.

以下代码显示了消息栏的布局和减号;

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

在消息栏中，"页面"的内部非常重要，位于"messages-content"和"minus"的右侧;

<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元素.

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

例如 :

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来初始化消息栏，并且可以通过使用 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');

您可以看到Messagebar的示例