Framework7 - Mensajes

Descripción

Los mensajes son un componente de Framework7, que brinda visualización de comentarios y sistema de mensajería en la aplicación.

Diseño de mensajes

El framework7 tiene la siguiente estructura de diseño de mensajes:

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

El diseño contiene las siguientes clases en diferentes áreas:

Diseño de página de mensajes

La siguiente tabla muestra las clases de diseño de página de mensajes con descripción.

S. No Clases y descripción
1

messages-content

Es una clase adicional requerida que se agrega a "page-content" y se usa para el envoltorio de mensajes.
2

messages

Es un elemento obligatorio para las burbujas de mensajes.
3

messages-date

Utiliza un contenedor de sello de fecha para mostrar la fecha y hora del mensaje enviado o recibido.
4

message

Es un solo mensaje que se mostrará.

Partes internas de mensaje único

La siguiente tabla muestra las clases de partes internas de mensajes simples con descripción.

S. No Clases y descripción
1

message-name

Proporciona el nombre del remitente.
2

message-text

Defina el texto con el tipo de burbuja.
3

message-avatar

Especifica el avatar del remitente.
4

message-label

Especifica la etiqueta de texto debajo de la burbuja.

Clases adicionales para contenedor de mensaje único

La siguiente tabla muestra clases adicionales para la descripción del contenedor de un solo mensaje.

S. No Clases y descripción
1

message-sent

Especifica que el mensaje fue enviado por el usuario y se muestra con un color de fondo verde en el lado derecho.
2

message-received

Se utiliza para mostrar el mensaje único que indica que el mensaje fue recibido por el usuario y permanece en el lado izquierdo con un color de fondo gris.
3

message-pic

Es una clase adicional para mostrar imágenes con un solo mensaje.
4

message-with-avatar

Es una clase adicional para mostrar un solo mensaje (recibido o enviado) con avatar.
5

message-with-tail

Puede agregar una cola de burbuja para un solo mensaje (recibido o enviado).

Clases adicionales disponibles para mensaje único

La siguiente tabla muestra las clases disponibles para un solo mensaje con descripción.

S. No Clases y descripción
1

message-hide-name

Es una clase adicional para ocultar el nombre del mensaje de un solo mensaje (recibido o enviado).
2

message-hide-avatar

Es una clase adicional para ocultar el avatar de un mensaje para un solo mensaje (recibido o enviado).
3

message-hide-label

Es una clase adicional para ocultar la etiqueta del mensaje de un solo mensaje (recibido o enviado).
4

message-last

Puede usar esta clase para indicar el último mensaje recibido o enviado en la conversación actual por un remitente para un solo mensaje (recibido o enviado).
5

message-first

Puede usar esta clase para indicar el primer mensaje recibido o enviado en la conversación actual por un remitente para un solo mensaje (recibido o enviado).

Inicializar mensajes con JavaScript

Puede inicializar los mensajes con JavaScript utilizando el siguiente método:

myApp.messages(messagesContainer, parameters)

El método tiene dos opciones:

  • messagesContainer - Es un elemento HTML obligatorio o una cadena que incluye un elemento HTML contenedor de mensajes.

  • parameters - Especifica un objeto con parámetros de mensajes.

Parámetros de mensajes

La siguiente tabla muestra los parámetros de los mensajes con descripción.

S. No Descripción de parámetros Tipo Defecto
1

autoLayout

Agrega clases requeridas adicionales a cada mensaje habilitándolo.

 booleano cierto
2

newMessagesFirst

Puede mostrar el mensaje en la parte superior en lugar de mostrarlo en la parte inferior habilitándolo.

 booleano falso
3

messages

Muestra una matriz de mensajes en la que cada mensaje debe representarse como un objeto con parámetros de mensaje.

 formación -
4

messageTemplate

Muestra la plantilla de mensaje único.

 cuerda -

Propiedades de mensajes

La siguiente tabla muestra las propiedades de los mensajes con descripción.

