Framework7 - Сообщения

Описание

Сообщения являются компонентом Framework7, который обеспечивает визуализацию комментариев и системы обмена сообщениями в приложении.

Макет сообщений

Framework7 имеет следующую структуру макета сообщений -

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

Макет содержит следующие классы в разных областях -

Макет страницы сообщений

В следующей таблице показаны классы макета страницы сообщений с описанием.

S.No Классы и описание
1

messages-content

Это обязательный дополнительный класс, добавляемый к "page-content" и используемый для оболочки сообщений.
2

messages

Это обязательный элемент для пузырей сообщений.
3

messages-date

Он использует контейнер штампа даты для отображения даты и времени отправленного или полученного сообщения.
4

message

Это одно сообщение для отображения.

Внутренние части одного сообщения

В следующей таблице показаны классы внутренних частей простых сообщений с описанием.

S.No Классы и описание
1

message-name

Он предоставляет имя отправителя.
2

message-text

Обозначьте текст пузырьковым типом.
3

message-avatar

В нем указывается аватар отправителя.
4

message-label

Он определяет текстовую метку под пузырем.

Дополнительные классы для Single Message Container

В следующей таблице показаны дополнительные классы для описания контейнера одного сообщения.

S.No Классы и описание
1

message-sent

Он указывает, что сообщение было отправлено пользователем, и отображается с зеленым цветом фона справа.
2

message-received

Он используется для отображения одиночного сообщения, указывающего, что сообщение было получено пользователем, и остается слева с серым цветом фона.
3

message-pic

Это дополнительный класс для вывода изображения с одним сообщением.
4

message-with-avatar

Это дополнительный класс для отображения одного сообщения (полученного или отправленного) с аватаром.
5

message-with-tail

Вы можете добавить пузырек для отдельного сообщения (полученного или отправленного).

Дополнительные доступные классы для одного сообщения

В следующей таблице показаны доступные классы для одного сообщения с описанием.

S.No Классы и описание
1

message-hide-name

Это дополнительный класс для сокрытия имени сообщения для отдельного сообщения (полученного или отправленного).
2

message-hide-avatar

Это дополнительный класс для скрытия аватара сообщения для отдельного сообщения (полученного или отправленного).
3

message-hide-label

Это дополнительный класс для скрытия метки сообщения для отдельного сообщения (полученного или отправленного).
4

message-last

Вы можете использовать этот класс, чтобы указать последнее полученное или отправленное сообщение в текущем разговоре одним отправителем для одного сообщения (полученного или отправленного).
5

message-first

Вы можете использовать этот класс, чтобы указать первое полученное или первое отправленное сообщение в текущем разговоре одним отправителем для одного сообщения (полученного или отправленного).

Инициализация сообщений с помощью JavaScript

Вы можете инициализировать сообщения с помощью JavaScript, используя следующий метод -

myApp.messages(messagesContainer, parameters)

Метод принимает два варианта:

  • messagesContainer - Это обязательный элемент HTML или строка, которая включает элемент HTML контейнера сообщений.

  • parameters - Определяет объект с параметрами сообщений.

Параметры сообщений

В следующей таблице приведены параметры сообщений с описанием.

S.No Параметр и описание Тип По умолчанию
1

autoLayout

Он добавляет дополнительные необходимые классы к каждому сообщению, включив его.

 логический правда
2

newMessagesFirst

Вы можете отображать сообщение вверху, а не внизу, включив его.

 логический ложный
3

messages

Он отображает массив сообщений, в котором каждое сообщение должно быть представлено как объект с параметрами сообщения.

 массив -
4

messageTemplate

Он отображает шаблон отдельного сообщения.

 строка -

Свойства сообщений

В следующей таблице показаны свойства сообщений с описанием.

S.No Описание недвижимости
1

myMessages.params

Вы можете инициализировать переданные параметры с помощью объекта.
2

myMessages.container

Определяет элемент DOM7 с HTML-контейнером панели сообщений.

Методы сообщений

В следующей таблице показаны методы сообщений с описанием.

S.No Метод и описание
1

myMessages.addMessage(messageParameters, method, animate);

Сообщение можно добавить в начало или в конец с помощью параметра метода.

Он имеет следующие параметры -

  • messageParameters - Предоставляет параметры сообщения для добавления.

  • method - Это строковый тип, который добавляет сообщение в начало или в конец контейнера сообщений.

  • animate- Это логический тип, который добавляет сообщение без перехода или анимации прокрутки, задав для него значение false. По умолчанию это будет правда.
2

myMessages.appendMessage(messageParameters, animate);

Он добавляет сообщение в конец контейнера сообщений.
3

myMessages.prependMessage(messageParameters, animate);

Он добавляет сообщение в начало контейнера сообщений.
4

myMessages.addMessages(messages, method, animate);

Вы можете добавить несколько сообщений одновременно.

У него есть следующий параметр -

  • messages - Предоставляет массив сообщений для добавления, который должен быть представлен как объект с параметрами сообщения.
5

myMessages.removeMessage(message);

Он используется для удаления сообщения.

У него есть следующий параметр -

  • message - Это обязательный элемент HTML или строка, удаляющая элемент сообщения.
6

myMessages.removeMessages(messages);

Вы можете удалить несколько сообщений.

У него есть следующий параметр -

  • messages - Это обязательный массив с элементами HTML или строка, удаляющая сообщения.
7

myMessages.scrollMessages();

Вы можете прокручивать сообщения сверху вниз и наоборот в зависимости от первого параметра нового сообщения.
8

myMessages.layout();

К сообщениям можно применить автоматический макет.
9

myMessages.clean();

Он используется для очистки сообщений.
10

myMessages.destroy();

Он используется для уничтожения сообщений.

Параметры одного сообщения

В следующей таблице показаны параметры для одного сообщения с описанием.

S.No Параметр и описание Тип По умолчанию
1

text

Он определяет текст сообщения, который может быть строкой HTML.

 строка -
2

name

В нем указывается имя отправителя.

 строка -
3

avatar

Он определяет строку URL аватара отправителя.

 строка -
4

time

Он определяет строку времени сообщения, например «9:45 AM», «18: 35».

 строка -
5

type

Он предоставляет тип сообщения, может ли оно быть отправлено или получено.

 строка послал
6

label

Он определяет метку сообщения.

 строка -
7

day

Он дает строку дня сообщения, такую ​​как «воскресенье», «понедельник», «вчера» и т. Д.

 строка -

Инициализация сообщений с помощью HTML

Вы можете инициализировать сообщения с помощью HTML без JavaScript, используя дополнительный класс messages-init для сообщений и используя атрибуты data- для передачи необходимых параметров, как показано во фрагменте кода, приведенном ниже -

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

пример

В следующем примере демонстрируется использование сообщений в 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>

Вывод

Давайте выполним следующие шаги, чтобы увидеть, как работает приведенный выше код -

  • Сохраните указанный выше HTML-код как messages.html файл в корневой папке вашего сервера.

  • Откройте этот HTML-файл как http: //localhost/messages.html, и результат отобразится, как показано ниже.

  • Когда вы вводите сообщение в окно сообщения и нажимаете кнопку «Отправить», оно указывает, что ваше сообщение было отправлено, и отображается с зеленым цветом фона справа.

  • Сообщение, которое вы получите, появится слева на сером фоне вместе с именем отправителя.

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