-
Get Started
-
Events
-
Router / Navigation
-
Components
- App / Core
- Accordion / Collapsible
- Action Sheet / Actions
- Autocomplete
- Badge
- Block / Content Block
- Button
- Calendar / Datepicker
- Cards
- Checkbox
- Chips / Tags
- Contacts List
- Data Table
- Dialog
- Floating Action Button
- Form Data / Storage
- Grid / Layout Grid
- Icons
- Infinite Scroll
- Inputs / Form Inputs
- Lazy Load
- Link
- List View
- List Index
- Login Screen
- Messagebar
- Messages
- Navbar
- Notification
- Page
- Panel / Side Panels
- Photo Browser
- Picker
- Popover
- Popup
- Preloader
- Progressbar
- Pull to Refresh
- Radio
- Range Slider
- Searchbar
- Sheet Modal
- Smart Select
- Sortable List
- Statusbar
- Stepper
- Subnavbar
- Swiper
- Swipeout
- Tabs
- Timeline
- Toast
- Toggle
- Toolbar / Tabbar
- Video Intelligence (vi)
- View / Router
- Virtual List
-
Framework7 Icons
-
Styling
-
Dom7
-
Template7
-
Fast Clicks
-
Utilities
-
Plugins API
-
Custom Build
Messagebar
Framework7 comes with special resizealbe toolbar for usage with Messages
Messagebar Layout
Messagebar layour is pretty simple:
<div class="toolbar messagebar">
<div class="toolbar-inner">
<div class="messagebar-area">
<!-- messagebar attachments -->
<div class="messagebar-attachments">...</div>
<!-- messagebar resizable textarea -->
<textarea class="resizable" placeholder="Message"></textarea>
</div>
<a href="#" class="link">Send</a>
</div>
<!-- messagebar sheet -->
<div class="messagebar-sheet">...</div>
</div>
Where
messagebar-attachments
- block with messagebar attachments. Optionalmessagebar-sheet
- block with messagebar sheet. Optional
Messagebar place is very important, it should be inside of page
and right before page-content
:
<div class="page">
<!-- navbar -->
<div class="navbar">...</div>
<!-- messagebar -->
<div class="toolbar messagebar">...</div>
<!-- page-content/messages-content -->
<div class="page-content messages-content">
... messages
</div>
</div>
Messagebar Sheet Layout
If need additional sheet with, for example, images that we can attach to message then we use extra block designed for this:
<div class="messagebar-sheet">
<!-- selectable sheet image -->
<label class="checkbox messagebar-sheet-image" style="background-image:url(path/to/image1.png)">
<input type="checkbox">
<i class="icon icon-checkbox"></i>
</label>
<!-- another selectable sheet image -->
<label class="checkbox messagebar-sheet-image" style="background-image:url(path/to/image2.png)">
<input type="checkbox">
<i class="icon icon-checkbox"></i>
</label>
<!-- some custom sheet item -->
<div class="messagebar-sheet-item">
<!-- any custom content here -->
</div>
</div>
Messagebar Attachments Layout
Messages attachments block is designed to display currently attached message items/images:
<div class="messagebar-attachments">
<!-- image attachment -->
<div class="messagebar-attachment">
<img src="path/to/image1.png">
</div>
<!-- deletable image attachment -->
<div class="messagebar-attachment">
<img src="path/to/image2.png">
<!-- attachment delete button -->
<span class="messagebar-attachment-delete"></span>
</div>
</div>
Messagebar App Methods
Now, when we have Messagebar' HTML, we need to initialize it. We need to use related App's method:
app.messagebar.create(parameters) | Initialize Messagebar with parameters
|
app.messagebar.destroy(el) | Destroy Messagebar instance
|
app.messagebar.get(el) | Get Messagebar instance by HTML element
|
Messagebar Parameters
Let's look on list of all available parameters:
Parameter | Type | Default | Description |
---|---|---|---|
el | string HTMLElement |
CSS selector or HTML element of messagebar element (div class="messagebar" ) |
|
textareaEl | string HTMLElement |
CSS selector or HTML element of messagebar textarea element. By default (if not passed) will try to look for textarea inside of messagebar |
|
maxHeight | number | null | Max height of textarea when it resized depending on amount of its text |
attachments | array | [] | Array with attachments. For example ['path/to/image1.png', 'path/to/image2.png'] |
resizePage | boolean | true | Disable if you don't want to resize messages page when messagebar textarea size changed |
on | object | Object with events handlers. For example:
|
|
Render functions | |||
renderAttachments | function(attachments) | Function to render attachments block. Must return full attachments HTML string | |
renderAttachment | function(attachment) | Function to render single attachment. Must return full attachment HTML string |
Messagebar Methods & Properties
So to create Messagebar we have to call:
var messagebar = app.messagebar.create({ /* parameters */ })
After we initialize Messagebar we have its initialized instance in variable (like messagebar
variable in example above) with helpful methods and properties:
Properties | |
---|---|
messagebar.el | Messagebar HTML element. |
messagebar.$el | Dom7 element with messagebar HTML element. |
messagebar.textareaEl | Messagebar textarea HTML element |
messagebar.$textareaEl | Dom7 element with messagebar textarea HTML element |
messagebar.params | Object with passed initialization parameters |
messagebar.attachments | Array with messagebar attachments |
Methods | |
messagebar.getValue(); | Get messagebar textarea value |
messagebar.setValue(value); | Set messagebar textarea value/text |
messagebar.clear(); | Clear textarea and update/reset its size |
messagebar.focus(); | Focus messagebar textarea |
messagebar.blur(); | Remove focus from messagebar textarea |
messagebar.setPlaceholder(placeholder) | Set/change messagebar placeholder text |
messagebar.resizePage() | Force Messagebar to resize messages page depending on messagebar height/size |
messagebar.attachmentsCreate() | Dynamically create attachments block HTML element |
messagebar.attachmentsShow() | Show attachments block |
messagebar.attachmentsHide() | Hide attachments block |
messagebar.attachmentsToggle() | Toggle attachments block |
messagebar.renderAttachments() | Render attachments block based on attachments data |
messagebar.sheetCreate() | Dynamically create messagebar sheet block HTML element |
messagebar.sheetShow() | Show messagebar sheet |
messagebar.sheetHide() | Hide messagebar sheet |
messagebar.sheetToggle() | Toggle messagebar sheet |
messagebar.destroy(); | Destroy messagebar instance |
Messagebar Events
Messagebar will fire the following DOM events on messagebar element and events on app and messagebar instance:
DOM Events
Event | Target | Description |
---|---|---|
messagebar:change | Messagebar Element<div class="messagebar"> | Event will be triggered after messagebar textarea value changed |
messagebar:focus | Messagebar Element<div class="messagebar"> | Event will be triggered when messagebar textarea gets focus |
messagebar:blur | Messagebar Element<div class="messagebar"> | Event will be triggered when messagebar textarea loses focus |
messagebar:resizepage | Messagebar Element<div class="messagebar"> | Event will be triggered when messagebar resizes messages page |
messagebar:attachmentdelete | Messagebar attachment element<div class="messagebar-attachment"> | Event will be triggered after click on messagebar attachment delete button |
messagebar:attachmentclick | Messagebar attachment element<div class="messagebar-attachment"> | Event will be triggered on messagebar attachment click |
messagebar:beforedestroy | Messagebar Element<div class="messagebar"> | Event will be triggered right before Messagebar instance will be destroyed |
App and Messagebar Instance Events
Messagebar instance emits events on both self instance and app instance. App instance events has same names prefixed with messagebar
.
Event | Target | Arguments | Description |
---|---|---|---|
change | messagebar | (messagebar) | Event will be triggered after messagebar textarea value changed. As an argument event handler receives messagebar instance |
messagebarChange | app | ||
focus | messagebar | (messagebar) | Event will be triggered when messagebar textarea gets focus. As an argument event handler receives messagebar instance |
messagebarFocus | app | ||
blur | messagebar | (messagebar) | Event will be triggered when messagebar textarea loses focus. As an argument event handler receives messagebar instance |
messagebarBlur | app | ||
resizePage | messagebar | (messagebar) | Event will be triggered when messagebar resizes messages page. As an argument event handler receives messagebar instance |
messagebarResizePage | app | ||
attachmentDelete | messagebar | (messagebar, attachmentEl, attachmentIndex) | Event will be triggered after click on messagebar attachment delete button. As an argument event handler receives messagebar instance, clicked attachment HTML element and attachment index number |
messagebarAttachmentDelete | app | ||
attachmentClick | messagebar | (messagebar, attachmentEl, attachmentIndex) | Event will be triggered on messagebar attachment click. As an argument event handler receives messagebar instance, clicked attachment HTML element and attachment index number |
messagebarAttachmentClick | app | ||
beforeDestroy | messagebar | (messagebar) | Event will be triggered right before Messagebar instance will be destroyed |
messagebarBeforeDestroy | app |
Messagebar Auto Initialization
If you don't need to use Messagebar API and your Messagebar is inside of the page and presented in DOM on moment of page initialization then it can be auto initialized with just adding additional messagebar-init
class to messagebar element, and all required parameters can be passed using data-
attributes:
<div class="toolbar messagebar messagebar-init" data-max-height="200">
<div class="toolbar-inner">
<div class="messagebar-area">
<textarea placeholder="Message"></textarea>
</div>
<a href="#" class="link">Send</a>
</div>
</div>
Parameters that used in camelCase, for example maxHeight, in data- attributes should be used in kebab-case as data-max-height
Examples
<div class="page">
<div class="navbar">
<div class="navbar-inner">
<div class="title">Messages</div>
</div>
</div>
<div class="toolbar messagebar">
<div class="toolbar-inner">
<a class="link toggle-sheet" href="#">
<i class="icon f7-icons ios-only">camera_fill</i>
<i class="icon material-icons md-only">camera_alt</i>
</a>
<div class="messagebar-area">
<textarea placeholder="Message"></textarea>
</div>
<a class="link" href="#">Send</a>
</div>
<div class="messagebar-sheet"></div>
</div>
<div class="page-content messages-content">
<div class="messages">
...
</div>
</div>
</div>
var app = new Framework7();
var $$ = Dom7;
// Init Messages
var messages = app.messages.create({
...
});
// Init messagebar
var messagebar = app.messagebar.create({
el: '.messagebar',
attachments: []
});
// Available Images
var images = [
'http://lorempixel.com/300/300/cats/1/',
'http://lorempixel.com/200/300/cats/2/',
'http://lorempixel.com/400/300/cats/3/',
'http://lorempixel.com/300/150/cats/4/',
'http://lorempixel.com/150/300/cats/5/',
'http://lorempixel.com/300/300/cats/6/',
'http://lorempixel.com/300/300/cats/7/',
'http://lorempixel.com/200/300/cats/8/',
'http://lorempixel.com/400/300/cats/9/',
'http://lorempixel.com/300/150/cats/10/'
]
// Create sheet items
var sheetHtml = '';
images.forEach(function (image) {
sheetHtml +=
'<label class="checkbox messagebar-sheet-image" style="background-image:url(' + image + ')">' +
'<input type="checkbox">' +
'<i class="icon icon-checkbox"></i>' +
'</label>';
});
$$('.messagebar-sheet').html(sheetHtml);
/*========================
Handle Attachments
========================*/
function checkAttachments() {
if (messagebar.attachments.length > 0) {
messagebar.attachmentsShow();
messagebar.setPlaceholder('Add comment or Send');
} else {
messagebar.attachmentsHide();
messagebar.setPlaceholder('Message');
}
}
$$('.messagebar-sheet-image input').on('change', function (e) {
var index = $$(e.target).parents('.messagebar-sheet-image').index();
var image = images[index];
if (e.target.checked) {
// Add to attachments
messagebar.attachments.unshift(image)
} else {
// Remove from attachments
messagebar.attachments.splice(messagebar.attachments.indexOf(image), 1);
}
messagebar.renderAttachments();
checkAttachments();
});
messagebar.on('attachmentDelete', function (messagebar, attachmentEl, attachmentIndex) {
var image = messagebar.attachments.splice(attachmentIndex, 1)[0];
messagebar.renderAttachments();
checkAttachments();
// Uncheck in sheet
var imageIndex = images.indexOf(image);
messagebar.$el.find('.messagebar-sheet .checkbox').eq(imageIndex).find('input').prop('checked', false);
});
/*========================
Toggle Sheet
========================*/
$$('a.toggle-sheet').on('click', function () {
messagebar.sheetToggle();
});