https://github.com/FezVrasta/snackbarjs

Create Material Design snackbars and toasts with ease.
https://github.com/FezVrasta/snackbarjs

Last synced: about 2 months ago
JSON representation

Create Material Design snackbars and toasts with ease.

• Host: GitHub
• URL: https://github.com/FezVrasta/snackbarjs
• Owner: FezVrasta
• License: mit
• Archived: true
• Created: 2014-08-21T07:43:12.000Z (about 10 years ago)
• Default Branch: master
• Last Pushed: 2021-03-09T14:14:32.000Z (over 3 years ago)
• Last Synced: 2024-05-09T19:32:46.829Z (5 months ago)
• Language: JavaScript
• Homepage: http://fezvrasta.github.io/snackbarjs/
• Size: 69.3 KB
• Stars: 641
• Watchers: 31
• Forks: 126
• Open Issues: 14
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

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

    

    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](http://fezvrasta.github.io/snackbarjs/).

Browserify

----------

This library is [UMD](https://github.com/umdjs/umd) compatible, so you can use it in this way:

```javascript

var jquery = require('jquery');

require('snackbarjs');

var options =  {

    ...

}

jquery.snackbar(options);

```