Framework7-メッセージバー

説明

Framework7は、アプリケーションのメッセージングシステムで動作する特別なサイズ変更可能なツールバーを提供します。

次のコードは、メッセージバーのレイアウトを示しています-

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

メッセージバーでは、「ページ」の内側は非常に重要であり、「メッセージコンテンツ」の右側にあります-

<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)

メソッドには2つのオプションがあります-

messagesbarContainer -メッセージバーコンテナHTML要素を含む必須のHTML要素または文字列です。
パラメータ-メッセージバーのパラメータを持つオブジェクトを指定します。

たとえば-

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

メッセージバーパラメータ

*maxHeight* -textareaの最大の高さを設定するために使用され、そのテキストの量に応じてサイズが変更されます。 パラメーターのタイプは_number_で、デフォルト値は_null_です。

メッセージバーのプロパティ

次の表は、メッセージバーのプロパティを示しています-

S.No

Properties & Description

1

myMessagebar.params

渡された初期化パラメーターでオブジェクトを指定できます。

2

myMessagebar.container

dom7要素は、messagebarコンテナのHTML要素で指定できます。

3

myMessagebar.textarea

messagebar textarea HTML要素でdom7要素を指定できます。

メッセージバーのメソッド

次の表は、メッセージバーのメソッドを示しています-

S.No

Methods & Description

1

myMessagebar.value(newValue);

newValue* が指定されていない場合、メッセージバーのテキストエリアの値/テキストを設定し、メッセージバーのテキストエリアの値を返します。

2

myMessagebar.clear();

テキストエリアをクリアし、サイズを更新/リセットします。

3

myMessagebar.destroy();

メッセージバーのインスタンスを破壊します。

HTMLでメッセージバーを初期化する

.messagebar_init_クラスを.messagebar_に追加することにより、JavaScriptメソッドとプロパティなしでHTMLを使用してメッセージバーを初期化でき、_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メッセージbar_プロパティを使用して実現されます。

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

このリンクで説明されているメッセージバーの例を見ることができます：/framework7/framework7_messages [link]

Framework7-message-bar