Skip to content

Instantly share code, notes, and snippets.

@Gutek
Created March 9, 2012 12:47
Show Gist options
  • Save Gutek/2006389 to your computer and use it in GitHub Desktop.
Save Gutek/2006389 to your computer and use it in GitHub Desktop.
Twitter Bootstrap - add alert
<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>
(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