jquery 吐司_SnackbarJS: SnackbarJS 是轻量级的，强大的 jQuery 插件，用来创建 Material Design snackbars 和吐司效果...

SnackbarJS

SnackbarJS is a lightweight and jQuery powered plugin made to work just like the tooltips in Bootstrap.

Include it in your html page with:

...

To use it in HTML:

Click me

or with javascript:

$.snackbar({content: "This is my awesome snackbar!"});

Options

Following options are supported to customize look and behaviour:

var options = {

content: "Some text", // text of the snackbar

style: "toast", // add a custom class to your snackbar

timeout: 100, // time in milliseconds after the snackbar autohides, 0 is disabled

htmlAllowed: true, // allows HTML as content value

onClose: function(){ } // callback called when the snackbar gets closed.

}

$.snackbar(options);

Or in HTML:

data-content="Some text"

data-style="toast"

data-timeout="100"

data-html-allowed="true">

Click me

Tip: SnackbarJS returns always a jQuery element which corresponds to the snackbar DOM element, you can use it to get the ID of the element, and then do other operations with it.

Heads up!: The onClose callback is not available using the HTML syntax.

Interact with snackbars

Once you have created a snackbar you can show, hide or toggle it with:

$("#snackbarid").snackbar("show");

$("#snackbarid").snackbar("hide");

$("#snackbarid").snackbar("toggle");

#snackbarid can be both the button with the data-toggle=snackbar attribute or the snackbar element.

Calling it on a non-existing snackbar will create it before executing the specificed action.

Demo

To see SnackbarJS in action visit the demo page.

Browserify

This library is UMD compatible, so you can use it in this way:

var jquery = require('jquery');

require('snackbarjs');

var options = {

...

}

jquery.snackbar(options);