آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

آموزش نوارهای پیشروی در Jquery UI

دوره های مرتبط با این مقاله

JqueryUI - Progressbar

نوارهای پیشروی (progress bar) میزان پیشروی یک عملکرد یا یک پروسه را نشان می دهد. می توانیم نوتر پیشروی را به دو گروه determinate progress bar و indeterminate progress bar تقسیم بندی کنیم.
Determinate progress bar (نوار پیشروی مشخص) تنها در موقعیت هایی استفاده می شود کهسیستم می تواند به درستی وضعیت فعلی را آپدیت کند. نوار پیشروی determinate هرگز نباید از چپ به راست پر شود و سپس برای یک فرایند مجزا به عقب بازگردد.
اگر وضعیت حقیقی نمی تواند محاسبه شود، indeterminate progress bar باید برای ارائه ی بازخورد یوزر به کار گرفته شود.
jQueryUI یک نوار پیشروی با استفاده ی آسان ارائه می دهد که می توانیم از این طریق یوزرها را مطلع کنیم که اجرای درخواست انجام شده برای برنامه ی ما سخت می باشد. jQueryUI متد progressbar() را برای ایجاد نوارهای پیشروی ارائه می دهد.


ترکیب

متد progressbar() به دو روش زیر انجام می شود:


$(selector, context).progressbar (options) Method

$(selector, context).progressbar ("action", params) Method

متد $(selector, context).progressbar (options)

متد progressbar (options) اعلام می کند که یک عنصر HTML می تواند به فرم یک نوار پیشروی مدیریت شود. پارامتر options آبجکتی است که ظاهر و رفتار نوار پیشروی را تعیین می کند.


ترکیب

$(selector, context).progressbar (options);

شما می توانید با استفاده از آبجکت Javascript یک یا چند گزینه را همزمان ارائه دهید. اگر بیشتر از یک گزینه برای ارائه وجود دارد، می توانید آنها را با استفاده از کاما از یکدیگر مجزا کنید، مانند ترکیب زیر:


$(selector, context).progressbar({option1: value1, option2: value2..... });

جدول زیر گزینه های مختلفی را ارائه می دهد که می توانید با این متد استفاده کنید:


Option
Description
disabled
وقتی این گزینه روی true تنظیم شده باشد، نوار پیشروی را غیرفعال می سازد. مقدار پیش فرض آن false می باشد.
max
این گزینه حداکثر مقدار برای یک نوار پیشروی را تعیین می کند. مقدار پیش فرض آن 100 می باشد.
value
این گزینه مقدار اولیه ی نوار پیشروی را تعیین می کند. مقدار پیش فرض آن 0 است.

در بخش بعد مثال هایی از قابلیت نوار پیشروی مشاهده خواهید کرد.


قابلیت پیش فرض

مثال زیر توضیح ساده ای از قابلیت نوار پیشروی را ارائه می دهد که هیچ پارامتری به متد progressbar() انتقال نمی دهد.


< !doctype html>

< html lang="en">
< head>
                        < meta charset="utf-8">

                        < title>jQuery UI ProgressBar functionality< title>
                        < link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">

                        < script src="http://code.jquery.com/jquery-1.10.2.js">
< script>

    < script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"> < script>

    < style>

        .ui-widget-header {

                                background: #cedc98;

                                border: 1px solid #DDDDDD;

                                color: #333333;

            font-weight: bold;

        }

                            < style>

                            < script>

                                $(function () {

                                    $("#progressbar-1").progressbar({

                                        value: 30

                                    });

                                });

                            < script>

                        < head>

                        < body>

                            < div id="progressbar-1">< div>

                        < body>

                        < html>
                            

اجازه بدهید کد بالا را در فایل HTML به نام progressbarexample.htm ذخیره کنیم و آن را در یک مرورگر استاندارد که javascript را پشتیبانی می کند، باز کنیم. پس از آن باید نتیجه ی زیر را مشاهد. اکنون می توانید با نتیجه بازی کنید.
این مثال ایجاد یک نوار پیشروی را با استفاده از متد progressbar() نشان می دهد. این یک نوار پیشروی پیش فرض می باشد.


استفاده از max و value

مثال زیر استفاده از گزینه های values و max را در قابلیت نوار پیشروی JqueryUI نشان می دهد.


< !doctype html>

