Framework7 - 訊息欄

描述

Framework7 提供了特殊的可調整大小的工具欄，用於處理應用程式中的訊息系統。

以下程式碼顯示了訊息欄佈局：

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

在訊息欄中，“頁面”的內部非常重要，位於“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 元素或字串，其中包含訊息欄容器 HTML 元素。
parameters - 它指定一個包含訊息欄引數的物件。

例如：

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

訊息欄引數

maxHeight - 用於設定文字區域的最大高度，並將根據文字數量調整大小。引數型別為數字，預設值為null。

訊息欄屬性

下表顯示了訊息欄屬性：

序號	屬性及描述
1	myMessagebar.params 您可以指定包含傳遞的初始化引數的物件。
2	myMessagebar.container 您可以指定包含訊息欄容器 HTML 元素的 dom7 元素。
3	myMessagebar.textarea 您可以指定包含訊息欄文字區域 HTML 元素的 dom7 元素。

序號

屬性及描述

myMessagebar.params

您可以指定包含傳遞的初始化引數的物件。

myMessagebar.container

您可以指定包含訊息欄容器 HTML 元素的 dom7 元素。

myMessagebar.textarea

您可以指定包含訊息欄文字區域 HTML 元素的 dom7 元素。

訊息欄方法

下表顯示了訊息欄方法：

序號	方法及描述
1	myMessagebar.value(newValue); 它設定訊息欄文字區域的值/文字，如果未指定newValue，則返回訊息欄文字區域的值。
2	myMessagebar.clear(); 它清除文字區域並更新/重置大小。
3	myMessagebar.destroy(); 它銷燬訊息欄例項。

序號

方法及描述

myMessagebar.value(newValue);

它設定訊息欄文字區域的值/文字，如果未指定newValue，則返回訊息欄文字區域的值。

myMessagebar.clear();

它清除文字區域並更新/重置大小。

myMessagebar.destroy();

它銷燬訊息欄例項。

使用 HTML 初始化訊息欄

您可以透過向.messagebar新增messagebar-init類來使用 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>

訪問訊息欄例項

如果您使用 HTML 初始化訊息欄，則可以訪問訊息欄例項；這是透過使用其容器元素的f7 訊息欄屬性實現的。

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

您可以檢視此連結中解釋的訊息欄示例

列印頁面