Framework7 - Barra dei messaggi

Descrizione

Framework7 fornisce una speciale barra degli strumenti ridimensionabile per lavorare con il sistema di messaggistica nell'applicazione.

Il codice seguente mostra il layout della barra dei messaggi:

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

Nella barra dei messaggi, l'interno della "pagina" è molto importante ed è a destra di "contenuto dei messaggi" -

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

È possibile utilizzare il seguente metodo per inizializzare la barra dei messaggi con JavaScript:

myApp.messagesbar(messagesbarContainer, parameters)

Il metodo ha due opzioni:

  • messagesbarContainer - È una stringa o un elemento HTML obbligatorio che include l'elemento HTML del contenitore della barra dei messaggi.

  • parameters - Specifica un oggetto con i parametri della barra dei messaggi.

Ad esempio:

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

Parametro della barra dei messaggi

maxHeight- Viene utilizzato per impostare l'altezza massima dell'area di testo e verrà ridimensionato a seconda della quantità di testo. Il tipo di parametro è numero e il valore predefinito è null .

Proprietà della barra dei messaggi

La tabella seguente mostra le proprietà della barra dei messaggi:

S.No Proprietà e descrizione
1

myMessagebar.params

È possibile specificare un oggetto con parametri di inizializzazione passati.
2

myMessagebar.container

È possibile specificare l'elemento dom7 con l'elemento HTML del contenitore della barra dei messaggi.
3

myMessagebar.textarea

È possibile specificare l'elemento dom7 con l'elemento HTML dell'area di testo della barra dei messaggi.

Metodi della barra dei messaggi

La tabella seguente mostra i metodi della barra dei messaggi:

S.No Metodi e descrizione
1

myMessagebar.value(newValue);

Imposta il valore / testo della textarea della barra dei messaggi e restituisce il valore della textarea della barra dei messaggi, se newValue non è specificato.
2

myMessagebar.clear();

Cancella l'area di testo e aggiorna / ripristina le dimensioni.
3

myMessagebar.destroy();

Distrugge l'istanza della barra dei messaggi.

Inizializza la barra dei messaggi con HTML

È possibile inizializzare la barra dei messaggi utilizzando HTML senza proprietà e metodi JavaScript aggiungendo la classe messagebar-init a .messagebar ed è possibile passare i parametri richiesti utilizzando gli attributi dei dati .

Il codice seguente specifica l'inizializzazione della barra dei messaggi con 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>

Accesso all'istanza di Messagebar

È possibile accedere all'istanza della barra dei messaggi, se la si inizializza utilizzando HTML; si ottiene utilizzando la proprietà f7 Message bar del suo elemento contenitore.

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

Puoi vedere l'esempio di Messagebar, che è spiegato in questo link