نمایش پیغام Toastr با جاوا اسکریپت

نمایش پیغام هایی به کاربران از ضروریات هر برنامه تحت وب می باشد .در این مقاله قصد داریم نحوه استفاده از toastr.js که یک کتابخانه ساده و سبک است را به شما نمایش دهیم .

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

این کتابخانه برای استفاده بسیار راحت است .در ضمن از انجایی که سایت هایی که در حال حاضر وجود دارند ، Responsive هستند ، این پیغام هم به صورت واکنش گرا می باشد .

نحوه استفاده از toastr

ابتدا باید toastr را به وسیله CDN (برای آشنایی بیشتر با CDN مقاله CDN چیست را مطالعه کنید )به صفحه خود رفرنس دهید و یا اینکه این کتابخانه را دانلود کرده و از داخل پروژه خود آن را مسیردهی کنید .بعد از این کار باید فایل css را مسیردهی کنیم .این فایل به نام toastr.css است .و در داخل اسکریپت برای نمایش toastr از کد زیر استفاده می کنیم .این دستور یک دستور جاوااسکریپ است .

toastr.success('Welcome to toastr notifications!', 'Toastr Notification').

زمانی که این پیغام نمایش داده می شود کتابخانه toastr امکانات جالبی فراهم می کند .مثلا توابعی تحت عنوان های Success, Warning, Info, Error و غیره.

برای دیدن این پیغام به صورت عملی مراحل زیر را دنبال کنید .

یک صفحه html ایجاد می کنیم.در این صفحه کدهای زیر وجود دارد .

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

    <script type="text/javascript" src="http://codeseven.github.com/toastr/toastr.js"></script>

    <link rel="stylesheet" type="text/css" href="http://codeseven.github.com/toastr/toastr.css">
    <link rel="stylesheet" type="text/css" href="http://codeseven.github.com/toastr/toastr-responsive.css">

    <script type="text/javascript" src="toastrsample.js"></script>

    <link rel="stylesheet" type="text/css" href="toastrsample.css">
    <title>How to Use Toastr</title>
</head>
<body>
    <h2>
       نحوه نمایش پیغام Notification</h2>
    <div class="control-group" id="toastrTypeGroup">
        <div class="controls">
            <label>
                نوع پیام Toast</label>
            <label class="radio">
                <input type="radio" name="toasts" value="success" checked />Success
            </label>
            <label class="radio">
                <input type="radio" name="toasts" value="info" />Info
            </label>
            <label class="radio">
                <input type="radio" name="toasts" value="warning" />Warning
            </label>
            <label class="radio">
                <input type="radio" name="toasts" value="error" />Error
            </label>
        </div>
    </div>
    <br />
    <div class="control-group" id="toastrPositionGroup">
        <div class="controls">
            <label>
                Position</label>
            <label class="radio">
                <input type="radio" name="positions" value="toast-top-right" checked />Top Right
            </label>
            <label class="radio">
                <input type="radio" name="positions" value="toast-bottom-right" />Bottom Right
            </label>
            <label class="radio">
                <input type="radio" name="positions" value="toast-bottom-left" />Bottom Left
            </label>
            <label class="radio">
                <input type="radio" name="positions" value="toast-top-left" />Top Left
            </label>
            <label class="radio">
                <input type="radio" name="positions" value="toast-top-full-width" />Top Full Width
            </label>
            <label class="radio">
                <input type="radio" name="positions" value="toast-bottom-full-width" />Bottom Full
                Width
            </label>
            <label class="radio">
                <input type="radio" name="positions" value="toast-top-center" />Top Center
            </label>
            <label class="radio">
                <input type="radio" name="positions" value="toast-bottom-center" />Bottom Center
            </label>
        </div>
    </div>
    <br />
    <button type="button" class="btn" id="showtoast">
       نمایش پیغام Toast</button>
</body>
</html>

یک فایل جاوااسکریپتی به نام toastrsample.js ایجاد می کنیم و آن را به کد بالا اضافه می کنیم .در داخل این فایل کدهای زیر وجود دارد

$(function()  
  {  
    $('#showtoast').click(function()  
       {  
        toastr.options =   
          {  
            "debug": false,  
            "positionClass": $("#toastrPositionGroup input:radio:checked").val(),  
            "onclick": null,  
            "fadeIn": 300,  
            "fadeOut": 100,  
            "timeOut": 3000,  
            "extendedTimeOut": 1000  
        }  
  
        var d = Date();  
        toastr[$("#toastrTypeGroup input:radio:checked").val()](d, "Current Day & Time");  
    });  
});

یک فایل toastrsample.css ایجاد کنید و در داخل آن استایل های مورد نظر را قرار دهید

body   
{  
    font - family: Verdana;  
    font - size: small;  
}

اگر کد را اجرا کنید صفحه زیر را خواهید دید .دکمه "نمایش پیغام Toastr" را اگر بزنید بر اساس اینکه چه نوع پیغامی از جمله Success,info,Warning,Error را انتخاب کرده باشید پیغام خاصی نمایش داده خواهد شد .در ضمن می توانید مکان نمایش این پیغام را هم در Radio Button های زیر تعیین کنید .

نمونه پیغام هایی که نمایش داده می شود مانند زیر است