Lightweight Android Style Snackbar Plugin For jQuery - Smackbar

Smackbar is a super small (~2kb) jQuery plugin used to create Android and Material Design inspired snackbars that will automatically disappear after a timeout or after user interaction.

How to use it:

1. Load the main style sheet smackbar.css in the header of the document to style the snackbars.

<link href="smackbar.css" rel="stylesheet">

2. Load JQuery library and the JavaScript file smackbar.js at the end of the document to improve the page load time.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="smackbar.js"></script>

3. Display a default snackbar with custom message text in the screen.

$.smackbar({
  message: 'Hello World!'
})

4. Display a default snackbar with a custom button in the screen.

$.smackbar({
  message: 'Hello World!',
  button: {
    text: 'Dismiss',
    onclick: function() {
      console.log('clicked the button')
    }
  },
})

5. Change the default autohide timeout.

$.smackbar({
  message: 'Hello World!',
  timeout: 4000
})

6. Fire a callback function when the snackbar is closed.

$.smackbar({
  message: 'Hello World!',
  onclose: function() {
    // ...
  }
})

Change log:

2016-10-31

• use var again since no js transpiler is there yet

2016-10-17

• add higher timeout to ensure animation
• nested in parent class, fix transition

2016-10-07

• v1.1.0

2016-10-02

• throw error when no args are given
• changed 'toast' to 'smackbar'

---

This awesome jQuery plugin is developed by steebchen. For more Advanced Usages, please check the demo page or visit the official website.