در مورد ساخت JqueryUI – Menu آیا میدانید ؟ اگر یر بااین اموزش ما که بسیار کاربردی است همراه بمانید.
یک منو ویجت معمولا حاوی یک نوار منوی اصلی با منوهای پیش رو می باشد. آیتم های این منوها اغلب دارای منوهای فرعی نیز می باشند. یک منو با استفاده از عناصر مارک آپ به همراه برقراری ارتباط منبع – جزء (parent-child) ایجاد می شود ( با استفاده از
- یا
- ). هر آیتم منو دارای یک عنصر لنگر می باشد.
منو ویجت در jQueryUI می تواند برای منوهای درون خطی و پاپ آپ استفاده شود، یا به عنوان یک اساس برای ساخت سیستم های منوی پیچیده تر استفاده می شود. به عنوان مثال می توانید با استفاده از موقعیت های سفارشی، منوهای تو دو تو ایجاد کنید.
jQueryUI متدهای menu () را برای ایجاد یک منو ارائه می دهد.
ترکیب:
متد menu() به دو شکل مورد استفاده قرار می گیرد:
$(selector, context).menu (options) Method
$(selector, context).menu (“action”, params) Method
متد $(selector, context).menu (options):
متد menu (options) اعلام می کند که یک عنصر HTML و محتوای آن باید به عنوان منو تنظیم و رفتار شود. پارامتر options آبجکتی است که ظاهر و رفتار آیتم های منو را تعیین می کند.
ترکیب:
$(selector, context).menu (options);
در هنگام استفاده از آبجکت Javascript، می توانید یک یا چند گزینه ارائه دهید. اگر بیشتر از یک گزینه برای ارائه وجود دارد، آنها را مانند زیر با استفاده از کاما (ویرگول) از یکدیگر جدا می کنید:
$(selector, context).menu({option1: value1, option2: value2….. });
جدول زیر گزیته هایی مختلفی را لیست می کند که می توان با این متد استفاده کرد:
Option
Description
disabled
این گزینه اگر روی true تنظیم شده باشد، منو را غیرفعال می کند. به طور پیش فرض مقدار آن false می باشد.
icons
این گزینه آیکن ها را برای منوهای فرعی تنظیم می کند. به طور پیش فرض مقدار آن می باشد{ submenu: “ui-icon-carat-1-e” }.
menus
این گزینه یک انتخاب گر برای عناصری است که به عنوان ظرف منو در نظر گرفته می شوند، شامل منوهای فرعی. مقدار آن به طور پیش فرض ul می باشد.
position
این گزینه موقعیت منوهای فرعی را در ارتباط با آیتم منوی اصلی تنظیم می کند. به طور پیش فرض مقدار آن { my: “left top”, at: “right top” } می باشد.
role
این گزینه برای شخصی سازی نقش های ARIA برای منو و آیتم های منو استفاده می شود. مقدار آن به طور پیش فرض menu می باشد.
کارکرد پیش فرض:
در زیر مثال ساده ای از کارکرد منو ویجت را مشاهده می کنید که هیچ پارامتری را به متد menu() انتقال نمی دهد.
.ui-menu {
width: 200px;
}
$(function () {
$(“#menu-1”).menu();
});
در مثال بالا مشاهده می کنید که منوی themeable با عملکردهای ماوس و صفحه کلید برای مسیریابی طراحی شده است.
استفاده از آیکن ها و موقعیت ها
مثال زیر استفاده از دو گزینه ی icons و position را در عملکرد منوی از JqueryUI نشان می دهد.
.ui-menu {
width: 200px;
}
$(function () {
$(“#menu-2”).menu({
icons: { submenu: “ui-icon-circle-triangle-e” },
position: { my: “right top”, at: “right-10 top+5” }
});
});
در مثال بالا مشاهده می کنید که آیکن image را برای لیست منوی فرعی به کار برده ایم و همچنین موقعیت منوی فرعی را تغییر داده ایم.
متد $(selector, context).menu (“action”, params):
متد menu (“action”, params)، می تواند یک فعالیت را روی عناصر منو اجرا کند، مانند فعال / غیرفعال کردن منو. این فعالیت به عنوان یک رشته در اولین مبحث تعیین می شود ( به عنوان مثال “disable” منو را غیر فعال می سازد.). فعالیت هایی را که قابل انتقال هستند در جدول زیر بررسی کنید.
ترکیب:
$(selector, context).menu (“action”, params);
جدول زیر فعالیت های مختلفی را لیست می کند که با این متد مورد استفاده قرار می گیرند:
Action
Description
blur( [event ] )
این فعالیت تمرکز را از یک منو حذف می کند و با تنظیم مجدد هر کدام از عنصرهای فعال استایل، رویداد blur مربوط به منو را آغاز می کند. در حالیکه رویداد از نوع Event می باشد و نشان می دهد که چه چیزی باعث تیرگی در منو شده است.
collapse( [event ] )
این عملکرد منوی فرعی فعال را می بندد. در حالیکه رویداد از نوع Event می باشد و نشان می دهد که چه چیزی باعث از هم پاشیدن منو شده است.
collapseAll( [event ] [, all ] )
این فعالیت تمام منوهای فرعی را می بندد.
destroy()
این عملکرد کارکرد منو را کاملا حذف می کند. این عمل باعث بازگشت عنصر به وضعیت pre – init خود خواهد شد. این متد هیچ برهانی (argument) را نمی پذیرد.
disable()
این عملکرد منو را غیرفعال می کند. این متد نیز هیچ برهانی را نمی پذیرد.
enable()
این عملکرد منو را فعال می سازد. این متد نیز هیچ برهانی نمی پذیرد.
expand( [event ] )
این عمل منوی فرعی زیر آیتم فعال را، اگر وجود داشته باشد، باز می کند. در حالیکه رویداد از نوع Event می باشد و نشان می دهد که چه چیزی باعث باز شدن منو شده است.
focus( [event ], item )
این عملکرد یک آیتم خاص از منو را فعال می سازد، به این صورت که شروع به باز کردن منوهای فرعی کرده و تمرکز رویداد منو را آغاز می کند. در حالیکه رویداد از نوع Event می باشد و نشان می دهد که چه چیزی باعث منو تمرکز را به دست آورد و آیتم یک آبجکت jQuery می باشد که آیتم منو به focus/activate را نمایش می دهد.
isFirstItem()
این فعالیت یک مقدار boolean را بازمی گرداند که اگر آیتم فعال حال حاضر منو، اولین آیتم منو باشد، بیان می دارد. این متد هیچ برهانی را نمی پذیرد.
isLastItem()
این فعالیت یک کقدار Boolean بازمی گرداند که اگر آیتم فعال حال حاضر منو، آخرین آیتم منو باشد، بیان می دارد. این متد هیچ برهانی را نمی پذیرد.
next( [event ] )
این فعالیت وضعیت فعال را به آیتم بعدی منو محول می کند. از آنجایی که رویداد از نوع Event می باشدو نشان می دهد چه چیزی باعث آغاز جابجایی تمرکز شده است.
nextPage( [event ] )
این عملکرد وضعیت فعال را به اولین آیتم منو در زیر یک منوی رونده scrollable menu انتقال می دهد، یا اگر منو حرکت کننده نباشد آخرین آیتم آن قرار می گیرد. از آنجایی که رویداد از نوع Event می باشد و نشان می دهد که چه چیزی باعث شروع جابجایی تمرکز شده است.
option( optionName )
این فعالیت مقدار فعلی نربوط به optionName را دریافت می کند. از آنجایی که optionName از نوع String می باشد و نام گزینه ی به دست آمده را نشان می دهد.
option()
این فعالیت جفت های حاوی key/value را دریافت می کند که نشان دهنده ی گزینه های حال حاضر منو می باشد.
option( optionName, value )
این فعالیت مقدار گزینه ی منو را که در ارتباط با optionName تعیین شده می باشد، تنظیم می کند. در حالیکه optionName از نوع String می باشد و نام گزینه را برای تنظیم نشان می دهد و مقدار از نوع Object می باشد که مقدار مربوط به تنظیم گزینه را نشان می دهد.
option( options )
این عملکرد یک یا چند گزینه را برای منو تنظیم می کند. در حالیکه گزینه ها از نوع Object می باشند و نقشه ای از جفت های option-value برای تنظیم نشان می دهند.
previous( [event ] )
این عملکرد وضعیت فعال را به آیتم منوی پیشین بازمی گرداند. در اینجا رویدادها از نوع Events می باشند و نشان می دهند که چه چیزی باعث حرکت تمرکز را آغاز کرد.
previousPage( [event ] )
این فعالیت وضعیت فعال را به اولین آیتم منو در بالای یک منوی scrollable یا در غیر این صورت به اولین آیتم منو حرکت می دهد. در اینجا رویداد از نوع Event می باشد و نشان می دهد که چه چیزی باعث آغاز حرکت تمرکز شد.
refresh()
این فعالیت آیتم های منوهای زیرمجموعه و منوهای اصلی را که هنوز مقدار دهی نشده اند، مقدار دهی می کند. این متد هیچ برهانی نمی پذیرد.
select( [event ] )
این فعالیت آیتم منوی فعال را انتخاب می کند، همه ی منوهای زیرمجموعه را می شکند و منوی انتخاب رویداد را آغاز می کند. در اینجا رویداد از نوع Event می باشد و مشخص می کند که چه چیزی مجموعه را آغاز کرد.
widget()
این فعالیت یک آبجکت jQuery بازمی گرداند که حاوی منو می باشد. این متد نیز هیچ برهانی نمی پذیرد.
مثال زیر استفاده از متد disable() را توضیح می دهد.
.ui-menu {
width: 200px;
}
$(function () {
$(“#menu-3”).menu();
$(“#menu-3”).menu(“disable”);
});
در مثال بالا مشاهده می کنید که منو غیرفعال می باشد.
استفاده از متدهای focus و collapseAll:
مثال زیر استفاده از متدهای focus() و collapseAll را نشان می دهد:
.ui-menu {
width: 200px;
}
$(function () {
var menu = $(“#menu-4”).menu();
$(“#menu-4”).menu(“focus”, null, $(“#menu-4”).menu().find(“.ui-menu-item:last”));
$(menu).mouseleave(function () {
menu.menu(‘collapseAll’);
});
});
در مثال بالا مشاهده می کنید که تمرکز روی آخرین آیتم منو می باشد. اکنون منوی زیرمجموعه را باز کرده و وقتی ماوس از روی منوی زیرمجموعه به بخش دیگری می رود، منوی زیرمجموعه بسته می شود.
مدیریت رویداد روی عناصر منو:
علاوه بر متد menu (options) ، در بخش های قبلی مشاهده کردیم که JqueryUI متدهای رویداد را ارائه می دهد که برای یک رویداد خاص آغاز شدند. این متدهای رویداد در زیر ارائه شده اند:
Event Method
Description
blur(event, ui)
این رویداد وقتی آغاز می شود که یک منو تمرکز را از دست می دهد.
create(event, ui)
این رویداد زمانی آغاز می شود که منو ایجاد شده است.
focus(event, ui)
این رویداد زمانی آغاز می شود که منو تمرکز را به دست می آورد و یا وقتی آیتم های منو فعال می شوند.
select(event, ui)
این رویداد زمانی آغاز می شود که یک آیتم منو انتخاب شود.
مثال:
مثال زیر استفاده از متد رویداد را برای کاربرد منو ویجت توضیح می دهد. این مثال استفاده از رویداد create، blur و focus را توضیح می دهد.
.ui-menu {
width: 200px;
}
$(function () {
$(“#menu-5”).menu({
create: function (event, ui) {
var result = $(“#result”);
result.append(“Create event
“);
},
blur: function (event, ui) {
var result = $(“#result”);
result.append(“Blur event
“);
},
focus: function (event, ui) {
var result = $(“#result”);
result.append(“focus event
“);
}
});
});
در مثال بالا ما در حال چاپ پیغام ها براساس رویدادهای آغاز شده هستیم.
