📌  相关文章
📜  Framework7-消息栏

📅  最后修改于: 2020-10-25 02:59:25             🧑  作者: Mango

描述

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

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

在消息栏中，“页面”的内部非常重要，位于“消息内容”的右侧-


   
   

      

         
         Send
      

   

   
   
   

      

         ... messages

您可以使用以下方法通过JavaScript初始化消息栏-

myApp.messagesbar(messagesbarContainer, parameters)

该方法有两个选项-

  • messagesbarContainer-这是必需的HTML元素或包含messagebar容器HTML元素的字符串。

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

例如-

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

消息栏参数

maxHeight-用于设置文本区域的最大高度，并将根据其文本量进行调整。参数的类型为number ，默认值为null 。

消息栏属性

下表显示了消息栏属性-

S.No Properties & Description
1

myMessagebar.params

You can specify object with passed initialization parameters.
2

myMessagebar.container

You can specify dom7 element with messagebar container HTML element.
3

myMessagebar.textarea

You can specify dom7 element with messagebar textarea HTML element.

消息栏方法

下表显示了消息栏方法-

S.No Methods & Description
1

myMessagebar.value(newValue);

It sets messagebar textarea value/text and returns messagebar textarea value, if newValue is not specified.
2

myMessagebar.clear();

It clears the textarea and updates/resets the size.
3

myMessagebar.destroy();

It destroy messagebar instance.

用HTML初始化消息栏

通过将messagebar-init类添加到.messagebar ，可以使用不带JavaScript方法和属性的HTML初始化消息栏，并可以使用data- attribute传递所需的参数。

以下代码使用HTML指定了消息栏的初始化-


   

      
      Send

访问消息栏的实例

如果使用HTML对其进行初始化，则可以访问消息栏实例。这是通过使用其容器元素的f7消息栏属性来实现的。 

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

您可以看到消息栏示例，此链接对此进行了解释