Framework7 - Nachrichten
Beschreibung
Nachrichten sind Bestandteil von Framework7, mit dem Kommentare und das Nachrichtensystem in der Anwendung visualisiert werden können.
Nachrichtenlayout
Das Framework7 hat die folgende Nachrichtenlayoutstruktur:
<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>Das Layout enthält die folgenden Klassen in verschiedenen Bereichen -
Seitenlayout für Nachrichten
Die folgende Tabelle zeigt das Seitenlayout der Klassen von Nachrichten mit Beschreibung.
| S.No. | Klassen & Beschreibung |
|---|---|
| 1 | messages-content Es ist eine erforderliche zusätzliche Klasse, die zu "Seiteninhalt" hinzugefügt und für den Nachrichten-Wrapper verwendet wird. |
| 2 | messages Es ist ein erforderliches Element für Nachrichtenblasen. |
| 3 | messages-date Es verwendet einen Datumsstempelcontainer, um Datum und Uhrzeit der gesendeten oder empfangenen Nachricht anzuzeigen. |
| 4 | message Es ist eine einzelne Nachricht, die angezeigt werden soll. |
Innenteile für einzelne Nachrichten
Die folgende Tabelle zeigt die Klassen der einfachen Teile der Nachricht mit Beschreibung.
| S.No. | Klassen & Beschreibung |
|---|---|
| 1 | message-name Es gibt den Absendernamen an. |
| 2 | message-text Definieren Sie den Text mit dem Blasentyp. |
| 3 | message-avatar Es gibt den Absender-Avatar an. |
| 4 | message-label Es gibt die Textbezeichnung unter der Blase an. |
Zusätzliche Klassen für Single Message Container
Die folgende Tabelle zeigt zusätzliche Klassen für die Beschreibung eines einzelnen Nachrichtencontainers.
| S.No. | Klassen & Beschreibung |
|---|---|
| 1 | message-sent Es gibt an, dass die Nachricht vom Benutzer gesendet wurde und auf der rechten Seite mit grüner Hintergrundfarbe angezeigt wird. |
| 2 | message-received Es wird zum Anzeigen der einzelnen Nachricht verwendet, die angibt, dass die Nachricht vom Benutzer empfangen wurde und auf der linken Seite mit grauer Hintergrundfarbe bleibt. |
| 3 | message-pic Es ist eine zusätzliche Klasse zum Anzeigen von Bildern mit einer einzelnen Nachricht. |
| 4 | message-with-avatar Es ist eine zusätzliche Klasse zum Anzeigen einer einzelnen Nachricht (empfangen oder gesendet) mit Avatar. |
| 5 | message-with-tail Sie können einen Bubble Tail für eine einzelne Nachricht (empfangen oder gesendet) hinzufügen. |
Zusätzliche verfügbare Klassen für einzelne Nachrichten
Die folgende Tabelle zeigt die verfügbaren Klassen für eine einzelne Nachricht mit Beschreibung.
| S.No. | Klassen & Beschreibung |
|---|---|
| 1 | message-hide-name Es ist eine zusätzliche Klasse zum Ausblenden des Nachrichtennamens für eine einzelne Nachricht (empfangen oder gesendet). |
| 2 | message-hide-avatar Es ist eine zusätzliche Klasse zum Ausblenden des Nachrichtenavatars für eine einzelne Nachricht (empfangen oder gesendet). |
| 3 | message-hide-label Es ist eine zusätzliche Klasse zum Ausblenden der Nachrichtenbezeichnung für eine einzelne Nachricht (empfangen oder gesendet). |
| 4 | message-last Mit dieser Klasse können Sie die zuletzt empfangene oder gesendete Nachricht in der aktuellen Konversation eines Absenders für eine einzelne Nachricht (empfangen oder gesendet) angeben. |
| 5 | message-first Mit dieser Klasse können Sie die erste empfangene oder zuerst gesendete Nachricht in der aktuellen Konversation eines Absenders für eine einzelne Nachricht (empfangen oder gesendet) angeben. |
Nachrichten mit JavaScript initialisieren
Sie können die Nachrichten mit JavaScript mithilfe der folgenden Methode initialisieren:
myApp.messages(messagesContainer, parameters)Die Methode hat zwei Möglichkeiten -
messagesContainer - Es ist ein erforderliches HTML-Element oder eine Zeichenfolge, die das HTML-Element des Nachrichtencontainers enthält.
parameters - Es gibt ein Objekt mit Nachrichtenparametern an.
Nachrichtenparameter
Die folgende Tabelle zeigt die Parameter von Nachrichten mit Beschreibung.
| S.No. | Parameter & Beschreibung | Art | Standard |
|---|---|---|---|
| 1 | autoLayout Durch Aktivieren werden jeder Nachricht zusätzliche erforderliche Klassen hinzugefügt. |
Boolescher Wert | wahr |
| 2 | newMessagesFirst Sie können die Nachricht oben anstatt unten anzeigen, indem Sie sie aktivieren. |
Boolescher Wert | falsch |
| 3 | messages Es zeigt ein Array von Nachrichten an, in denen jede Nachricht als Objekt mit Nachrichtenparametern dargestellt werden soll. |
Array | - - |
| 4 | messageTemplate Es zeigt die einzelne Nachrichtenvorlage an. |
Zeichenfolge | - - |
Nachrichteneigenschaften
Die folgende Tabelle zeigt die Eigenschaften von Nachrichten mit Beschreibung.
| S.No. | Objektbeschreibung |
|---|---|
| 1 | myMessages.params Sie können die übergebenen Parameter mit object initialisieren. |
| 2 | myMessages.container Definiert das DOM7-Element mit einem HTML-Container in der Nachrichtenleiste. |
Nachrichten Methoden
Die folgende Tabelle zeigt die Methoden von Nachrichten mit Beschreibung.
| S.No. | Methode & Beschreibung |
|---|---|
| 1 | myMessages.addMessage(messageParameters, method, animate); Die Nachricht kann mithilfe des Methodenparameters am Anfang oder am Ende hinzugefügt werden. Es hat die folgenden Parameter -
|
| 2 | myMessages.appendMessage(messageParameters, animate); Es wird eine Nachricht am Ende des Nachrichtencontainers hinzugefügt. |
| 3 | myMessages.prependMessage(messageParameters, animate); Es wird eine Nachricht am Anfang des Nachrichtencontainers hinzugefügt. |
| 4 | myMessages.addMessages(messages, method, animate); Sie können mehrere Nachrichten gleichzeitig hinzufügen. Es hat den folgenden Parameter -
|
| 5 | myMessages.removeMessage(message); Es wird verwendet, um die Nachricht zu entfernen. Es hat den folgenden Parameter -
|
| 6 | myMessages.removeMessages(messages); Sie können die mehreren Nachrichten entfernen. Es hat den folgenden Parameter -
|
| 7 | myMessages.scrollMessages(); Sie können Nachrichten je nach dem ersten Parameter der neuen Nachricht von oben nach unten und umgekehrt scrollen. |
| 8 | myMessages.layout(); Das automatische Layout kann auf die Nachrichten angewendet werden. |
| 9 | myMessages.clean(); Es wird verwendet, um die Nachrichten zu bereinigen. |
| 10 | myMessages.destroy(); Es wird verwendet, um die Nachrichten zu zerstören. |
Einzelne Nachrichtenparameter
Die folgende Tabelle zeigt die Parameter für eine einzelne Nachricht mit Beschreibung.
| S.No. | Parameter & Beschreibung | Art | Standard |
|---|---|---|---|
| 1 | text Es definiert den Nachrichtentext, bei dem es sich um eine HTML-Zeichenfolge handeln kann. |
Zeichenfolge | - - |
| 2 | name Es gibt den Absendernamen an. |
Zeichenfolge | - - |
| 3 | avatar Es gibt die URL-Zeichenfolge des Absender-Avatars an. |
Zeichenfolge | - - |
| 4 | time Es gibt die Zeitzeichenfolge der Nachricht wie "9:45 Uhr", "18: 35" an. |
Zeichenfolge | - - |
| 5 | type Es gibt einen Nachrichtentyp an, unabhängig davon, ob eine Nachricht gesendet oder empfangen werden kann. |
Zeichenfolge | geschickt |
| 6 | label Es definiert die Bezeichnung der Nachricht. |
Zeichenfolge | - - |
| 7 | day Es gibt die Tageszeichenfolge der Nachricht wie "Sonntag", "Montag", "Gestern" usw. an. |
Zeichenfolge | - - |
Nachrichten mit HTML initialisieren
Sie können die Nachrichten mit HTML ohne JavaScript initialisieren, indem Sie die zusätzliche Klasse messages-init für Nachrichten verwenden und die erforderlichen Datenattribute verwenden , um die erforderlichen Parameter zu übergeben, wie im folgenden Codefragment gezeigt.
...
<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>
...Beispiel
Das folgende Beispiel zeigt die Verwendung von Nachrichten in 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>Ausgabe
Lassen Sie uns die folgenden Schritte ausführen, um zu sehen, wie der oben angegebene Code funktioniert:
Speichern Sie den oben angegebenen HTML-Code als messages.html Datei in Ihrem Server-Stammordner.
Öffnen Sie diese HTML-Datei als http: //localhost/messages.html und die Ausgabe wird wie unten gezeigt angezeigt.
Wenn Sie eine Nachricht in das Nachrichtenfeld eingeben und auf die Schaltfläche Senden klicken, wird angegeben, dass Ihre Nachricht gesendet wurde und auf der rechten Seite mit grüner Hintergrundfarbe angezeigt wird.
Die Nachricht, die Sie erhalten, wird auf der linken Seite mit dem grauen Hintergrund zusammen mit dem Absendernamen angezeigt.