Created
March 9, 2012 12:47
-
-
Save Gutek/2006389 to your computer and use it in GitHub Desktop.
Twitter Bootstrap - add alert
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <!-- bootstrap styles --> | |
| </head> | |
| <body> | |
| <div class="alerts"> | |
| </div> | |
| <button id="add"> | |
| Add Alert</button> | |
| <!-- jquery js files and bootstrap files --> | |
| <script type="text/javascript"> | |
| $(function () { | |
| $('#add').click(function (evt) { | |
| evt.preventDefault(); | |
| alerts.msg.success('Im alive!!!', 'Yuuuupi!', false); | |
| alerts.msg.success('Im alive!!!', 'Yuuuupi!', true); | |
| alerts.msg.success('Im alive!!!', true); | |
| alerts.msg.success('Im alive!!!', false); | |
| alerts.msg.warn('Im alive!!!', 'Yuuuupi!', false); | |
| alerts.msg.warn('Im alive!!!', 'Yuuuupi!', true); | |
| alerts.msg.warn('Im alive!!!', true); | |
| alerts.msg.warn('Im alive!!!', false); | |
| alerts.msg.error('Im alive!!!', 'Yuuuupi!', false); | |
| alerts.msg.error('Im alive!!!', 'Yuuuupi!', true); | |
| alerts.msg.error('Im alive!!!', true); | |
| alerts.msg.error('Im alive!!!', false); | |
| alerts.msg.info('Im alive!!!', 'Yuuuupi!', false); | |
| alerts.msg.info('Im alive!!!', 'Yuuuupi!', true); | |
| alerts.msg.info('Im alive!!!', true); | |
| alerts.msg.info('Im alive!!!', false); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function(window, $, undefined) { | |
| if(!String.prototype.format) { | |
| String.prototype.format = function () { | |
| var str = this; | |
| for (var i = 0; i < arguments.length; i++) { | |
| str = str.replace('{' + i + '}', arguments[i]); | |
| } | |
| return str; | |
| }; | |
| } | |
| // alerts encapsulate alerting information that use Twitter Bootstrap to add | |
| // close functionality to messages/alerts | |
| // | |
| // use it like this: | |
| // | |
| // window.[Name].msg.success('my message', 'my title', true); | |
| // | |
| var Alerts = (function(){ | |
| // global alerts placeholder, where alerts will be added | |
| var $alerts = $('.alerts'); | |
| // function that checks what has been provided and returns defaults | |
| // for instance if title is bool it probably is what user provided for pernament | |
| // | |
| // rules: | |
| // | |
| // - if `title` is undefined, use defaultTitle value | |
| // - if `title` is bool, it means it's `permanent` value | |
| // - if `permanent` is undefined, user `false` value for it | |
| var getSettings = function(defaultTitle, message, title, permanent) { | |
| if(title && !permanent) { | |
| if(title === true || title === false) { | |
| permanent = title; | |
| title = undefined; | |
| } else { | |
| permanent = false; | |
| } | |
| } | |
| if(!title) { | |
| title = defaultTitle; | |
| } | |
| return { | |
| message: message, | |
| title: title, | |
| permanent: permanent | |
| } | |
| }; | |
| // method constructs an alert element - HTML string based on the options | |
| // passed by `getSettings` | |
| // | |
| // `type` defines a type of the alert to show: | |
| // | |
| // - success | |
| // - warning | |
| // - error | |
| // - info | |
| var getAlert = function(type, options) { | |
| // default alert template | |
| var msg = '<div class="alert alert-block {0} fade in" id="licence-submit-error">' + | |
| '{1}' + | |
| '<h4 class="alert-heading">{2}</h4>' + | |
| '<p>' + | |
| '{3}' + | |
| '</p>' + | |
| '</div>'; | |
| // checks if permanent is true or false, if true do not show X button | |
| var permanent = function(isPermanent) { | |
| if(isPermanent) { | |
| return ''; | |
| } | |
| return '<a class="close" data-dismiss="alert" href="#">×</a>'; | |
| }; | |
| // checks for type of alert, if it's `warning` there is no point | |
| // of adding a class | |
| var alertType = function(baseType) { | |
| if(baseType === 'warning') { | |
| return ''; | |
| } | |
| return 'alert-' + baseType; | |
| }; | |
| msg = msg.format(alertType(type), permanent(options.permanent), options.title, options.message); | |
| return msg; | |
| }; | |
| return { | |
| // access property to alerts functionality | |
| msg: { | |
| // show warning alert | |
| warn: function(message, title, permanent) { | |
| var alert = getAlert('warning', getSettings('Warning!', message, title, permanent)), | |
| $alert = $(alert); | |
| $alerts.append($alert); | |
| $alert.alert(); | |
| }, | |
| // show success alert | |
| success: function(message, title, permanent){ | |
| var alert = getAlert('success', getSettings('Success!', message, title, permanent)), | |
| $alert = $(alert); | |
| $alerts.append($alert); | |
| $alert.alert(); | |
| }, | |
| // show error alert | |
| error: function(message, title, permanent) { | |
| var alert = getAlert('error', getSettings('Error!', message, title, permanent)), | |
| $alert = $(alert); | |
| $alerts.append($alert); | |
| $alert.alert(); | |
| }, | |
| // show info alert | |
| info: function(message, title, pernament) { | |
| var alert = getAlert('info', getSettings('Information', message, title, pernament)), | |
| $alert = $(alert); | |
| $alerts.append($alert); | |
| $alert.alert(); | |
| } | |
| } | |
| } | |
| })(); | |
| window.alerts = Alerts; | |
| })(window, jQuery); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment