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

آموزش Dialog box در Jquery UI

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

JqueryUI - Dialog

دیالوگ باکس ها یکی از روش های خوب برای نمایش اطلاعات روی یک صفحه ی HTML هستند. یک دیالوگ باکس پنجره را با یک تیتر و یک محدوده ی محتوا، معلق می کند. این پنجره را می توان جابه جا کرد، تغییر اندازه داد، و البته با استفاده از آیکن X پیش فرض آن را بست.
jQueryUI متد dialog() را ارائه می دهد که کد HTML نوشته شده روی صفحه را به کد HTML برای نمایش در یک دیالوگ باکس تبدیل می کند.
متد dialog() به دو فرم زیر استفاده می شود:


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

$(selector, context).dialog ("action", [params]) Method

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

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


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

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


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

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


Option
Description
appendTo
اگر این گزینه روی false تنظیم شده باشد، از افزوده شدن گروه ui-draggable به لیست عناصر انتخاب شده ی DOM جلوگیری می کند. مقدار پیش فرض آن true است.
autoOpen
این گزینه مگر اینکه بر روی false تنظیم شده باشد، دیالوگ باکس بر ایجاد آن باز می شود. وقتی روی false تنظیم شده باشد، دیالوگ باکس با فراخوانی dialog('open') باز می شود. مقدار پیش فرض آن true است.
buttons
این گزینه دکمه ها را به دیالوگ باکس اضافه می کند. اینها به عنوان آبجکت هایی لیست شده اند و هر پراپرتی متن روی دکمه است. مقدار آن یک تابع پاسخ است که وقتی یوزر روی دکمه کلیک می کند، فراخوانده می شود. مقدار پیش فرض آن {} است.
closeOnEscape
مگر اینکه گزینه روی false تنظیم شده باشد، وقتی یوزر روی دکمه ی Escape کلیک کند دیالوگ باکس بسته خواهد شد. مقدار پیش فرض آن true است.
closeText
این گزینه حاوی متنی است برای جایگزینی Close برای دکمه ی بستن. مقدار پیش فرض آن "close" است.
dialogClass
اگر این گزینه روی false تنظیم شده باشد، از افزوده شدن گروه ui-draggable به لیست عناصر انتخاب شده ی DOM جلوگیری می کند. مقدار پیش فرض آن "" است.
draggable
مگر اینکه این گزینه روی false تنظیم شده باشد، دیالوگ باکس با کلیک کزدن و درگ کردن نوار عنوان، draggable خواهد بود. مقدار پیش فرض آن true است.
height
این گزینه طول دیالوگ باکس را تنظیم می کند. مقدار پیش فرض آن auto است.
hide
این گزینه برای تنظیم اثر بسته شدن دیالوگ باکس استفاده می شود. مقدار پیش فرض آن null است.
maxHeight
این گزینه حداکثر طول گزینه را به پیکسل، تنظیم می کند که در آن دیالوگ باکس قابل تغییر انداره می باشد. مقدار پیش فرض آن false است.
maxWidth
این گزینه بیشترین عرض را که در آن دیالوگ باکس می تواند تغییر اندازه پیدا کند، به پیکسل تنظیم می کند. مقدار پیش فرض آن false است.
minHeight
این گزینه حداقل طول را به پیکسل، که طبق آن دیالوگ باکس می تواند تغییر اندازه پیدا کند، تنظیم می کند. مقدار پیش فرض آن 150 است.
minWidth
این گزینه حداقل عرض را به پیکسل تنظیم می کند که طبق آن دیالوگ باکس می تواند تغییر اندازه پیدا کند. مقدار پیش فرض آن 150 است.
modal
اگر این گزینه روی true تنظیم شده باشد، دیالوگ باکس دارای رفتار کیفیتی خواهد بود؛ آیتم های دیگر روی صفحه غیرفعال خواهند شد، به عنوان مثال با هم تعامل نخواهند داشت. دیالوگ های مودال ایجاد یک همپوشانی در زیردیالوگ اما بالای عناصر پیج دیگر، دارند. مقدار پیش فرض آن false است.
position
این گزینه موقعیت اولیه ی دیالوگ باکس را تعیین می کند. می تواند یکی از موقعیت های از پیش تعریف شده باشد: center (the default), left, right, top, یا bottom. همچنین می تواند یک ردیف دارای دو عنصر با مقادیر left و top یا موقعیت های متن مانند ['right','top'] باشد. مقدار پیش فرض آن is { my: "center", at: "center", of: window } است.
resizable
کگر اینکه روی false تنظیم شده باشد، دیالوگ باکس در همه ی جهت ها قابل تغییر اندازه خواهد بود. مقدار پیش فرض آن true است.
show
این گزینه تاثیری است که هنگامی استفاده می شود که دیالوگ باکس باز شده است. مقدار پیش فرض آن null است.
title
این گزینه متن مربوط به نوار عنوان را در دیالوگ باکس تعیین می کند. مقدار پیش فرض آن null است.
width
این گزینه عرض دیالوگ باکس را به پیکسل تعیین می کند. مقدار پیش فرض آن 300 است.

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


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


