آموزش Accordion Widget

با سلام به شما دوستای خوب و عزیز ، امیدوارم که روزتون بخیر باشه ، امروز در مورد jquery براتون مطالبی روآماده کردم .این مطلب اختصاص پیدامیکنه به Accordion Widget ،Accordion Widget در jQueryUI یک نگهدارنده ی محتوا قابل ارتقا و پیش ساخته بر اساس jQuery است که به بخش های مختلفی تقسیم می شود که احتمالا شبیه به تب هستند. jQuery متد accordion() را برای دستیابی به این امر ارائه می دهد.

ترکیب:

متد accordion() به دو فرم استفاده می شود:

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

$(selector, context).accordion (“action”, params) Method

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

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

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

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

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

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

Option

Description

active

ایندکس مربوط به منویی را که باز است، وقتی که صفحه برای اولین بار دیده می شود، نشان می دهد. مقدار پیش فرض آن ۰ است، به عنوان مثال اولین منو.

Option – active

Indicates the index of the menu that is open when the page is first accessed. By default its value is 0, i.e the first menu.

ایندکس منویی که باز است را نشان می دهد، وقتی صفحه برای اولین بار دیده می شود. مقدار پیش فرض آن ۰ است، به عنوان مثال اولین منو.

می تواند از انواع زیر باشد:

· Boolean: اگر روی false تنظیم شده باشد، همه ی پنل ها را خراب می کند. لازم است که گزینه ی collapsible روی true تنظیم شده باشد.

· Integer: یک شاخص ۰ محور از پنل که فعال است. یک مقدار منفی پنل را از آخرین پنل، به عقب می راند.

$(“.selector”).accordion({ active: 2 });

animate

این گزینه برای تنظیم چگونگی محرک سازی پنل های در حال تغییر استفاده می شود. مقدار پیش فرض آن {} است.

Option – animate

این گزینه برای امتحان کردن چگونگی حرکت پنل های در حال تغییر استفاده می شود. مقدار پیش فرض آن {} است.

این گزینه می تواند از انواع زیر باشد:

· Boolean: مقدار false انیمیشن ها را غیرفعال خواهد کرد.

· Number: طول دوره به هزارم ثانیه می باشد.

· String: نام easing برای استفاده با مدت زمان به طور پیش فرض.

· Object: تنظیمات انیمیشن با پراپرتی های easing و duration.

$(“.selector”).accordion( { animate: “bounceslide” } );

collapsible

وقتی این گزینه روی true تنظیم شده باشد، به یوزرها اجازه می دهد تا با کلیک کردن روی یک منو آن را ببندند. به طور پیش فرض کلیک کردن روی تیتر پنل باز، هیچ تاثیری ندارد. مقدار پیش فرض آن false است.

Option – collapsible

وقتی این گزینه روی true تنظیم شده باشد، به یوزرها اجازه می دهد تا با کلیک کردن روی یک منو آن را ببندند. به طور پیش فرض کلیک کردن روی تیتر پنل باز، هیچ تاثیری ندارد. مقدار پیش فرض آن false است.

$(“.selector”).accordion({ collapsible: true } );

disabled

وقتی این گزینه روی true تنظیم شده باشد، accordion را غیرفعال می کند. مقدار پیش فرض آن false است.

Option – disabled

وقتی این گزینه روی true تنظیم شده باشد، accordion را غیرفعال می کند. مقدار پیش فرض آن false است.

$(“.selector”).accordion({ disabled: true });

event

این گزینه رویداد استفاده شده برای انتخاب تیتر یک accordion تعیین می کند. مقدار پیش فرض آن click است.

Option – event

این گزینه رویداد استفاده شده برای انتخاب تیتر یک accordion تعیین می کند. مقدار پیش فرض آن click است.

$(“.selector”).accordion({ event: “mouseover” });

header

این گزینه یک انتخابگر یا یک عنصر را برای رد شدن از الگوی پیش فرض برای تشخیص عناصر تیتر، تعیین می کند. مقدار پیش فرض آن > li > :first-child,> :not(li):even است.

