Javatpoint Logo
Javatpoint Logo

Framework7 Message Bar

Framework7 Message bar is a resizable toolbar for usage with messages. It provides a special resizable toolbar to work with messaging system in application.

Syntax for message bar layout:

The place for message bar layout is very important and it should be inside the page and right before message content.

Initialize Message bar with JavaScript

You can use the following method for initializing the message bar with JavaScript:

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:

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:

Index Property 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

Index Method 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

If you don't want to use messagebar method and properties, you can initialize it using HTML without JavaScript.

You just need to add the messagebar-init class to the .messagebar and you can pass the required parameters using data- attributes.

See the following code how to initialize the messagebar with HTML:

Next TopicFramework7 Refresh

Youtube For Videos Join Our Youtube Channel: Join Now


Help Others, Please Share

facebook twitter pinterest

Learn Latest Tutorials


Trending Technologies

B.Tech / MCA