نمایش و بسته شدن خودکار پیام هشدار Bootstrap بعد از چند ثانیه

جمعه 1 آبان 1394

در این مقاله قصد داریم با استفاده از Bootstarp چند کلید ایجاد کرده و برای آنها پیام هشدار که هنگام کلیک روی آنها باز و به صورت خودکار بعد از چند ثانیه بسته می شوند را پیاده سازی کنیم.

نمایش و بسته شدن خودکار پیام هشدار Bootstrap بعد از چند ثانیه

در این مقاله قصد داریم با استفاده از Bootstarp  چند کلید ایجاد کرده و برای آنها پیام هشدار که هنگام کلیک روی آنها باز و به صورت خودکار بعد از چند ثانیه بسته می شوند را پیاده سازی کنیم. و در کادر هشدار یک کلید برای بستن پیام به صورت دستی هم قرار خواهیم داد.

برای شکل دادن به حرکت کادر پیام از jQuery  استفاده می شود. 

به سراغ ایجاد یک پروژه در ASP.net  با استفاده از C#  می رویم.

یک Web form  به پروژه اضافه کرده و کدهای زیر را در آن قرار دهید.

 <html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

    <style type="text/css">
        .messagealert {
            width: 100%;
            position: fixed;
             top:0px;
            z-index: 100000;
            padding: 0;
            font-size: 15px;
        }
    </style>
    <script type="text/javascript">
        function ShowMessage(message, messagetype) {
            var cssclass;
            switch (messagetype) {
                case 'Success':
                    cssclass = 'alert-success'
                    break;
                case 'Error':
                    cssclass = 'alert-danger'
                    break;
                case 'Warning':
                    cssclass = 'alert-warning'
                    break;
                default:
                    cssclass = 'alert-info'
            }
            $('#alert_container').append('<div id="alert_div" style="margin: 0 0.5%; -webkit-box-shadow: 3px 4px 6px #999;" class="alert fade in ' + cssclass + '"><a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a><strong>' + messagetype + '!</strong> <span>' + message + '</span></div>');

            setTimeout(function () {
                $("#alert_div").fadeTo(2000, 500).slideUp(500, function () {
                    $("#alert_div").remove();
                });
              }, 5000);//5000=5 seconds
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <div class="messagealert" id="alert_container">
            </div>

             <div style="margin-top: 100px; text-align:center;">
            <asp:Button ID="btnSuccess" runat="server" Text="Submit" CssClass="btn btn-success"
                OnClick="btnSuccess_Click" />
            <asp:Button ID="btnDanger" runat="server" Text="Danger" CssClass="btn btn-danger"
                OnClick="btnDanger_Click" />
            <asp:Button ID="btnWarning" runat="server" Text="Warning" CssClass="btn btn-warning"
                OnClick="btnWarning_Click" />
            <asp:Button ID="btnInfo" runat="server" Text="Info" CssClass="btn btn-info"
                OnClick="btnInfo_Click" />
            </div>
        </div>
    </form>
</body>
</html>

برای استفاده از فایل های JS  و CSS در Bootstrap ،  لازم است منبع آنها را در تگ  Head  اضافه کنید .

یک تایمر با استفاده از jQuery و تابع setTimeout برای بسته شدن خودکار کادر پیام بعد از 5 ثانیه قرار می دهیم. می توانید این تایم را افزایش یا کاهش دهید.

در قسمت کد ، کدهای زیر را قرار دهید.

 public enum MessageType { Success, Error, Info, Warning };
    protected void Page_Load(object sender, EventArgs e)
    {
    } 
    protected void ShowMessage(string Message, MessageType type)
    {
        ScriptManager.RegisterStartupScript(this, this.GetType(), System.Guid.NewGuid().ToString(), "ShowMessage('" + Message + "','" + type + "');", true);
    }
    protected void btnSuccess_Click(object sender, EventArgs e)
    {
        ShowMessage("Record submitted successfully", MessageType.Success);
    }
    protected void btnDanger_Click(object sender, EventArgs e)
    {
        ShowMessage("A problem has occurred while submitting data", MessageType.Error);
    }
    protected void btnWarning_Click(object sender, EventArgs e)
    {
        ShowMessage("There was a problem with your internet connection", MessageType.Warning);
    }
    protected void btnInfo_Click(object sender, EventArgs e)
    {
        ShowMessage("Please verify your data before submitting", MessageType.Info);
    }

در کد بالا یک Enum ایجاد کرده ایم. Enum  ها از نوع  strongly type  هستند که باعث می شوند کد خواناتر و کمتر در معرض خطاهای تایپ باشند. زمانی که یک مجموعه از مقادیر داریم که عملکرد قابل توجه و بدون تغییر دارند می توانیم از Enum  ها استفاده کنیم.

یک تابع showMessage ایجاد کردیم که پیام و نوع پیام را به عنوان پارامتر میگیرد و تابع جاوا را صدا زده و به آن انتقال می دهد. بر اساس این پارامتر ارسالی پیام هشدار نمایش داده خواهد شد.

فقط نیاز داریم که یک پیام دلخواه که میخواهیم نشان داده شود و نوع آن را به تابع showMwssage  بفرستیم .

آموزش بوت استرپ

فایل های ضمیمه

برنامه نویسان

نویسنده 3355 مقاله در برنامه نویسان

کاربرانی که از نویسنده این مقاله تشکر کرده اند

در صورتی که در رابطه با این مقاله سوالی دارید، در تاپیک های انجمن مطرح کنید