مثال زیر استفاده از قابلیت دیالوگ را، بدون انتقال هیچ پارامتری به متد dialog() ، توضیح می دهد:


< !doctype html>

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

< title>jQuery UI Dialog functionalitytitle>
< 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, .ui-state-default, ui-button {

        background: red;

        border: 1px solid #b9cd6d;

        color: #FFFFFF;

    font-weight: bold;

}

    style>

    < script>

    $(function () {

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

            autoOpen: false,

        });

        $("#opener").click(function () {

            $("#dialog-1").dialog("open");

        });

    });

    script>

    head>

    

    < div id="dialog-1" title="Dialog Title goes here...">This my first jQuery UI Dialog!div>

    < button id="opener">Open Dialogbutton>

    body>

    html>
    

استفاده از buttons، title و position

مثال زیر استفاده از گزینه های مهم buttons,title و position را در دیالوگ ویجت از JqueryUI توضیح می دهد.


< !doctype html>

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

< title>jQuery UI Dialog functionalitytitle>
< 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, .ui-state-default, ui-button {

        background: #b9cd6d;

        border: 1px solid #b9cd6d;

        color: #FFFFFF;

    font-weight: bold;

}

    style>

    < script>

    $(function () {

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

            autoOpen: false,

            buttons: {

                OK: function () { $(this).dialog("close"); }

            },

            title: "Success",

            position: {

                my: "left center",

                at: "left center"

            }

        });

        $("#opener-2").click(function () {

            $("#dialog-2").dialog("open");

        });

    });

    script>

    head>

    < body>

    < div id="dialog-2" title="Dialog Title goes here...">This my first jQuery UI Dialog!div>

    < button id="opener-2">Open Dialogbutton>

    body>

    html>

استفاده از hide، show و height

مثال زیر استفاده از گزینه های مهم hide, showand height را در دیالوگ ویجت JqueryUI توضیح می دهد.


< !doctype html>

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

< title>jQuery UI Dialog functionalitytitle>
< 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, .ui-state-default, ui-button {

        background: #b9cd6d;

        border: 1px solid #b9cd6d;

        color: #FFFFFF;

    font-weight: bold;

}

    style>

    < script>

    $(function () {

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

            autoOpen: false,

            hide: "puff",

            show: "slide",

            height: 200

        });

        $("#opener-3").click(function () {

            $("#dialog-3").dialog("open");

        });

    });

    script>

    head>

    < body>

    < div id="dialog-3" title="Dialog Title goes here...">This my first jQuery UI Dialog!div>

    < button id="opener-3">Open Dialogbutton>

    body>

    html>

استفاده از گزینه ی کیفیتی (modal)

مثال زیر استفاده از گزینه های buttons,title و position را در دیالوگ ویجت JqueryUI توضیح می دهد.


< !doctype html>

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

< title>jQuery UI Dialog functionalitytitle>
< 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, .ui-state-default, ui-button {

        background: #b9cd6d;

        border: 1px solid #b9cd6d;

        color: #FFFFFF;

    font-weight: bold;

}

    style>

    < script>

    $(function () {

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

            autoOpen: false,

            modal: true,

            buttons: {

                OK: function () { $(this).dialog("close"); }

            },

        });

        $("#opener-4").click(function () {

            $("#dialog-4").dialog("open");

        });

    });

    script>

    head>

    < body>

    < div id="dialog-4" title="Dialog Title goes here...">This my first jQuery UI Dialog!div>

    < button id="opener-4">Open Dialogbutton>

    < p>

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt

ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco

laboris nisi ut aliquip ex ea commodo consequat.

p>

< label for="textbox">Enter Name: label>

< input type="text">

body>

html>

متد $(selector, context).dialog ("action", [params])

متد dialog (action, params) می تواند اکشنی را روی دیالوگ باکس اجرا کند، مانند بستن دیالوگ باکس. action به عنوان یک رشته در اولین آرگیومنت تعیین می شود و به طور انتخابی، یک یا چند params، بر اساس اکشن داده شده، ارائه می شوند.
اساسا در اینجا اکشن ها متدهای jQuery هستند که می توانیم به فرم رشته مورد استفاده قرار دهیم.


$(selector, context).dialog ("action", [params]);

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


Action
Description
close()
این اکشن دیالوگ باکس را می بندد. این متد هیچ برهانی را نمی پذیرد.
destroy()
این اکشن دیالوگ باکس را کاملا حذف می کند و عنصر را به حالت pre-init خود بازمی گرداند. این متد هیچ برهانی را نمی پذیرد.
isOpen()
اگر دیالوگ باکس باز باشد، این اکشن چک می شود. این متد هیچ برهانی را نمی پذیرد.
moveToTop()
این اکشن دیالوگ باکس های هماهنگ را پیش زمینه قرار می دهد. این متد هیچ برهانی را نمی پذیرد.
open()
این اکشن دیالوگ باکس را باز می کند. این متد هیچ برهانی را نمی پذیرد.
option( optionName )
این اکشن مقدار مرتبط با optionName تعیین شده را دریافت می کند. در اینجا optionName نام گزینه ای برای دریافت می باشد.
option()
این اکشن یک آبجکت حاوی جفت های key/value را دریافت می کند که گزینه های hash مربوط به دیالوگ را نمایش می دهد. این متد هیچ برهانی نمی پذیرد.
option( optionName, value )
این گزینه مقدار گزینه ی دیالوگ را در ارتباط با optionName تنظیم شده، تعیین شده، تنظیم می کند.
option( options )
این اکشن یک یا چند گزینه را برای دیالوگ تنظیم می کند.
widget()
This action returns the dialog box’s widget element; the element annotated with the ui-dialog class name. This method does not accept any arguments.

isOpen(), open() و close() را توضیح می دهد:


< !doctype html>

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

< title>jQuery UI Dialog functionalitytitle>
< 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, .ui-state-default, ui-button {

        background: #b9cd6d;

        border: 1px solid #b9cd6d;

        color: #FFFFFF;

    font-weight: bold;

}

    style>

    < script type="text/javascript">

    $(function () {

        $("#toggle").click(function () {



            ($("#dialog-5").dialog("isOpen") == false) ? $("#dialog-5").dialog("open") : $("#dialog-5").dialog("close");

        });

        $("#dialog-5").dialog({ autoOpen: false });

    });

    script>

    head>

    < body>

    < button id="toggle">Toggle dialog!button>

    < div id="dialog-5" title="Dialog Title!">

    Click on the Toggle button to open and cose this dialog box.

    div>

    body>

    html>

روی دکمه ی Toggle کلیک کرده و این دیالوگ باکس را ببندید.


مدیریت رویداد روی دیالوگ باکس

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


Event Method
Description
beforeClose(event, ui)
این رویداد زمانی آغاز می شود که دیالوگ باکس در آستانه ی بسته شدن است. بازگرداندن false از بسته شدن دیالوگ باکس جلوگیری می کند. این رویداد در دسترس دیالوگ باکس هایی است که در ارزیابی موفق نیستند. در اینجا رویداد از نوع Event و ui از نوع Object است.
close(event, ui)
این رویداد زمانی آغاز می شود که دیالوگ باکس بسته شده است. در اینجا رویداد از نوع Event و ui از نوع Object است.
create(event, ui)
این رویداد زمانی آغاز می شود که دیالوگ باکس ایجاد می شود. در اینجا رویداد از نوع Event و ui از نوع Object است.
drag(event, ui)
این رویداد به طور مکرر، در هنگام جابه جایی دیالوگ باکس در هنگام درگ کردن، آغاز می شود. در اینجا رویداد از نوع Event و ui از نوع Object است.
dragStart(event, ui)
این رویداد زمانی آغاز می شود که یک پاسخ از دیالوگ باکس به وسیله ی درگ کردن عنوان آن، ارائه می شود. commences
dragStop(event, ui)
این رویداد زمانی آغاز می شود که یک عملیات درگ به پایان می رسد. در اینجا رویداد از نوع Event و ui از نوع Object است.
focus(event, ui)
این رویداد زمانی آغاز می شود که دیالوگ تمرکز را به دست می آورد. در اینجا رویداد از نوع Event و ui از نوع Object است.
open(event, ui)
این رویداد زمانی آغاز می شود که دیالوگ باکس باز شده است. در اینجا رویداد از نوع Event و ui از نوع Object است.
resize(event, ui)
این رویداد در هنگام تغییر اندازه ی یک دیالوگ باکس، به طور مکرر آغاز می شود. در اینجا رویداد از نوع Event و ui از نوع Object است.
resizeStart(event, ui)
این رویداد زمانی آغاز می شود که تغییر اندازه ی دیالوگ باکس شروع شود. در اینجا رویداد از نوع Event و ui از نوع Object است.
resizeStop(event, ui)
این رویداد زمانی آغاز می شود که تغییر اندازه ی دیالوگ باکس به پایان برسد. در اینجا رویداد از نوع Event و ui از نوع Object است.

مثال زیر استفاده از رویدادهای لیست شده در جدول بالا را توضیح می دهد.


استفاده از متد رویداد beforeClose

< !doctype html>

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

< title>jQuery UI Dialog functionalitytitle>
< 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, .ui-state-default, ui-button {

        background: #b9cd6d;

        border: 1px solid #b9cd6d;

        color: #FFFFFF;

    font-weight: bold;

}

    .invalid {

        color: red;

    }

    textarea {

        display: inline-block;

        width: 100%;

        margin-bottom: 10px;

    }

    style>

    < script type="text/javascript">

    $(function () {

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

            autoOpen: false,

            buttons: {

                OK: function () {

                    $(this).dialog("close");

                }

            },

            beforeClose: function (event, ui) {

                if (!$("#terms").prop("checked")) {

                    event.preventDefault();

                    $("[for=terms]").addClass("invalid");

                }

            },

            width: 600

        });

        $("#opener-5").click(function () {

            $("#dialog-6").dialog("open");

        });

    });

    script>

    head>

    < body>

    < div id="dialog-6">

    < p>You must accept these terms before continuing.p>

    < textarea>

    This Agreement and the Request constitute the entire agreement of the

    parties with respect to the subject matter of the Request. This Agreement shall be

    governed by and construed in accordance with the laws of the State, without giving

    effect to principles of conflicts of law.

    textarea>

    < div>

    < label for="terms">I accept the termslabel>

    < input type="checkbox" id="terms">

    div>

    div>

    < button id="opener-5">Open Dialogbutton>

    body>

    html>

استفاده از متد resize

مثال زیر استفاده از متد resize را توضیح می دهد:


< !doctype html>

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

< title>jQuery UI Dialog functionalitytitle>
< 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>

< s tyle>

.ui-widget-header, .ui-state-default, ui-button {

        background: #b9cd6d;

        border: 1px solid #b9cd6d;

        color: #FFFFFF;

    font-weight: bold;

}

    style>

    < script type="text/javascript">

    $(function () {

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

            autoOpen: false,

            resize: function (event, ui) {

                $(this).dialog("option", "title",

                ui.size.height + " x " + ui.size.width);

            }

        });

        $("#opener-6").click(function () {

            $("#dialog-7").dialog("open");

        });

    });

    script>

    head>

    < body>

    < div id="dialog-7" title="Dialog Title goes here...">Resize this dialog to see the dialog co-ordinates in the title!div>

    < button id="opener-6">Open Dialogbutton>

    body>

    html>

این دیالوگ را تغییر اندازه دهید تا هماهنگی را در عنوان مشاهده کنید.


نکات گسترش

دیالوگ ویجت با widget factory ساخته شده و می تواند گسترده شود. برای گسترش ویجت ها، می توانیم متدهای موجود را نادیده گرفته یا آنها را اضافه کنیم. جدول زیر یک نکته ی گسترش (extension point ) با همان API ارائه می دهد، همانطور که متدهای دیالوگ در جدول بالا رائه شدند.


Method
Description
_allowInteraction(event)
این متد به یوزر اجازه می دهد تا با whitelisting عناصر که زیرمجموعه ی دیالوگ نیستند، اما یوزر می تواند از آنها استفاده کند، با یک عنصر هدف تعامل داشته باشد. در اینجا رویداد Event می باشد.

jQuery UI Widget Factory یک مورد توسعه پذیر است که بر اساس آن همه ی ویجت های jQuery UI ساخته می شوند. استفاده از widget factory برای ساخت یک پلاگین تسهیلاتی را ارائه می دهد و همچنین کنوانسیون هایی برای کارهای معمول مانند آشکارسازی روش پلاگین و تغییر گزینه های بعد از نمونه.

  • 2285
  •    840
  • تاریخ ارسال :   1394/07/27

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

ارسال

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

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