Framework7 - Message Bar

Description

Framework7 provides special resizable toolbar to work with the messaging system in the application.
The following code shows message bar layout:

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

In the message bar very important place is an inside of "page" and right before "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>

You can use below method for initializing message bar with JavaScrpt:

myApp.messagesbar(messagesbarContainer, parameters)

The method takes two options:

• messagesbarContainer: It's a required HTML element or string that includes messagebar container HTML element.
• parameters: It specifies an object with messagebar parameters.

For example:

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

Messagebar Parameter

maxHeight: It is used to set maximum height of textarea and will be resized depending on amount of it's text. The type of parameter is number and default value is null.

Messagebar Properties

The below table shows the messagebar properties:

S.N.	Properties & Description
1	myMessagebar.params You can specify object with passed initialization parameters.
2	myMessagebar.container You can specify dom7 element with messagebar container HTML element.
3	myMessagebar.textarea You can specify dom7 element with messagebar textarea HTML element.

Messagebar Methods

The below table shows the messagebar methods:

S.N.	Methods & Description
1	myMessagebar.value(newValue); It sets messagebar textarea value/text and returns messagebar textarea value, if newValue is not specified.
2	myMessagebar.clear(); It clears the textarea and updates/resets the size.
3	myMessagebar.destroy(); It destroy messagebar instance.

Initialize Messagebar with HTML

You can initialize the messagebar using HTML without JavaScript methods and properties by adding the messagebar-init class to the .messagebar and you can pass required parameters using data- attributes.
The following code specifies initialization of messagebar with 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>  

Access to Messagebar's Instance

It is possible to access message bar instance, if you initialize it by using HTML and It is achieved by using the f7 Message bar property of its container element.

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

You can see the example of Messagebar which is explained in this link