Option – header

This option specifies a selector or element to override the default pattern for identifying the header elements. By default its value is > li > :first-child,> :not(li):even.

$(“.selector”).accordion({ header: “h3” });

heightStyle

این گزینه برای کنترل طول accordion و پنل ها استفاده می شود. مقدار پیش فرض آن auto است.

Option – heightStyle

این گزینه برای کنترل طول accordion و پنل ها استفاده می شود. مقدار پیش فرض آن auto است.

مقادیر ممکن عبارتند از:

· auto: همه ی پنل ها براساس طول بلندترین پنل تنظیم خواهند شد.

· fill: براساس طول accordion’ اصلی به میزان طول در دسترس گسترده می شود.

· content: هر پنل دارای طولی به انداره ی محتوای آن است.

$(“.selector”).accordion({ heightStyle: “fill” });

icons

این گزینه آبجکتی است که آیکن هایی را تعریف می کند که برای سمت چپ تیتر متن، برای پنل های باز و بسته، تعریف می کند. آیکن مورد استفاده برای پنل های بسته به عنوان نام header تعیین می شود، در حالیکه آیکن مورد استفاده برای پنل های باز headerSelected تعیین می شود. مقدار پیش فرض آن is { “header”: “ui-icon-triangle-1-e”, “activeHeader”: “ui-icon-triangle-1-s” } است.

Option – icons

این گزینه آبجکتی است که آیکن هایی را تعریف می کند که برای سمت چپ تیتر متن، برای پنل های باز و بسته، تعریف می کند. آیکن مورد استفاده برای پنل های بسته به عنوان نام header تعیین می شود، در حالیکه آیکن مورد استفاده برای پنل های باز headerSelected تعیین می شود. مقدار پیش فرض آن is { “header”: “ui-icon-triangle-1-e”, “activeHeader”: “ui-icon-triangle-1-s” } است.

$(“.selector”).accordion({ icons: { “header”: “ui-icon-plus”, “activeHeader”: “ui-icon-minus” } } );

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

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

مثال زیر قابلیت ساده ی accordion widget را بدون انتقال پارامتر در متد accordion() توضیح می دهد.

$(function () {

$(“#accordion-1”).accordion();

});

#accordion-1 {

font-size: 14px;

}

روی عنوان ها (Tab 1,Tab 2,Tab 3) کلیک کنید تا محتوای شکسته شده به بخش های منطقی را گسترش داده / خراب کنید (expand/collapse).

استفاده از collapsible:

مثال زیر استفاده از گزینه ی collapsible را در accordion widget از JqueryUI توضیح می دهد:

$(function () {

$(“#accordion-2”).accordion({

collapsible: true

});

});

#accordion-2 {

font-size: 14px;

}

در اینجا collapsible را به true تنظیم کرده ایم. روی تیتر accordion کلیک کنید، این باعث سقوط بخش فعال می شود.

استفاده از heightStyle:

مثال زیر استفاده از گزینه های heightStyle را در accordion widget از JqueryUI توضیح می دهد.

$(function () {

$(“#accordion-3”).accordion({

heightStyle: “content”

});

$(“#accordion-4”).accordion({

heightStyle: “fill”

});

});

#accordion-3, #accordion-4 {

font-size: 14px;

}

Height style-content

Height style-Fill

در اینجا دو accordion وجود دارد که اولی دارای گزینه ی heightStyle است که بر روی content تنظیم شده که به پنل های accordion اجازه می دهد تا طول اصلی خود را حفظ کنند. دومین accordion دارای گزینه ی heightStyle است که روی fill تنظیم شده است، متن به طور خودکار ابعاد accordion را به طول ظرف اصلی تنظیم می کند.

متد $(selector, context).accordion (“action”, params):

متد accordion (“action”, params) می تواند یک اکشن را روی عناصر accordion اجرا می کند، مانند انتخاب کردن/ از حالت انتخاب در آوردن منوی accordion. این اکشن به عنوان یک رشته در اولین برهان تعیین می شود ( برای مثال “disable” همه ی منوها را غیرفعال می سازد.) اکشن هایی را که می توانند منتقل شوند، در جدول زیر بررسی کنید.

$(selector, context).accordion (“action”, params);

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

Action

Description

destroy

این اکشن قابلیت accordion را از یک عنصر به طور کامل از بین می برد. عناصر به وضعیت pre-init خود بازمی گردند.

Action – destroy

این اکشن قابلیت accordion را از یک عنصر به طور کامل از بین می برد. عناصر به وضعیت pre-init خود بازمی گردند.

$(“.selector”).accordion(“destroy”);

disable

این اکشن منوها را غیرفعال می کند. هیچ کلیک کردنی به حساب نمی آید. این متد هیچ برهانی را نمی پذیرد.

Action – disable

این اکشن منوها را غیرفعال می کند. هیچ کلیک کردنی به حساب نمی آید. این متد هیچ برهانی را نمی پذیرد.

$(“.selector”).accordion(“disable”);

enable

این اکشن همه ی منوها را مجددا فعال می سازد. کلیک کردن ها دوباره در نظر گرفته می شوند. این متد هیچ برهانی را نمی پذیرد.

Action – enable

این اکشن همه ی منوها را مجددا فعال می سازد. کلیک کردن ها دوباره در نظر گرفته می شوند. این متد هیچ برهانی را نمی پذیرد.

$(“.selector”).accordion(“enable”);

option( optionName )

این اکشن آخرین مقدار مرتبط به عنصر accordion را با optionName تعیین شده، دریافت می کند و مقدار یک String را به عنوان برهان در نظر می گیرد.

Action – option( optionName )

این اکشن آخرین مقدار مرتبط به عنصر accordion را با optionName تعیین شده، دریافت می کند و مقدار یک String را به عنوان برهان در نظر می گیرد.

var isDisabled = $(“.selector”).accordion(“option”, “disabled”);

option

این اکشن یک آبجکت حاوی جفت های key/value را دریافت می کند که گزینه های فعلی hash مربوط به accordion را نمایش می دهد.

Action – option

این اکشن یک آبجکت حاوی جفت های key/value را دریافت می کند که گزینه های فعلی hash مربوط به accordion را نمایش می دهد.

var options = $(“.selector”).accordion(“option”);

option( optionName, value )

این اکشن مقدار گزینه ی accordion مربوط به optionName تعیین شده را تنظیم می کند.

Action – option( optionName, value )

این اکشن مقدار گزینه ی accordion مربوط به optionName تعیین شده را تنظیم می کند.

$(“.selector”).accordion(“option”, “disabled”, true);

option( options )

این اکشن یک یا چند گزینه را برای accordion تنظیم می کند.

Action – option( options )

این اکشن یک یا چند گزینه را برای accordion تنظیم می کند. Options در واقع نقشه ای است از جفت های option-value برای تنظیم.

$(“.selector”).accordion(“option”, { disabled: true });

refresh

این اکشن هر تیتر و پنلی را که به طور مستقیم به DOM اضافه شده یا از آن حذف شدند را پردازش می کند. سپس طول پنل های accordion را مجددا محاسبه می کند. نتایج بستگی به محتوا و گزینه ی heightStyle دارد. این متد هیچ برهانی را نمی پذیرد.

Action – refresh

این اکشن هر تیتر و پنلی را که به طور مستقیم به DOM اضافه شده یا از آن حذف شدند را پردازش می کند. سپس طول پنل های accordion را مجددا محاسبه می کند. نتایج بستگی به محتوا و گزینه ی heightStyle دارد. این متد هیچ برهانی را نمی پذیرد.

$(“.selector”).accordion(“refresh”);

widget

این اکشن عنصر accordion widget را بازمی گرداند، عنصری که با نام گروه ui-accordion تفسیر می شود.

Action – widget

این اکشن عنصر accordion widget را بازمی گرداند، عنصری که با نام گروه ui-accordion تفسیر می شود.

var widget = $(“.selector”).accordion(“widget”);

مثال:

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

$(function () {

$(“#accordion-5”).accordion({

disabled: false

});

$(“input”).each(function () {

$(this).change(function () {

if ($(this).attr(“id”) == “disableaccordion”) {

$(“#accordion-5”).accordion(“option”, “disabled”, true);

} else {

$(“#accordion-5”).accordion(“option”, “disabled”, false);

}

});

});

});

#accordion-5 {

font-size: 14px;

}

در اینجا فعالسازی و غیرفعالسازی accordion ها را توضیح دادیم. برای بررسی هر اکشن، دکمه های مربوط را انتخاب کنید.

مدیریت رویداد روی عناصر accordion:

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

Event Method

Description

activate(event, ui)

این رویداد وقتی آغاز می شود که یک منو فعال می شود. این رویداد تنها برای فعالسازی پنل کاربرد دارد و برای پنل اصلی، در هنگام ایجاد accordion widget ، استفاده نمی شود.

Event – activate(event, ui)

این رویداد وقتی آغاز می شود که یک منو فعال می شود. این رویداد تنها برای فعالسازی پنل کاربرد دارد و برای پنل اصلی، در هنگام ایجاد accordion widget ، استفاده نمی شود. در حالیکه رویداد از نوع Event و ui از نوع Object است. مقادیر ممکن برای ui عبارتند از:

newHeader: یک آبجکت jQuery که تیتری را نمایش می دهد که اخیرا فعال بوده است.

oldHeader:: یک آبجکت jQuery را نشان می دهد که اخیرا غیرفعال شده است.

newPanel: یک آبجکت jQuery است که پنلی را نشان می دهد که اخیرا فعال بود.

oldPanel: یک آبجکت jQuery است که پنلی را نشان می دهد که اخیرا غیر فعال بود.

$(“.selector”).accordion({ activate: function (event, ui) { } });

beforeActivate(event, ui)

این رویداد قبل از فعالسازی پنل، آغاز می شود. برای جلوگیری از فعالسازی پنل، این رویداد می تواند کنسل شود.

Event – beforeActivate(event, ui)

این رویداد قبل از فعالسازی پنل، آغاز می شود. برای جلوگیری از فعالسازی پنل، این رویداد می تواند کنسل شود. رویداد از نوع Event و ui از نوع object است . مقادیر ممکن برای ui عبارتند از:

newHeader: یک آبجکت jQuery است که تیتری را نشان می دهد که قرار است فعالسازی شود.

oldHeader: یک آبجکت jQuery است که تیتری را نشان می دهد که قرار است غیر فعالسازی شود.

newPanel: یک آبجکت jQuery است که پنلی را نشان می دهد که قرار است فعالسازی شود.

oldPanel: یک آبجکت jQuery است که پنلی را نشان می دهد که قرار است غیرفعالسازی شود.

$(“.selector”).accordion({beforeActivate: function (event, ui) { }});

create(event, ui)

این رویداد با ایجاد accordion ایجاد می شود.

Event – create(event, ui)

این رویداد با ایجاد accordion ایجاد می شود. در آن رویداد از نوع Event و ui از نوع object است. مقادیر ممکن برای ui عبارتند از:

· header: یک آبجکت jQuery است که تیتر فعال را نمایش می دهد.

· panel: یک آبجکت jQuery است که پنل فعال را نمایش می دهد.

$(“.selector”).accordion({create: function (event, ui) { }});

مثال:

مثال زیر استفاده از متد رویداد را در accordion widgets توضیح می دهد. این مثال استفاده از رویدادهای create, beforeActive و active را توضیح می دهد.

$(function () {

$(“#accordion-6”).accordion({

create: function (event, ui) {

$(“span#result”).html($(“span#result”).html() + “Created
“);

},

beforeActivate: function (event, ui) {

$(“span#result”).html($(“span#result”).html() + “, beforeActivate
“);

},

activate: function (event, ui) {

$(“span#result”).html($(“span#result”).html() + “activate
“);

}

});

});

#accordion-6 {

font-size: 14px;

}

---

در اینجا متنی را براساس رویدادها در پایین نمایش می دهیم.