Framework7 - Message Bar

Description

Framework7 provides special resizable toolbar to work with the messaging system in the application.

The following code shows the message bar layout −

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

In the message bar, the inside of the "page" is very important and is at the right of "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 the following method for initializing the message bar with JavaScript −

myApp.messagesbar(messagesbarContainer, parameters)

The method has two options −

  • messagesbarContainer − It is 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 the amount of its text. The type of parameter is number and the default value is null.

Messagebar Properties

The following table shows the messagebar properties −

S.No 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 following table shows the messagebar methods −

S.No 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 the required parameters using data- attributes.

The following code specifies the 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 the message bar instance, if you initialize it by using HTML; 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

Advertisements