消息栏

优质

小牛编辑

137浏览

2023-12-01

Framework7提供了可缩放的工具栏，用来处理消息。

消息栏的结构

消息栏的结构是很简单的：

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

请注意它的位置，应该在“page”里面并且在“messages-content”前面：

<div class="page toolbar-fixed">
  <!-- 消息栏 -->
  <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>

Initialize Messagebar with JavaScript

Now, when we have Messagebar' HTML, we need to initialize it. We need to use related App's method:

myApp.messagebar(messagebarContainer, parameters) - initialize Messagebar with options

messagebarContainer - HTMLElement or string (with CSS Selector) of Messagebar container HTML element. Required.
parameters - object - object with Messagebar parameters. Optional.
Method returns initialized Messagebar instance

For example:

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

Note that Messagebar container should be in DOM on a moment of initialization. So if you use it not on home page, you need to initialize it within pageInit event or callback

Messagebar Parameters

Let's look on list of all available parameters:

Parameter	Type	Default	Description
maxHeight	number	null	Max height of textarea when it resized depending on amount of its text

Messagebar Methods & Properties

After we initialize Messagebar we have its initialized instance in variable (like myMessagebar variable in example above) with helpful methods and properties:

Properties
myMessagebar.params	Object with passed initialization parameters
myMessagebar.container	Dom7 element with messagebar container HTML element.
myMessagebar.textarea	Dom7 element with messagebar textarea HTML element
Methods
myMessagebar.value(newValue);	Set messagebar textarea value/text. Or return messagebar textarea value if newValue is not specified
myMessagebar.clear();	Clear textarea and update/reset its size
myMessagebar.destroy();	Destroy messagebar instance

Initialize Messagebar with HTML

If you don't need to use Messagebar methods and properties you can initialize it using HTML without JavaScript. You can do that just by adding additional "messagebar-init" class to .messagebar. In this case we may pass required parameters using data- attributes.

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

Parameters that used in camelCase, for example maxHeight, in data- attributes should be used as hypens-case as data-max-height

Access to Messagebar's Instance

If you initialize Messagebar using HTML it is still possible to access to Messagebar's instance. It is "f7Messagebar" property of messagebar's container HTML element:

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