Framework7-message-bar
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);
|
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]