An open API service indexing awesome lists of open source software.

https://github.com/jrummell/bootstrap.message

A simple jQuery plugin that uses bootstrap alerts to display info and error messages.
https://github.com/jrummell/bootstrap.message

bootstrap jquery jquery-plugin

Last synced: about 2 months ago
JSON representation

A simple jQuery plugin that uses bootstrap alerts to display info and error messages.

Awesome Lists containing this project

README

          

# jQuery Bootstrap Message

A simple jQuery plugin that displays info and error messages.

Install with npm:

[![bootstrap-mesage on npm](https://img.shields.io/npm/v/bootstrap-message.svg)](https://www.npmjs.com/package/bootstrap-message)

```bash
> npm i bootstrap-message
```

## Usage

### Options

All options are optional.

| option | values | default | description |
| ------- | ---------------- | --------------------------------- | -------------------------------------------------------------------------------------------- |
| message | any text or html | inner html of the matched element | the message |
| type | info, error | info | the type of message |
| dismiss | true, false | true | if true, "Click to dismiss" is appended to the message and clicking it will hide the message |

### Methods

| method | arguments | description |
| ------- | --------- | ----------------------------------------------------------------------------------------- |
| show | none | shows the message |
| hide | none | hides the message |
| options | options | changes the options |
| destroy | none | restores the matched element to the state it was in before the message plugin was applied |

### Examples

```html

$(document).ready(function() {
$("#message1").message();
$("#message2").message({ type: "error" });
$("#message3").message({
type: "info",
message: "Here's an info message with dynamic content."
});
$("#message4").message({ dismiss: false });
$("#message5").message();
$("#message6").message({ dismiss: false });

$("#message5-button").click(function() {
$("#message5").message("options", {
type: "error",
message: "Error"
});
});

$("#message6-hide").click(function() {
$("#message6").message("hide");
});

$("#message6-show").click(function() {
$("#message6").message("show");
});
});

Here's an info message.

Here's an error message.


Here's an info message without dismiss.



Click the following button to change this to an error.

Change to Error


Click the following buttons to show or hide.

Hide
Show

```

## Demo

[Demo](http://rawgit.com/jrummell/bootstrap.message/master/demo/index.html)