Framework7 - Barre de messages

La description

Framework7 fournit une barre d'outils redimensionnable spéciale pour fonctionner avec le système de messagerie de l'application.

Le code suivant montre la disposition de la barre de message -

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

Dans la barre de message, l'intérieur de la "page" est très important et se trouve à droite de "messages-content" -

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

Vous pouvez utiliser la méthode suivante pour initialiser la barre de message avec JavaScript -

myApp.messagesbar(messagesbarContainer, parameters)

La méthode a deux options -

  • messagesbarContainer - Il s'agit d'un élément ou d'une chaîne HTML obligatoire qui inclut l'élément HTML du conteneur de la barre de messages.

  • parameters - Il spécifie un objet avec des paramètres de barre de messages.

Par exemple -

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

Paramètre Messagebar

maxHeight- Il est utilisé pour définir la hauteur maximale de la zone de texte et sera redimensionné en fonction de la quantité de son texte. Le type de paramètre est nombre et la valeur par défaut est null .

Propriétés de la barre de messages

Le tableau suivant montre les propriétés de la barre de messages -

S. Non Propriétés et description
1

myMessagebar.params

Vous pouvez spécifier un objet avec des paramètres d'initialisation passés.
2

myMessagebar.container

Vous pouvez spécifier l'élément dom7 avec l'élément HTML du conteneur messagebar.
3

myMessagebar.textarea

Vous pouvez spécifier l'élément dom7 avec l'élément HTML messagebar textarea.

Méthodes de la barre de messages

Le tableau suivant montre les méthodes de la barre de messages -

S. Non Méthodes et description
1

myMessagebar.value(newValue);

Il définit la valeur / texte de la zone de texte de la barre de message et renvoie la valeur de la zone de texte de la barre de message, si newValue n'est pas spécifié.
2

myMessagebar.clear();

Il efface la zone de texte et met à jour / réinitialise la taille.
3

myMessagebar.destroy();

Il détruit l'instance de la barre de messages.

Initialiser Messagebar avec HTML

Vous pouvez initialiser la barre de messages en utilisant HTML sans méthodes et propriétés JavaScript en ajoutant la classe messagebar-init à la .messagebar et vous pouvez passer les paramètres requis à l'aide des attributs de données .

Le code suivant spécifie l'initialisation de la barre de messages avec 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>

Accès à l'instance de Messagebar

Il est possible d'accéder à l'instance de la barre de messages, si vous l'initialisez en utilisant HTML; il est réalisé en utilisant la propriété f7 Message bar de son élément container.

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

Vous pouvez voir l'exemple de Messagebar, qui est expliqué dans ce lien