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 -

  • messageParameters - Es bietet Nachrichtenparameter zum Hinzufügen.

  • method - Es handelt sich um einen Zeichenfolgentyp, der Nachrichten am Anfang oder am Ende des Nachrichtencontainers hinzufügt.

  • animate- Es handelt sich um einen booleschen Typ, der eine Nachricht ohne Übergang oder Bildlaufanimation hinzufügt, indem sie auf false gesetzt wird. Standardmäßig ist dies der Fall.

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 -

  • messages - Es bietet ein Array von Nachrichten zum Hinzufügen, die als Objekt mit Nachrichtenparametern dargestellt werden sollen.

5

myMessages.removeMessage(message);

Es wird verwendet, um die Nachricht zu entfernen.

Es hat den folgenden Parameter -

  • message - Es ist ein erforderliches HTML-Element oder eine Zeichenfolge, die das Nachrichtenelement entfernt.

6

myMessages.removeMessages(messages);

Sie können die mehreren Nachrichten entfernen.

Es hat den folgenden Parameter -

  • messages - Es ist ein erforderliches Array mit HTML-Elementen oder Zeichenfolgen, das die Nachrichten entfernt.

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.