Framework7 - Nachrichtenleiste

Beschreibung

Framework7 bietet eine spezielle Symbolleiste mit veränderbarer Größe, um mit dem Messagingsystem in der Anwendung zu arbeiten.

Der folgende Code zeigt das Layout der Nachrichtenleiste -

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

In der Nachrichtenleiste ist das Innere der "Seite" sehr wichtig und befindet sich rechts neben "Nachrichteninhalt" -

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

Mit der folgenden Methode können Sie die Nachrichtenleiste mit JavaScript initialisieren:

myApp.messagesbar(messagesbarContainer, parameters)

Die Methode hat zwei Möglichkeiten -

messagesbarContainer - Es ist ein erforderliches HTML-Element oder eine Zeichenfolge, die das HTML-Element des Nachrichtenleistencontainers enthält.
parameters - Es gibt ein Objekt mit Nachrichtenleistenparametern an.

Zum Beispiel -

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

Messagebar-Parameter

maxHeight- Es wird verwendet, um die maximale Höhe des Textbereichs festzulegen. Die Größe wird abhängig von der Textmenge geändert. Der Parametertyp ist number und der Standardwert ist null .

Eigenschaften der Nachrichtenleiste

Die folgende Tabelle zeigt die Eigenschaften der Nachrichtenleiste -

S.No.	Eigenschaften & Beschreibung
1	myMessagebar.params Sie können ein Objekt mit übergebenen Initialisierungsparametern angeben.
2	myMessagebar.container Sie können das dom7-Element mit dem HTML-Element des Nachrichtenleistencontainers angeben.
3	myMessagebar.textarea Sie können das dom7-Element mit dem HTML-Element textbarea der Nachrichtenleiste angeben.

Messagebar-Methoden

Die folgende Tabelle zeigt die Messagebar-Methoden -

S.No.	Methoden & Beschreibung
1	myMessagebar.value(newValue); Es legt den Textbereichswert / den Text der Nachrichtenleiste fest und gibt den Textbereichswert der Nachrichtenleiste zurück, wenn newValue ist nicht angegeben.
2	myMessagebar.clear(); Es löscht den Textbereich und aktualisiert / setzt die Größe zurück.
3	myMessagebar.destroy(); Es zerstört die Instanz der Nachrichtenleiste.

Nachrichtenleiste mit HTML initialisieren

Sie können die Nachrichtenleiste mit HTML ohne JavaScript-Methoden und -Eigenschaften initialisieren, indem Sie die Klasse messagebar -init zur Nachrichtenleiste hinzufügen, und Sie können die erforderlichen Parameter mithilfe von Datenattributen übergeben .

Der folgende Code gibt die Initialisierung der Nachrichtenleiste mit HTML an -

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

Zugriff auf die Instanz der Nachrichtenleiste

Sie können auf die Nachrichtenleisteninstanz zugreifen, wenn Sie sie mithilfe von HTML initialisieren. Dies wird erreicht, indem die Eigenschaft f7 Message Bar des Containerelements verwendet wird.

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

Sie können das Beispiel der Nachrichtenleiste sehen, das in diesem Link erläutert wird