Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Bootstrap Alert controller" />
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div class="container">
    <form action="javascript:;" method="post" class="form-inline" id="form">
        <input type="text" name="message" class="input-medium" placeholder="Message" value="Hello, world!" />
        <input type="text" name="header" class="input-medium" placeholder="Header" />
        <input type="text" name="style" class="input-medium" placeholder="Style, e.g. info, success, error" />
        <input type="number" name="hidden" min="0" max="99999999" step="1000" class="input-medium" placeholder="Milliseconds to disappear" />
        <label><input type="checkbox" name="scroll" value="1" />Scroll to the top?</label>
        <br />
        <button type="button" class="btn" data-action="insert">Show</button>
        <button type="button" class="btn" data-action="clear">Clear</button>
    </form>
</div>
</body>
</html>
​
 
input{font-size:small}
input[type=text],input[type=number]{height:2em}
 
    /**
     * message for bootstrap
     */
    var message = (function ($) {
        if (!$.isFunction($.fn.alert)) {
            console.log('Twitter Bootstrap Alert is not loaded.');
            return false;
        }
        var alert = $('#message').length ? $('#message') : $('<div id="message"></div>').prependTo('body');
        var is_number = function (n) {
            return !isNaN(parseFloat(n, 10)) && isFinite(n);
        };
        return {
            /**
             * Show alert
             * @param $option {object} 
             *   message {string} Alert Context
             *   header {string} Alert header
             *   style {string} Alert style (e.g. info, success, error, block)
             *   hidden {int|bool} Disappear after the milliseconds (false)
             *   scroll {bool} Scroll to the top? (true)
             */
            show: function (option) {
                // default setting
                var def = {
                    message: null, // context
                    header: null, // header
                    style: null, // alert style
                    hidden: false, // disappear after seconds
                    scroll: false // scroll to first alert
                };
                // combine options
                var args = $.extend(def, option);
                var html = '<div class="alert hide fade in"><button type="button" class="close" data-dismiss="alert">&times;</button><strong></strong> <span></span></div>';
                var clone = $(html).clone();
                var ele = {
                    body: clone.find('span:first'),
                    header: clone.find('strong:first')
                };
                var id = new Date().getTime();
                clone.attr('id', id);
​
                // message must be given
                if (args.message && 'string' === typeof args.message) {
                    ele.body.html(args.message);
                    if (args.header && 'string' === typeof args.header) {
                        ele.header.text(args.header);
                    }
                    if (args.style && 'string' === typeof args.style) {
                        clone.removeClass('alert-error alert-info alert-success alert-block').addClass('alert-' + args.style.replace('alert-', ''));
                    }
                    if (is_number(args.hidden)) {
                        if (0 < args.hidden) {
                            window.setTimeout(function () {
                                $('#' + id).alert('close');
                            }, parseInt(args.hidden, 10));
                        }
                    }
                    clone.show().alert().appendTo(alert);
                    // scroll to the top?                     
                    if (args.scroll) {
                        $('html,body').animate({
                            scrollTop: (alert.find('.alert:first').offset().top - 60)
                        });
                    }
                }
            },
            /**
             * close all alert
             */
            close: function () {
                alert.find('.alert').alert('close');
            }
        };
    }(jQuery));
​
    // serialize form
    $.fn.serializeObject = function () {
        var o = {}, a = this.serializeArray();
        $.each(a, function () {
            if (o[this.name] !== undefined) {
                if (!o[this.name].push) {
                    o[this.name] = [o[this.name]];
                }
                if ('' !== this.value) {
                    o[this.name].push(this.value);
                }
            } else {
                if ('' !== this.value) {
                    o[this.name] = this.value;
                }
            }
        });
        return o;
    };
    // body onload
​
    var onloading = (function () {
        
            $('body').on('click', ':button', function () {
                var action = $(this).data('action');
                switch (action) {
                    case 'insert':
                        var param = $('#form').serializeObject();
                        message.show(param);
                        console.log(typeof message.show);
                        break;
                    case 'clear':
                        message.close();
                        break;
                }
            });
        
    }());
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
essodukepro
0viewers