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

آموزش JqueryUI Button

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

JqueryUI - Button

jQueryUI متد button() را ارائه می دهد برای تبدیل عناصر HTML (مانند دکمه ها، ورودی ها و anchorها) به دکمه های دارای موضوع (themeable)، با تنظیم حرکات ماوس روی آنها، ارائه می دهد، که همه به طور واضحی توسط jQuery UI تنظیم شده اند.
برای گروه بندی دکمه های رادیو، Button همچنین یک ویجت اضافه به نام Buttonset ارائه می دهد. Buttonset با انتخاب یک حامل عنصر ( که حاوی دکمه های رادیو است) و فراخوانی متد buttonset() استفاده می شود.


ترکیب

متد button() می تواند به دو شکل زیر استفاده می شود:


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

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

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

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


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

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


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

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


Option
Description
disabled
این گزینه دکمه ی تنظیم شده روی true را غیرفعال می سازد. مقدار پیش فرض آن false است.
icons
این گزینه تعیین می کند که یک یا دو آیکن در button نمایش داده شوند: آیکن های اولیه در سمت چپ و آیکن های ثانویه در سمت راست. آیکن اولیه با پراپرتی primary و آیکن ثانویه با پراپرتی secondary تشخیص داده می شود. مقدار پیش فرض آن primary: null, secondary: null می باشد.
label
این گزینه متنی را برای نمایش روی دکمه تعیین می کند که برچسب معمول را رد می کند. اگر حذف شود، برچسب معمول نمایش داده می شود. در مورد دکمه های radio و چک باکس ها، برچسب معمول است که با کنترل در ارتباط است. مقدار پیش فرض آن null است.
text
این گزینه تعیین می کند که آیا متن روی دکمه نمایش داده شود. اگر به عنوان false تعیین شده باشد، متن حذف می شود، اگر (و فقط اگر) گزینه ی icons حداقل یک آیکن را تعیین کنند. مقدار پیش فرض آن true است.

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

مثال زیر قابلیت دکمه ی ویجت را توضیح می دهد، که هیچ پارامتری به متد button() منتقل نمی شود.


< !doctype html>

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

                        < title>jQuery UI Buttons 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>

    < script>

        $(function () {

            $("#button-1, #button-2, #button-3, #button-4").button();

            $("#button-5").buttonset();

        });

                            < script>

                        < head>

                        < body>

                            < button id="button-1">A button element< button>

                            < input id="button-2" type="submit" value="A submit button">

                            < a id="button-3" href="">An anchor

                            < input type="checkbox" id="button-4">

                            < label for="button-4">Toggle< label>

                            

< div id="button-5"> < input type="checkbox" id="check1"> < label for="check1">Left< label> < input type="checkbox" id="check2"> < label for="check2">Middle< label> < input type="checkbox" id="check3"> < label for="check3">Right< label> < div> < body> < html>

این مثال markup را که می توان برای دکمه ها استفاده کرد، توضیح می دهد: یک دکمه، یک ورودی submit و یک anchor.


استفاده از icons، text و disabled

مثال زیر استفاده از سه گزینه ی icons, text و disabled را در دکمه ی عملکرد JqueryUI توضیح می دهد.


< !doctype html>

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

                        < title>jQuery UI Buttons 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>

    < script>

        $(function () {

            $("#button-6").button({

                icons: {

                    primary: "ui-icon-locked"

                },

                text: false

            });

            $("#button-7").button({

                disabled: true

            });

            $("#button-8").button({

                icons: {

                    primary: "ui-icon-gear",

                    secondary: "ui-icon-triangle-1-s"

                }

            });

        });

                            < script>

                        < head>

                        < body>

                            < button id="button-6">

                                Button with icon only

                            < button>

                            < button id="button-7">

                                Button Disabled

                            < button>

                            < button id="button-8">

                                Button with two icons

                            < button>

                        < body>

                        < html>

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

متد button ("action", params) می تواند عملی را روی دکمه اجرا کند، عملی مانند غیر فعال کردن دکمه. این عمل به عنوان یک رشته در اولین آرگیومنت تعیین می شود ( به عنوان مثال disable برای غیرفعال کردن دکمه). اکشن هایی را که می توانند منتقل شوند، در جدول زیر چک کنید.


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

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


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

اکنون اجازه بدهید با استفاده از اکشن های جدول بالا، مثالی را بررسی کنیم. مثال زیر استفاده از متدهای destroy() و disable() را توضیح می دهد.


< !doctype html>

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

                        < title>jQuery UI Buttons 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>

    < script>

        $(function () {

            $("#button-9").button({

                text: false,

                icons: {

                    primary: "ui-icon-seek-start"

                }

            });

            $("#button-9").button('destroy');

            $("#button-10").button({

                icons: {

                    primary: "ui-icon-seek-prev"

                }

            });

            $("#button-10").button('disable');

            $("#button-11").button({

                text: false,

                icons: {

                    primary: "ui-icon-play"

                }

            });

        });

                            < script>

                        < head>

                        < body>

                            < button id="button-9">

                                I'm destroyed

                            < button>

                            < button id="button-10">

                                I'm disabled

                            < button>

                            < button id="button-11">

                                play

                            < button>

                        < body>

                        < html>

مدیریت رویداد روی دکمه ها

علاوه بر متد button (options) که در بخش های قبل مشاهده کردیم، JqueryUI متدهای رویداد ارائه می دهد که برای یک رویداد خاص آغاز می شوند. این متدهای رویداد در جدول زیر ارائه شده اند:


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

مثال زیر استفاده از متد رویداد را برای قابلیت دکمه ی ویجت توضیح می دهد. این استفاده از رویداد create را توضیح می دهد:


< !doctype html>

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

                        < title>jQuery UI Buttons 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>

        .resultarea {

                                background: #cedc98;

            border-top: 1px solid #000000;

            border-bottom: 1px solid #000000;

            color: #333333;

            font-size: 14px;

        }

                            < style>

                            < script>

                                $(function () {

                                    $("#button-12").button({

                                        create: function () {

                                            $("p#result").html($("p#result")

                                            .html() + "created");

                                        }

                                    });

                                });

                            < script>

                        < head>

                        < body>

                            < button id="button-12">

                                A button element

                            < button>

                            

< body> < html>


  • 1661
  •    1234
  • تاریخ ارسال :   1394/07/27

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

ارسال

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

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