Framework7消息栏消息栏|Framework7

本文概述

使用JavaScript初始化消息栏
消息栏参数
用HTML初始化消息栏

Framework7消息栏是可调整大小的工具栏, 可用于消息。它提供了一个可调整大小的特殊工具栏, 可与应用程序中的消息传递系统一起使用。
消息栏布局的语法：

< div class="page toolbar-fixed"> < div class="toolbar messagebar"> < div class="toolbar-inner"> < textarea placeholder="Message"> < /textarea> < a href="http://www.srcmini.com/#" class="link"> Send< /a> < /div> < /div> < /div>

消息栏布局的位置非常重要, 它应该在页面内部并且在消息内容之前。

< div class="page toolbar-fixed"> < !-- messagebar --> < div class="toolbar messagebar"> < div class="toolbar-inner"> < textarea placeholder="Message"> < /textarea> < a href="http://www.srcmini.com/#" class="link"> Send< /a> < /div> < /div> < !-- messages-content --> < div class="page-content messages-content"> < div class="messages"> ... messages< /div> < /div> < /div>

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

myApp.messagesbar(messagesbarContainer, parameters)

该方法有两个选项：
messagesbarContainer：它是必需的HTML元素或包含消息栏容器HTML元素的字符串。
参数：它指定一个带有消息栏参数的对象。
例如：

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

消息栏参数maxHeight：用于设置文本区域的最大高度, 并将根据其文本量进行调整。参数的类型为number, 默认值为null。
消息栏属性
下表显示了消息栏属性：

指数	属性	描述
1)	myMessagebar.params	你可以使用传递的初始化参数指定对象。
2)	myMessagebar.container	你可以将dom7元素与消息栏容器HTML元素一起指定。
3)	myMessagebar.textarea	你可以将dom7元素与消息栏textarea HTML元素一起指定。

消息栏方法

指数	方法	描述
1)	myMessagebar.value(newValue);	如果未指定newValue, 它将设置消息栏textarea值/文本并返回消息栏textarea值。
2)	myMessagebar.clear();	清除文本区域并更新/重置大小。
3)	myMessagebar.destroy();	它破坏了消息栏实例。

用HTML初始化消息栏如果不想使用消息栏方法和属性, 则可以使用不带JavaScript的HTML对其进行初始化。
你只需要将messagebar-init类添加到.messagebar中, 就可以使用data-attribute传递所需的参数。
【Framework7消息栏】请参阅以下代码, 如何使用HTML初始化消息栏：

< div class = "toolbar messagebar messagebar-init" data-max-height = "200"> < div class = "toolbar-inner"> < textarea placeholder = "Message"> < /textarea> < a href = "http://www.srcmini.com/#" class = "link"> Send< /a> < /div> < /div>