< html lang="en">
< head>
                        < meta charset="utf-8">

                        < title>jQuery UI ProgressBar functionality< title>
                        < link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">

                        < script src="http://code.jquery.com/jquery-1.10.2.js">
< script>

    < script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js">< script>

    < style>

        .ui-widget-header {

                                background: #cedc98;

                                border: 1px solid #DDDDDD;

                                color: #333333;

            font-weight: bold;

        }

                            < style>

                            < script>

                                $(function () {

                                    var progressbar = $("#progressbar-2");

                                    $("#progressbar-2").progressbar({

                                        value: 30,

                                        max: 300

                                    });

                                    function progress() {

                                        var val = progressbar.progressbar("value") || 0;

                                        progressbar.progressbar("value", val + 1);

                                        if (val < 99) {

                                            setTimeout(progress, 100);

                                        }

                                    }

                                    setTimeout(progress, 3000);

                                });

                            < script>

                        < head>

                        < body>

                            < div id="progressbar-2">< div>

                        < body>

                        < html>

اجازه بدهید کد بالا را در فایل HTML به نام progressbarexample.htm ذخیره کنیم و آن را در یک مرورگر استاندارد که javascript را پشتیبانی می کند، باز کنیم. پس از آن باید نتیجه ی زیر را مشاهد. اکنون می توانید با نتیجه بازی کنید.
در اینجا مشاهده می کنید که نوار پیشروی از راست به چپ پر شده و وقتی مقدار به 300 می رسد، متوقف می شود.


متد $(selector, context).progressbar ("action", params)

متد progressbar ("action", params) می تواند عملکردهایی را روی نوار پیشروی اجرا کند، از جمله تغییر درصد پیشروی. عملکرد به عنوان یک رشته در اولین مبحث مطرح می شود ( به عنوان مثال مقداری برای تغییر درصد پیشروی). در جدول زیر عملکردهایی را بررسی خواهید کرد که می توانند انتقال یابند.


ترکیب

$(selector, context).progressbar ("action", params);

جدول زیر action های مختلفی را لیست می کند که با این متد استفاده می شوند:


Action
Description
destroy
این عملکرد قابلیت نوار پیشروی را از یک عنصر به طور کامل حذف می کند. عناصر به وضعیت pre-init خود بازمی گردند. این متد هیچ برهانی (argument) را نمی پذیرد.
disable
این عمل قابلیت نوار پیشروی را روی یک عنصر غیرفعال می سازد. این متد هیچ برهانی را نمی پذیرد.
enable
این عمل قابلیت نوار پیشروی را روی یک عنصر فعال می سازد. این متد هیچ برهانی را نمی پذیرد.
option( optionName )
این عمل مقدار کنونی را، که با optionName تعیین شده در ارتباط است، بازمی گرداند. در اینجا optionName یک رشته می باشد.
option
این عمل، یک آبجکت حاوی جفت های key/value را دریافت می کند که گزینه های نوار پیشروی hash را نشان می دهند. این متد هیچ برهانی را نمی پذیرد.
option( optionName, value )
این عمل مقدار گزینه ی نوار پیشروی را که با optionName تعیین شده در ارتباط است، تنظیم می کند.
option( options )
این عمل یک یا چند گزینه را برای نوارهای پیشروی تعیین می کند. برهان options نقشه ای است که دارای جفت های option-value است که قرار است تنظیم شوند.
value
این عمل مقدار کنونی options.value را بازمی گرداند که درصد پیشروی نوار پیشروی را نشان می دهد.
value( value )
این عمل یک مقدار جدید برای درصد پر شده در نوار پیشروی را نشان می دهد. مقدار argument میتواند یک عدد یا یک Boolean باشد.
widget
این عمل یک آبجکت jQuery را که حاوی نوار پیشروی می باشد، بازمی گرداند. این متد هیچ برهانی را نمی پذیرد.
مثال:

اکنون اجازه بدهید با استفاده از عملکردهای جدول بالا، مثالی را بررسی کنیم. مثال زیر استفاده از متدهای disable() و option( optionName, value ) را توضیح می دهد.


< !doctype html>

< html lang="en">
< head>
                        < meta charset="utf-8">

                        < title>jQuery UI ProgressBar functionality< title>
                        < link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">

                        < script src="http://code.jquery.com/jquery-1.10.2.js">
