Framework7 — панель сообщений

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

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

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

В панели сообщений внутренняя часть «страницы» очень важна и находится справа от «messages-content» —

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

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

myApp.messagesbar(messagesbarContainer, parameters)

У метода есть два варианта —

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

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

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

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

Например —

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

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

maxHeight — используется для установки максимальной высоты текстовой области и будет изменяться в зависимости от объема ее текста. Тип параметра — число, а значение по умолчанию — ноль .

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

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

myMessagebar.params

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

myMessagebar.container

Вы можете указать элемент dom7 с HTML-элементом контейнера сообщений.

myMessagebar.textarea

Вы можете указать элемент dom7 с HTML-элементом textarea панели сообщений.

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

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

myMessagebar.value (новое_значение);

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

myMessagebar.clear ();

Он очищает текстовую область и обновляет / сбрасывает размер.

myMessagebar.destroy ();

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

Инициализировать панель сообщений с HTML

Вы можете инициализировать панель сообщений, используя HTML без методов и свойств JavaScript, добавив класс messagebar-init к .messagebar, и вы можете передать необходимые параметры, используя атрибуты данных .

Следующий код определяет инициализацию панели сообщений с 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>  

Доступ к экземпляру панели сообщений

Можно получить доступ к экземпляру панели сообщений, если вы инициализируете его с помощью HTML; это достигается использованием свойства панели сообщений f7 его элемента контейнера.

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

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