diff --git a/README.md b/README.md index e4a65bc..f6bd9ae 100644 --- a/README.md +++ b/README.md @@ -3,6 +3,37 @@ bootstrap-notify Bootstrap alert system made better. +Added [Font Awesome](http://fortawesome.github.io/Font-Awesome/) support. +It's now easy to customize your notifications. For example, you can create success and error messages: + +Code: + + $('#success-button').click(function(){ + $('#id').notify( + { message: + { text: 'Great! Operation successful :)' }, + type: 'success', + icon: { + symbol: 'icon-ok', + color: '#5A5' + } + } + ).show(); + }); + + $('#error-button').click(function(){ + $('#id').notify( + { message: + { text: 'Uh-oh.. there was an error :(' }, + type: 'danger', + icon: { + symbol: 'icon-warning-sign', + color: '#D54' + } + } + ).show(); + }); + # Copyright Copyright 2013 Nijiko Yonskai @nijikokun diff --git a/examples/index.html b/examples/index.html index 849b638..d33e452 100644 --- a/examples/index.html +++ b/examples/index.html @@ -12,6 +12,9 @@ + + + @@ -40,8 +43,8 @@
 
- - + +
@@ -51,10 +54,18 @@
 
 
-
+
+
+ +
+ +
+ +
+
@@ -234,6 +245,16 @@

Custom Styles Included:

'You should star this!', 'Holy cow, another alert!' ], + success: [ + 'Operation successful', + 'You\'re the boss', + 'All went fine' + ], + error: [ + 'There was an error', + 'Something went wrong', + 'Uh-oh' + ], positions: [ 'bottom-right', 'bottom-left', @@ -266,6 +287,14 @@

Custom Styles Included:

$('.' + select(example.positions)).notify({ message: { text: select(example.messages) }, type: select(example.styles) }).show(); }); + $('.show-success-notification').click(function (e) { + $('.' + select(example.positions)).notify({ message: { text: select(example.success) }, type: 'success', icon: { symbol: 'icon-ok', color: '#5A5' } }).show(); + }); + + $('.show-error-notification').click(function (e) { + $('.' + select(example.positions)).notify({ message: { text: select(example.error) }, type: 'danger', icon: { symbol: 'icon-warning-sign', color: '#D54' } }).show(); + }); + /* Custom Styles */ var custom = [ 'bangTidy', diff --git a/js/bootstrap-notify.js b/js/bootstrap-notify.js index 4b5c5c4..3c55a05 100644 --- a/js/bootstrap-notify.js +++ b/js/bootstrap-notify.js @@ -45,6 +45,9 @@ else if (this.options.message.text) this.$note.text(this.options.message.text); + if (this.options.message) + this.$note.prepend(' '); + if (this.options.closable) this._link = $('×'), $(this._link).on('click', $.proxy(Notification.onClose, this)), @@ -86,6 +89,10 @@ delay: 3000 }, message: null, + icon: { + symbol: null, + color: '#000' + }, onClose: function () {}, onClosed: function () {} }