S. No Descripción de propiedad
1

myMessages.params

Puede inicializar los parámetros pasados ​​con object.
2

myMessages.container

Define el elemento DOM7 con un contenedor HTML de barra de mensajes.

Métodos de mensajes

La siguiente tabla muestra los métodos de los mensajes con descripción.

S. No Método y descripción
1

myMessages.addMessage(messageParameters, method, animate);

El mensaje se puede agregar al principio o al final utilizando el parámetro de método.

Tiene los siguientes parámetros:

  • messageParameters - Proporciona parámetros de mensaje para agregar.

  • method - Es un tipo de cadena que agrega un mensaje al principio o al final del contenedor de mensajes.

  • animate- Es un tipo booleano, que agrega un mensaje sin ninguna transición o animación de desplazamiento al establecerlo en falso. Por defecto, será cierto.
2

myMessages.appendMessage(messageParameters, animate);

Agrega un mensaje al final del contenedor de mensajes.
3

myMessages.prependMessage(messageParameters, animate);

Agrega un mensaje al principio del contenedor de mensajes.
4

myMessages.addMessages(messages, method, animate);

Puede agregar varios mensajes a la vez.

Tiene el siguiente parámetro:

  • messages - Proporciona una matriz de mensajes para agregar, que debe representarse como un objeto con parámetros de mensaje.
5

myMessages.removeMessage(message);

Se utiliza para eliminar el mensaje.

Tiene el siguiente parámetro:

  • message - Es un elemento HTML obligatorio o una cadena que elimina el elemento del mensaje.
6

myMessages.removeMessages(messages);

Puede eliminar los mensajes múltiples.

Tiene el siguiente parámetro:

  • messages - Es una matriz requerida con elementos HTML o cadena que elimina los mensajes.
7

myMessages.scrollMessages();

Puede desplazarse por los mensajes de arriba a abajo y viceversa, según el primer parámetro del mensaje nuevo.
8

myMessages.layout();

El diseño automático se puede aplicar a los mensajes.
9

myMessages.clean();

Se utiliza para limpiar los mensajes.
10

myMessages.destroy();

Se usa para destruir los mensajes.

Parámetros de mensaje único

La siguiente tabla muestra los parámetros para un solo mensaje con descripción.

S. No Descripción de parámetros Tipo Defecto
1

text

Define el texto del mensaje, que podría ser una cadena HTML.

 cuerda -
2

name

Especifica el nombre del remitente.

 cuerda -
3

avatar

Especifica la cadena de URL del avatar del remitente.

 cuerda -
4

time

Especifica la cadena de tiempo del mensaje como '9:45 AM', '18: 35 '.

 cuerda -
5

type

Proporciona el tipo de mensaje, ya sea que se pueda enviar o recibir.

 cuerda expedido
6

label

Define la etiqueta del mensaje.

 cuerda -
7

day

Da la cadena del día del mensaje como 'domingo', 'lunes', 'ayer', etc.

 cuerda -

Inicializar mensajes con HTML

Puede inicializar los mensajes con HTML sin JavaScript utilizando la clase messages-init adicional a los mensajes y utilizar los atributos de datos para pasar los parámetros necesarios como se muestra en el fragmento de código que se proporciona a continuación:

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

Ejemplo

El siguiente ejemplo demuestra el uso de mensajes en 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>

Salida

Realicemos los siguientes pasos para ver cómo funciona el código dado anteriormente:

  • Guarde el código HTML proporcionado anteriormente como messages.html archivo en la carpeta raíz de su servidor.

  • Abra este archivo HTML como http: //localhost/messages.html y la salida se muestra como se muestra a continuación.

  • Cuando escribe un mensaje en el cuadro de mensaje y hace clic en el botón Enviar, especifica que su mensaje ha sido enviado y se muestra con un color de fondo verde en el lado derecho.

  • El mensaje que recibe aparece en el lado izquierdo con el fondo gris junto con el nombre del remitente.

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved