描述
Framework7提供了特殊的可调整大小的工具栏,可以与应用程序中的消息传递系统一起使用.
以下代码显示了消息栏的布局和减号;
在消息栏中,"页面"的内部非常重要,位于"messages-content"和"minus"的右侧;
... messages
您可以使用以下方法使用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 : 的消息栏初始化;
访问消息栏的实例
如果使用HTML初始化消息栏实例,则可以访问消息栏实例;它是通过使用其容器元素的 f7消息栏属性来实现的.
var myMessagebar = $$('.messagebar')[0].f7Messagebar;// Now you can use itmyMessagebar.value('Hello world');
您可以看到Messagebar的示例