Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 

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

About

A library agnostic, mobile friendly, css animated UI widget. Sliding messages in height-constrained pane.

Resources

License

Releases

No releases published

Packages

No packages published
You can’t perform that action at this time.