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