jQuery Inline Message Box Plugin

Inline Message Box plugin is a light weight (4.26 KB) jQuery plugin. Features include 6 types of message box, no additional css required, closable, auto closable, option parameters for full control of message box functionality etc.. You can use it very easily.

How to use it

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="inline-message-box.min.js"></script>

Configuration

Option	Default Value	Description
messageBoxType	null	Define the message box type here. 6 types of message box type is available. if this option is null, then it is the default message box. Other types are success, error, fatalerror, warning & info.
message	null	Set your message here.
closeButton	true	If you don't need 'close' button, set to false.
enabled	false	If you want to close message box automatically, then it set to true.
milliseconds	30000	This value is used for automatically close this message within '30' sec.

<script>
$(document).ready(function() {
$(".success-demo").BitCompiler().showInlineMessageBox({
messageBoxType: "success",
message: "This is the auto close <b>success</b> message",
autoClose: {
enabled: true,
milliseconds: 30000
}
});
});
</script>

Final code and demo is here

<!DOCTYPE html><html><head><title>Tryit Editor - tools.bitcompiler.com</title><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"/><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/bitcompiler/jquery-inline-message-box@1.1.1/public_html/inline-message-box.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
    $(document).ready(function() {
        var containerElement = $(".bitcompiler-page-container");
        containerElement.find(".wrapper .success").BitCompiler().showInlineMessageBox({
            messageBoxType: "success",
            message: "This is the <b>success</b> message"
        });
        containerElement.find(".wrapper .warning").BitCompiler().showInlineMessageBox({
            messageBoxType: "warning",
            message: "This is the <b>warning</b> message"
        });
        containerElement.find(".wrapper .error").BitCompiler().showInlineMessageBox({
            messageBoxType: "error",
            message: "This is the <b>error</b> message"
        });
        containerElement.find(".wrapper .fatalerror").BitCompiler().showInlineMessageBox({
            messageBoxType: "fatalerror",
            message: "This is the <b>fatalerror</b> message"
        });
        containerElement.find(".wrapper .info").BitCompiler().showInlineMessageBox({
            messageBoxType: "info",
            message: "This is the <b>info</b> message"
        });
        containerElement.find(".wrapper .default").BitCompiler().showInlineMessageBox({
            messageBoxType: "default",
            message: "This is the <b>default</b> message"
        });
        containerElement.find(".wrapper-autoclose .success").BitCompiler().showInlineMessageBox({
            messageBoxType: "success",
            message: "This is the auto close <b>success</b> message",
            autoClose: {
                enabled: true,
                milliseconds: 30000
            }
        });
        containerElement.find(".wrapper .close-all").click(function(e) {
            e.preventDefault();
            containerElement.find(".wrapper .col-md-6").BitCompiler().hideInlineMessageBox(true);
        });
        setInterval(function() {
            containerElement.find(".wrapper-autoclose .success").BitCompiler().showInlineMessageBox({
                messageBoxType: "success",
                message: "This is the auto close <b>success</b> message",
                autoClose: {
                    enabled: true,
                    milliseconds: 30000
                }
            });
        }, 33000);
    });
</script>
</head><body>    <div class="bitcompiler-page-container container">
<h3>
jQuery Inline Message Box Plugin Demo</h3>
<br/>
<div class="row">
                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                <div class="x_panel">
                                    <div class="x_title">
                                         <h2 class="bitcompiler-heading bitcompiler-heading2 bitcompiler-bold">
Demo - Different types of closable in-line message boxes (jQuery)</h2>
<div class="clearfix">
</div>
</div>
<div class="x_content wrapper">
                                        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
                                            <div class="success">
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
                                            <div class="error">
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
                                            <div class="fatalerror">
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
                                            <div class="info">
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
                                            <div class="warning">
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
                                            <div class="default">
</div>
</div>
<div class="col-md-12">
                                            <br><button class="btn btn-primary close-all pull-right">Close all message boxes</button>
                                        </div>
</div>
</div>
</div>
</div>
<div class="row">
                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                <div class="x_panel">
                                    <div class="x_title">
                                         <h2 class="bitcompiler-heading bitcompiler-heading2 bitcompiler-bold">
Demo - Auto close in-line message box (jQuery)</h2>
<div class="clearfix">
</div>
</div>
<div class="x_content wrapper-autoclose">
                                        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                                            <div class="success">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body></html>

Demo

jQuery Inline Message Box Plugin

No comments:

Post a Comment

Popular Posts

Tags

Contact Form