< script>

    < script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js">< script>

    < style>

        .ui-widget-header {

                                background: #cedc98;

                                border: 1px solid #DDDDDD;

                                color: #333333;

            font-weight: bold;

        }

                            < style>

                            < script>

                                $(function () {

                                    $("#progressbar-3").progressbar({

                                        value: 30

                                    });

                                    $("#progressbar-3").progressbar('disable');

                                    $("#progressbar-4").progressbar({

                                        value: 30

                                    });

                                    var progressbar = $("#progressbar-4");

                                    $("#progressbar-4").progressbar("option", "max", 1024);

                                    function progress() {

                                        var val = progressbar.progressbar("value") || 0;

                                        progressbar.progressbar("value", val + 1);

                                        if (val < 99) {

                                            setTimeout(progress, 100);

                                        }

                                    }

                                    setTimeout(progress, 3000);

                                });

                            < script>

                        < head>

                        < body>

                            < h3>Disabled Progressbar< h3>

                            < div id="progressbar-3">< div>
< h3>Progressbar with max value set< h3> < div id="progressbar-4">< div> < body> < html>

مدیریت رویداد روی بخش های نوار پیشروی

علاوه بر متد progressbar (options) که در بخش قبل مشاهده کردیم، JqueryUI متدهایی را ارائه می دهد که برای یک رویداد خاص آغاز می شوند. این متدها در جدول زیر ارائه شده اند:
اجازه بدهید کد بالا را در فایل HTML به نام progressbarexample.htm ذخیره کنیم و آن را در یک مرورگر استاندارد که javascript را پشتیبانی می کند، باز کنیم. پس از آن باید نتیجه ی زیر را مشاهد.
در اینجا مشاهده می کنید که نوار پیشروی مقدار تغییر یافته ی خود را تغییر می دهد و در هنگام کامل شدن رویداد پیغام "Loading Completed!" نمایش داده می شود.


Event Method
Description
change(event, ui)
هروقت که مقدار نوار پیشروی تغییر کند، این رویداد آغاز می شود. رویداد از نوع Event بوده و ui از نوع Object می باشد.
complete(event, ui)
وقتی که نوار پیشروی به حداکثر مقدار خود برسد، این رویداد آغاز می شود. رویداد از نوع Event بوده و ui از نوع Object می باشد.
create(event, ui)
وقتی نوار پیشروی ایجاد می شود، این رویداد آغاز می شود. رویداد از نوع Event بوده و ui از نوع Object می باشد.
مثال:

مثال زیر متدی را توضیح می دهد که در حین قابلیت نوار پیشروی استفاده می شود. این مثال استفاده از رویدادهای change و complete را توضیح می دهد.


< !doctype html>

< html lang="en">
< head>
                        < meta charset="utf-8">

                        < title>jQuery UI ProgressBar functionality< title>
                        < link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">

                        < script src="http://code.jquery.com/jquery-1.10.2.js">
< script>

    < script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js">< script>

    < style>

        .ui-widget-header {

                                background: #cedc98;

                                border: 1px solid #DDDDDD;

                                color: #333333;

            font-weight: bold;

        }

                            .progress-label {

                                position: absolute;

                                left: 50%;

                                top: 13px;

                                font-weight: bold;

                                text-shadow: 1px 1px 0 #fff;

                            }

                            < style>

                            < script>

                                $(function () {

                                    var progressbar = $("#progressbar-5");

                                    progressLabel = $(".progress-label");

                                    $("#progressbar-5").progressbar({

                                        value: false,

                                        change: function () {

                                            progressLabel.text(

                                               progressbar.progressbar("value") + "%");

                                        },

                                        complete: function () {

                                            progressLabel.text("Loading Completed!");

                                        }

                                    });

                                    function progress() {

                                        var val = progressbar.progressbar("value") || 0;

                                        progressbar.progressbar("value", val + 1);

                                        if (val < 99) {

                                            setTimeout(progress, 100);

                                        }

                                    }

                                    setTimeout(progress, 3000);

                                });

                            < script>

                        < head>

                        < body>

                            < div id="progressbar-5">

                                < div class="progress-label">

                                    Loading...

                                < div>

                            < div>

                        < body>

                        < html>

  • 1345
  •    820
  • تاریخ ارسال :   1394/07/27

دانلود PDF دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .