Framework7 - Mensagens

Descrição

As mensagens são componentes do Framework7, que permite a visualização de comentários e sistema de mensagens no aplicativo.

Layout de mensagens

O framework7 tem a seguinte estrutura de layout de mensagens -

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

O layout contém as seguintes classes em diferentes áreas -

Layout da página de mensagens

A tabela a seguir mostra as classes de layout de página de mensagens com descrição.

S.Não Classes e descrição
1

messages-content

É uma classe adicional necessária adicionada ao "conteúdo da página" e usada para wrapper de mensagens.
2

messages

É um elemento obrigatório para bolhas de mensagens.
3

messages-date

Ele usa o recipiente de carimbo de data para exibir a data e hora da mensagem enviada ou recebida.
4

message

É uma única mensagem a ser exibida.

Partes internas de mensagem única

A tabela a seguir mostra as classes de partes internas de mensagens simples com descrição.

S.Não Classes e descrição
1

message-name

Ele fornece o nome do remetente.
2

message-text

Defina o texto com o tipo de bolha.
3

message-avatar

Ele especifica o avatar do remetente.
4

message-label

Ele especifica o rótulo de texto abaixo da bolha.

Classes adicionais para contêiner de mensagem única

A tabela a seguir mostra classes adicionais para a descrição do contêiner de mensagem única.

S.Não Classes e descrição
1

message-sent

Ele especifica que a mensagem foi enviada pelo usuário e é exibida com a cor de fundo verde no lado direito.
2

message-received

É utilizado para exibir a única mensagem indicando que a mensagem foi recebida pelo usuário e fica do lado esquerdo com fundo cinza.
3

message-pic

É uma classe adicional para exibição de imagem com uma única mensagem.
4

message-with-avatar

É uma classe adicional para exibir uma única mensagem (recebida ou enviada) com avatar.
5

message-with-tail

Você pode adicionar uma cauda de bolha para uma única mensagem (recebida ou enviada).

Classes adicionais disponíveis para mensagem única

A tabela a seguir mostra as classes disponíveis para uma única mensagem com descrição.

S.Não Classes e descrição
1

message-hide-name

É uma classe adicional para ocultar o nome da mensagem de uma única mensagem (recebida ou enviada).
2

message-hide-avatar

É uma classe adicional para ocultar o avatar da mensagem para uma única mensagem (recebida ou enviada).
3

message-hide-label

É uma classe adicional para ocultar o rótulo da mensagem para uma única mensagem (recebida ou enviada).
4

message-last

Você pode usar esta classe para indicar a última mensagem recebida ou enviada na conversa atual por um remetente para uma única mensagem (recebida ou enviada).
5

message-first

Você pode usar esta classe para indicar a primeira mensagem recebida ou enviada na conversa atual por um remetente para uma única mensagem (recebida ou enviada).

Inicializando mensagens com JavaScript

Você pode inicializar as mensagens com JavaScript usando o seguinte método -

myApp.messages(messagesContainer, parameters)

O método tem duas opções -

  • messagesContainer - É um elemento ou string HTML obrigatório que inclui o elemento HTML do contêiner de mensagens.

  • parameters - Especifica um objeto com parâmetros de mensagens.

Parâmetros de mensagens

A tabela a seguir mostra os parâmetros das mensagens com descrição.

S.Não Parâmetro e Descrição Tipo Padrão
1

autoLayout

Ele adiciona classes adicionais necessárias a cada mensagem, ativando-a.

 boleano verdadeiro
2

newMessagesFirst

Você pode exibir a mensagem na parte superior em vez de na parte inferior, ativando-o.

 boleano falso
3

messages

Ele exibe uma matriz de mensagens em que cada mensagem deve ser representada como objeto com parâmetros de mensagem.

 matriz -
4

messageTemplate

Ele exibe o modelo de mensagem única.

 corda -

Propriedades de mensagens

A tabela a seguir mostra as propriedades das mensagens com descrição.

