Учебники

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 – используется для установки максимальной высоты текстовой области и будет изменяться в зависимости от объема ее текста. Тип параметра – число, а значение по умолчанию – ноль .

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

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

S.No Свойства и описание
1

myMessagebar.params

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

2

myMessagebar.container

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

3

myMessagebar.textarea

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

myMessagebar.params

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

myMessagebar.container

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

myMessagebar.textarea

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

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

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

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

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

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

2

myMessagebar.clear ();

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

3

myMessagebar.destroy ();

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

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'); 

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