Framework7 - Barra de mensajes

Descripción

Framework7 proporciona una barra de herramientas de tamaño variable especial para trabajar con el sistema de mensajería en la aplicación.

El siguiente código muestra el diseño de la barra de mensajes:

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

En la barra de mensajes, el interior de la "página" es muy importante y está a la derecha de "contenido de mensajes" -

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

Puede utilizar el siguiente método para inicializar la barra de mensajes con JavaScript:

myApp.messagesbar(messagesbarContainer, parameters)

El método tiene dos opciones:

messagesbarContainer - Es un elemento HTML obligatorio o una cadena que incluye el elemento HTML del contenedor de la barra de mensajes.
parameters - Especifica un objeto con parámetros de barra de mensajes.

Por ejemplo

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

Parámetro de la barra de mensajes

maxHeight- Se utiliza para establecer la altura máxima del área de texto y cambiará de tamaño dependiendo de la cantidad de texto. El tipo de parámetro es número y el valor predeterminado es nulo .

Propiedades de la barra de mensajes

La siguiente tabla muestra las propiedades de la barra de mensajes:

S. No	Propiedades y descripción
1	myMessagebar.params Puede especificar un objeto con parámetros de inicialización pasados.
2	myMessagebar.container Puede especificar el elemento dom7 con el elemento HTML del contenedor de la barra de mensajes.
3	myMessagebar.textarea Puede especificar el elemento dom7 con el elemento HTML de área de texto de la barra de mensajes.

Métodos de la barra de mensajes

La siguiente tabla muestra los métodos de la barra de mensajes:

S. No	Métodos y descripción
1	myMessagebar.value(newValue); Establece el valor / texto del área de texto de la barra de mensajes y devuelve el valor del área de texto de la barra de mensajes, si newValue no se especifica.
2	myMessagebar.clear(); Borra el área de texto y actualiza / restablece el tamaño.
3	myMessagebar.destroy(); Destruye la instancia de la barra de mensajes.

Inicializar la barra de mensajes con HTML

Puede inicializar la barra de mensajes usando HTML sin métodos y propiedades de JavaScript agregando la clase messagebar-init a la barra de mensajes y puede pasar los parámetros requeridos usando atributos de datos .

El siguiente código especifica la inicialización de la barra de mensajes 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>

Acceso a la instancia de Messagebar

Es posible acceder a la instancia de la barra de mensajes, si la inicializa usando HTML; se logra utilizando la propiedad f7 Message bar de su elemento contenedor.

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

Puede ver el ejemplo de la barra de mensajes, que se explica en este enlace

↰ Previous page Next page ↱