S.Não Descrição da Propriedade
1

myMessages.params

Você pode inicializar os parâmetros passados ​​com o objeto.
2

myMessages.container

Define o elemento DOM7 com um contêiner HTML da barra de mensagens.

Métodos de Mensagens

A tabela a seguir mostra os métodos de mensagens com descrição.

S.Não Método e Descrição
1

myMessages.addMessage(messageParameters, method, animate);

A mensagem pode ser adicionada ao início ou ao final usando o parâmetro do método.

Possui os seguintes parâmetros -

  • messageParameters - Fornece parâmetros de mensagem para adicionar.

  • method - É um tipo de string que adiciona mensagem ao início ou ao final do contêiner de mensagens.

  • animate- É um tipo booleano, que adiciona uma mensagem sem qualquer transição ou animação de rolagem, definindo-a como false. Por padrão, será verdade.
2

myMessages.appendMessage(messageParameters, animate);

Ele adiciona uma mensagem ao final do contêiner de mensagem.
3

myMessages.prependMessage(messageParameters, animate);

Ele adiciona uma mensagem ao início do contêiner de mensagem.
4

myMessages.addMessages(messages, method, animate);

Você pode adicionar várias mensagens ao mesmo tempo.

Tem o seguinte parâmetro -

  • messages - Fornece uma matriz de mensagens para adicionar, que deve ser representada como objeto com parâmetros de mensagem.
5

myMessages.removeMessage(message);

É usado para remover a mensagem.

Tem o seguinte parâmetro -

  • message - É um elemento HTML obrigatório ou string que remove o elemento da mensagem.
6

myMessages.removeMessages(messages);

Você pode remover as várias mensagens.

Tem o seguinte parâmetro -

  • messages - É uma matriz necessária com elementos HTML ou string que remove as mensagens.
7

myMessages.scrollMessages();

Você pode rolar as mensagens de cima para baixo e vice-versa, dependendo do primeiro parâmetro da nova mensagem.
8

myMessages.layout();

O layout automático pode ser aplicado às mensagens.
9

myMessages.clean();

É usado para limpar as mensagens.
10

myMessages.destroy();

É usado para destruir as mensagens.

Parâmetros de mensagem única

A tabela a seguir mostra os parâmetros para uma única mensagem com descrição.

S.Não Parâmetro e Descrição Tipo Padrão
1

text

Ele define o texto da mensagem, que pode ser uma string HTML.

 corda -
2

name

Ele especifica o nome do remetente.

 corda -
3

avatar

Ele especifica a string do URL do avatar do remetente.

 corda -
4

time

Ele especifica a sequência de tempo da mensagem como '9:45 AM', '18: 35 '.

 corda -
5

type

Ele fornece o tipo de mensagem, se ela pode ser enviada ou recebida.

 corda enviei
6

label

Ele define o rótulo da mensagem.

 corda -
7

day

Ele fornece a string do dia da mensagem como 'domingo', 'segunda', 'ontem' etc.

 corda -

Inicializando mensagens com HTML

Você pode inicializar as mensagens com HTML sem JavaScript usando a classe adicional messages-init para mensagens e usar os atributos de dados para passar os parâmetros necessários conforme mostrado no trecho de código fornecido abaixo -

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

Exemplo

O exemplo a seguir demonstra o uso de mensagens no 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>

Resultado

Vamos realizar as seguintes etapas para ver como funciona o código fornecido acima -

  • Salve o código HTML fornecido acima como messages.html arquivo na pasta raiz do servidor.

  • Abra esse arquivo HTML como http: //localhost/messages.html e a saída será exibida conforme mostrado abaixo.

  • Quando você digita uma mensagem na caixa de mensagem e clica no botão Enviar, isso especifica que sua mensagem foi enviada e é exibida com a cor de fundo verde no lado direito.

  • A mensagem que você recebe aparece no lado esquerdo com o fundo cinza junto com o nome do remetente.

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