Framework7-messages
Framework7-メッセージ
説明
メッセージはFramework7のコンポーネントであり、アプリケーションのコメントとメッセージングシステムを視覚化します。
メッセージのレイアウト
framework7には、次のメッセージレイアウト構造があります-
<div class = "page">
<div class = "page-content messages-content">
<div class = "messages">
<!-- Defines the date stamp -->
<div class = "messages-date">Monday, Apr 26 <span>10:30</span></div>
<!-- Displays the sent message and by default, it will be in green color on right side -->
<div class = "message message-sent">
<!-- Define the text with bubble type -->
<div class = "message-text">Hello</div>
</div>
<!-- Displays the another sent message -->
<div class = "message message-sent">
<!-- Define the text with bubble type -->
<div class = "message-text">How are you?</div>
</div>
<!-- Displays the received message and by default, it will be in grey color on left side -->
<div class = "message message-with-avatar message-received">
<!-- Provides sender name -->
<div class = "message-name">Smith</div>
<!-- Define the text with bubble type -->
<div class = "message-text">I am fine, thanks</div>
<!-- Defines the another date stamp -->
<div class = "messages-date">Tuesday, April 28 <span>11:16</span></div>
</div>
</div>
</div>レイアウトには、さまざまな領域に次のクラスが含まれています-
メッセージページのレイアウト
次の表は、メッセージページレイアウトのクラスと説明を示しています。
| S.No | Classes & Description |
|---|---|
| 1 |
messages-content これは、「ページコンテンツ」に追加され、メッセージラッパーに使用される必須の追加クラスです。 |
| 2 |
messages これは、メッセージバブルの必須要素です。 |
| 3 |
messages-date 日付スタンプコンテナを使用して、送受信されたメッセージの日付と時刻を表示します。 |
| 4 |
message 表示されるのは単一のメッセージです。 |
単一メッセージの内部部品
次の表に、簡単なメッセージの内部部分のクラスと説明を示します。
| S.No | Classes & Description |
|---|---|
| 1 |
message-name 送信者名を提供します。 |
| 2 |
message-text バブルタイプでテキストを定義します。 |
| 3 |
message-avatar 送信者のアバターを指定します。 |
| 4 |
message-label バブルの下のテキストラベルを指定します。 |
シングルメッセージコンテナの追加クラス
次の表は、単一のメッセージコンテナ記述の追加クラスを示しています。
| S.No | Classes & Description |
|---|---|
| 1 |
message-sent これは、メッセージがユーザーによって送信され、右側に緑色の背景色で表示されることを指定します。 |
| 2 |
message-received これは、メッセージがユーザーによって受信され、灰色の背景色で左側に留まっていることを示す単一のメッセージを表示するために使用されます。 |
| 3 |
message-pic これは、単一のメッセージで画像を表示するための追加のクラスです。 |
| 4 |
message-with-avatar これは、アバターで単一のメッセージ（受信または送信）を表示するための追加のクラスです。 |
| 5 |
message-with-tail 単一のメッセージ（受信または送信）にバブルテールを追加できます。 |
単一メッセージの追加の利用可能なクラス
次の表は、単一のメッセージで使用可能なクラスと説明を示しています。
| S.No | Classes & Description |
|---|---|
| 1 |
message-hide-name これは、単一のメッセージ（受信または送信）のメッセージ名を隠すための追加のクラスです。 |
| 2 |
message-hide-avatar これは、単一のメッセージ（受信または送信）のメッセージアバターを隠すための追加のクラスです。 |
| 3 |
message-hide-label これは、単一のメッセージ（受信または送信）のメッセージラベルを非表示にするための追加のクラスです。 |
| 4 |
message-last このクラスを使用して、1つのメッセージ（受信または送信）に対して1人の送信者が現在の会話で最後に受信または送信したメッセージを示すことができます。 |
| 5 |
message-first このクラスを使用して、1つのメッセージ（受信または送信）に対して1人の送信者が現在の会話で最初に受信または送信したメッセージを示すことができます。 |
JavaScriptを使用したメッセージの初期化
次の方法を使用して、JavaScriptでメッセージを初期化できます-
myApp.messages(messagesContainer, parameters)メソッドは2つのオプションを取ります-
- messagesContainer -メッセージコンテナHTML要素を含む必須のHTML要素または文字列です。
- パラメータ-メッセージのパラメータを持つオブジェクトを指定します。
メッセージパラメータ
次の表に、メッセージのパラメーターと説明を示します。
| S.No | Parameter & Description | Type | Default |
|---|---|---|---|
| 1 |
autoLayout 有効にすることで、各メッセージに必要なクラスを追加します。 |
boolean | true |
| 2 |
newMessagesFirst 有効にすると、メッセージを下部に表示する代わりに上部に表示できます。 |
boolean | false |
| 3 |
messages 各メッセージがメッセージパラメータを持つオブジェクトとして表されるメッセージの配列を表示します。 |
array | - |
| 4 |
messageTemplate 単一のメッセージテンプレートが表示されます。 |
string | - |
メッセージのプロパティ
次の表に、メッセージのプロパティと説明を示します。
| S.No | Property & Description |
|---|---|
| 1 |
myMessages.params 渡されたパラメーターをオブジェクトで初期化できます。 |
| 2 |
myMessages.container メッセージバーHTMLコンテナでDOM7要素を定義します。 |
メッセージメソッド
次の表に、メッセージのメソッドと説明を示します。
以下に説明付きのメッセージのメソッドのリストを示します。
| S.No | Method & Description |
|---|---|
| 1 |
myMessages.addMessage(messageParameters, method, animate); methodパラメーターを使用して、メッセージを先頭または末尾に追加できます。 次のパラメータがあります-
|
| 2 |
myMessages.appendMessage(messageParameters, animate); メッセージコンテナの最後にメッセージを追加します。 |
| 3 |
myMessages.prependMessage(messageParameters, animate); メッセージコンテナの先頭にメッセージを追加します。 |
| 4 |
myMessages.addMessages(messages, method, animate); 一度に複数のメッセージを追加できます。 それは次のパラメータを持っています-
|
| 5 |
myMessages.removeMessage(message); メッセージを削除するために使用されます。 それは次のパラメータを持っています-
|
| 6 |
myMessages.removeMessages(messages); 複数のメッセージを削除できます。 それは次のパラメータを持っています-
|
| 7 |
myMessages.scrollMessages(); 新しいメッセージの最初のパラメーターに応じて、メッセージを上から下へ、またはその逆にスクロールできます。 |
| 8 |
myMessages.layout(); 自動レイアウトはメッセージに適用できます。 |
| 9 |
myMessages.clean(); メッセージをきれいにするために使用されます。 |
| 10 |
myMessages.destroy(); メッセージを破棄するために使用されます。 |
単一メッセージパラメータ
次の表は、単一のメッセージのパラメーターと説明を示しています。
| S.No | Parameter & Description | Type | Default |
|---|---|---|---|
| 1 |
text メッセージテキストを定義します。これはHTML文字列にすることもできます。 |
string | - |
| 2 |
name 送信者名を指定します。 |
string | - |
| 3 |
avatar 送信者のアバターURL文字列を指定します。 |
string | - |
| 4 |
time 「9:45 AM」、「18:35」などのメッセージの時間文字列を指定します。 |
string | - |
| 5 |
type メッセージを送信できるか受信したかに関係なく、メッセージのタイプを提供します。 |
string | sent |
| 6 |
label メッセージのラベルを定義します。 |
string | - |
| 7 |
day 「日曜日」、「月曜日」、「昨日」などのメッセージの曜日文字列を提供します。 |
string | - |
HTMLを使用したメッセージの初期化
追加の_messages-init_クラスを_messages_に使用して、JavaScriptを使用せずにHTMLでメッセージを初期化し、以下のコードスニペットに示すように、_data-_属性を使用して必要なパラメーターを渡すことができます-
...
<div class = "page-content messages-content">
<!-- Initialize the messages using additional "messages-init" class-->
<div class = "messages messages-init" data-auto-layout = "true" data-new-messages-first = "false">
...
</div>
</div>
...例
次の例は、Framework7でのメッセージの使用を示しています-
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1,
maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui"/>
<meta name = "apple-mobile-web-app-capable" content = "yes"/>
<meta name = "apple-mobile-web-app-status-bar-style" content = "black"/>
<title>Messages</title>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css"/>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css"/>
</head>
<body>
<div class = "views">
<div class = "view view-main">
<div class = "pages">
<div data-page = "home" class = "page navbar-fixed toolbar-fixed">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "left"> </div>
<div class = "center">Messages</div>
<div class = "right"> </div>
</div>
</div>
<div class = "toolbar messagebar">
<div class = "toolbar-inner">
<textarea placeholder = "Message"></textarea><a href = "#" class = "link">Send</a>
</div>
</div>
<div class = "page-content messages-content">
<div class = "messages">
<div class = "messages-date">Friday, Apr 26 <span>10:30</span></div>
<div class = "message message-sent">
<div class = "message-text">Hello</div>
</div>
<div class = "message message-sent">
<div class = "message-text">Happy Birthday</div>
</div>
<div class = "message message-received">
<div class = "message-name">Smith</div>
<div class = "message-text">Thank you</div>
<div style = "background-image:url(/framework7/images/person.png)" class = "message-avatar"></div>
</div>
<div class = "messages-date">Saturday, Apr 27 <span>9:30</span></div>
<div class = "message message-sent">
<div class = "message-text">Good Morning...</div>
</div>
<div class = "message message-sent">
<div class = "message-text"><img src = "/framework7/images/gm.jpg"></div>
<div class = "message-label">Delivered</div>
</div>
<div class = "message message-received">
<div class = "message-name">Smith</div>
<div class = "message-text">Very Good Morning...</div>
<div style = "background-image:url(/framework7/images/person.png)" class = "message-avatar"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<script>
var myApp = new Framework7();
var $$ = Dom7;
//It indicates conversation flag
var conversationStarted = false;
//Here initiliaze the messages
var myMessages = myApp.messages('.messages', {
autoLayout:true
});
//Initiliaze the messagebar
var myMessagebar = myApp.messagebar('.messagebar');
//Displays the text after clicking the button
$$('.messagebar .link').on('click', function () {
//specifies the message text
var messageText = myMessagebar.value().trim();
//If there is no message, then exit from there
if (messageText.length === 0) return;
//Specifies the empty messagebar
myMessagebar.clear()
//Defines the random message type
var messageType = (['sent', 'received'])[Math.round(Math.random())];
//Provides the avatar and name for the received message
var avatar, name;
if(messageType === 'received') {
name = 'Smith';
}
//It adds the message
myMessages.addMessage ({
//It provides the message text
text: messageText,
//It displays the random message type
type: messageType,
//Specifies the avatar and name of the sender
avatar: avatar,
name: name,
//Displays the day, date and time of the message
day: !conversationStarted ? 'Today' : false,
time: !conversationStarted ? (new Date()).getHours() + ':' + (new Date()).getMinutes() : false
})
//Here you can update the conversation flag
conversationStarted = true;
});
</script>
</body>
</html>出力
上記のコードがどのように機能するかを確認するために次の手順を実行してみましょう-
- 上記のHTMLコードを messagesl ファイルとしてサーバーのルートフォルダーに保存します。
- このHTMLファイルをhttp：//localhost/messageslとして開くと、出力は以下のように表示されます。
- メッセージボックスにメッセージを入力して[送信]ボタンをクリックすると、メッセージが送信され、右側に緑色の背景色で表示されることが指定されます。
- 受信したメッセージは、送信者名とともに灰色の背景とともに左側に表示されます。
