Framework7 - Message Bar-alljchome-开发者的教程家园

Framework7 Tutorial

Framework7 Components

Framework7 Styling

Framework7 Templates

Framework7 Fast Clicks

Framework7 Useful Resources

Selected Reading

Framework7 - Message Bar

Description

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

The following code shows the message bar layout −

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

In the message bar, the inside of the "page" is very important and is at the right of "messages-content" −

<span class = "page toolbar-fixed">
   <!-- messagebar -->
   <span class = "toolbar messagebar">
      <span class = "toolbar-inner">
         <textarea placeholder = "Message"></textarea>
         <a href = "#" class = "pnk">Send</a>
      </span>
   </span>
   
   <!-- messages-content -->
   <span class = "page-content messages-content">
      <span class = "messages">
         ... messages
      </span>
   </span>
</span>

You can use the following method for initiapzing 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 initiapzation 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.

S.No

Properties & Description

myMessagebar.params

You can specify object with passed initiapzation parameters.

myMessagebar.container

You can specify dom7 element with messagebar container HTML element.

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.

S.No

Methods & Description

myMessagebar.value(newValue);

It sets messagebar textarea value/text and returns messagebar textarea value, if newValue is not specified.

myMessagebar.clear();

It clears the textarea and updates/resets the size.

myMessagebar.destroy();

It destroy messagebar instance.

Initiapze Messagebar with HTML

You can initiapze 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 initiapzation of messagebar with HTML −

<span class = "toolbar messagebar messagebar-init" data-max-height = "200">
   <span class = "toolbar-inner">
      <textarea placeholder = "Message"></textarea>
      <a href = "#" class = "pnk">Send</a>
   </span>
</span>

Access to Messagebar s Instance

It is possible to access the message bar instance, if you initiapze 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 pnk