Учебники

Framework7 — Сообщения

Декабрь 31, 2018

Сообщения являются компонентом 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

Сообщения-контент

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

2

Сообщения

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

3

Сообщения, дата

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

4

сообщение

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

Сообщения-контент

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

Сообщения

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

Сообщения, дата

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

сообщение

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

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

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

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

Сообщение имя

Предоставляет имя отправителя.

2

текст сообщения

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

3

сообщение-аватар

Указывает отправителя аватара.

4

сообщение метки

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

Сообщение имя

Предоставляет имя отправителя.

текст сообщения

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

сообщение-аватар

Указывает отправителя аватара.

сообщение метки

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

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

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

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

сообщение отправлено

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

2

сообщение доставлено

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

3

сообщение-ПИК

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

4

сообщение-с аватаром

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

5

сообщение-с хвостом

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

сообщение отправлено

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

сообщение доставлено

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

сообщение-ПИК

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

сообщение-с аватаром

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

сообщение-с хвостом

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

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

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

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

скрыть имя-сообщение

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

2

сообщение-прятки аватар

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

3

сообщение скрывать метки

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

4

сообщение, последний

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

5

сообщение-первая

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

скрыть имя-сообщение

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

сообщение-прятки аватар

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

сообщение скрывать метки

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

сообщение, последний

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

сообщение-первая

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

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

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

myApp.messages(messagesContainer, parameters)

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

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

  • параметры — это указывает объект с параметрами сообщений.

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

параметры — это указывает объект с параметрами сообщений.

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

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

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

autoLayout

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

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

newMessagesFirst

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

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

Сообщения

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

массив —
4

messageTemplate

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

строка —

autoLayout

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

newMessagesFirst

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

Сообщения

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

messageTemplate

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

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

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

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

myMessages.params

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

2

myMessages.container

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

myMessages.params

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

myMessages.container

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

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

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

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

myMessages.addMessage (messageParameters, метод, animate);

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

Имеет следующие параметры —

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

  • Метод — это строковый тип, который добавляет сообщение в начало или конец контейнера сообщений.

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

2

myMessages.appendMessage (messageParameters, animate);

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

3

myMessages.prependMessage (messageParameters, animate);

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

4

myMessages.addMessages (сообщения, метод, анимация);

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

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

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

5

myMessages.removeMessage (сообщение);

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

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

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

6

myMessages.removeMessages (сообщения);

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

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

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

7

myMessages.scrollMessages ();

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

8

myMessages.layout ();

Авто макет может быть применен к сообщениям.

9

myMessages.clean ();

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

10

myMessages.destroy ();

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

myMessages.addMessage (messageParameters, метод, animate);

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

Имеет следующие параметры —

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

Метод — это строковый тип, который добавляет сообщение в начало или конец контейнера сообщений.

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

myMessages.appendMessage (messageParameters, animate);

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

myMessages.prependMessage (messageParameters, animate);

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

myMessages.addMessages (сообщения, метод, анимация);

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

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

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

myMessages.removeMessage (сообщение);

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

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

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

myMessages.removeMessages (сообщения);

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

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

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

myMessages.scrollMessages ();

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

myMessages.layout ();

Авто макет может быть применен к сообщениям.

myMessages.clean ();

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

myMessages.destroy ();

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

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

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

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

текст

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

строка —
2

название

Указывает имя отправителя.

строка —
3

аватар

Указывает строку URL аватара отправителя.

строка —
4

время

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

строка —
5

тип

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

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

этикетка

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

строка —
7

день

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

строка —

текст

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

название

аватар

Указывает строку URL аватара отправителя.

время

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

тип

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

этикетка

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

день

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

Инициализация сообщений с помощью 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, и вывод отобразится, как показано ниже.

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

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

43
Share: