Framework7 - Панель сообщений

Описание

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

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

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

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

<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 контейнера панели сообщений.

• parameters - Указывает объект с параметрами панели сообщений.

Например -

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

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

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

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

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

S.No	Свойства и описание
1	myMessagebar.params Вы можете указать объект с переданными параметрами инициализации.
2	myMessagebar.container Вы можете указать элемент dom7 с элементом HTML контейнера панели сообщений.
3	myMessagebar.textarea Вы можете указать элемент dom7 с помощью элемента HTML textarea панели сообщений.

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

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

S.No	Методы и описание
1	myMessagebar.value(newValue); Он устанавливает значение / текст текстовой области панели сообщений и возвращает значение текстовой области панели сообщений, если newValue не указано.
2	myMessagebar.clear(); Он очищает текстовое поле и обновляет / сбрасывает размер.
3	myMessagebar.destroy(); Он уничтожает экземпляр панели сообщений.

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

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

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

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

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