A library agnostic, mobile friendly, css animated UI widget. Sliding messages in height-constrained pane.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
demo
dist
src
.gitignore
LICENSE
README.md
gulpfile.js
package.json

README.md

mk-infopane

Kind of a status-bar or notifier. Sliding messages in area with limited height. A library agnostic, mobile friendly, css animated UI widget. Minimal restrictions on styling.

Developed for mobile, but turned out to be useful for desktops.

Demo

Inclusion

Include script and style sheet into you page:

<script src="path/to/plugin/mk-infopane.min.js"></script>
<link href="path/to/plugin/mk-infopane.min.css" rel="stylesheet">

Usage

Create html block you want to use as an infopane.

<div id="paneElement"></div>

Create infopane instance, binded to DOM element.

var pane = new mk.Infopane( paneElement[,options] );

Publish messages with different styles to pane

pane.echo(text[, options])
pane.ok  (text[, options])
pane.warn(text[, options])
pane.err (text[, options])
pane.info(text[, options])

Publish messages with custom styles

pane.print(options);

Control published messages

var message = pane.info (text, options); // create and print message
message.put(newText); // replace text in it
message.append(additionalText); // add text
setTimeout(function(){ message.unpublish(); },10000) // close it later

Pane options

  • height {integer}
  • collapse {boolean}
  • onMessage {function}
  • onMessageRemove {function}

Details and Demo