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

آموزش Accordion Widget

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

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
ایندکس مربوط به منویی را که باز است، وقتی که صفحه برای اولین بار دیده می شود، نشان می دهد. مقدار پیش فرض آن 0 است، به عنوان مثال اولین منو. 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. ایندکس منویی که باز است را نشان می دهد، وقتی صفحه برای اولین بار دیده می شود. مقدار پیش فرض آن 0 است، به عنوان مثال اولین منو. می تواند از انواع زیر باشد: · Boolean: اگر روی false تنظیم شده باشد، همه ی پنل ها را خراب می کند. لازم است که گزینه ی collapsible روی true تنظیم شده باشد. · Integer: یک شاخص 0 محور از پنل که فعال است. یک مقدار منفی پنل را از آخرین پنل، به عقب می راند. $(".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() توضیح می دهد.








jQuery UI Accordion Example 








Tab 1

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.

Tab 2

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.

Tab 3

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.


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


استفاده از collapsible

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








jQuery UI Accordion Example 








Tab 1

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.

Tab 2

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.

Tab 3

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.

  • List item one
  • List item two
  • List item three

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


استفاده از heightStyle

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








jQuery UI Accordion Example 








Height style-content

Tab 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  • List item one
  • List item two
  • List item three
  • List item four
  • List item five

Tab 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Tab 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.



Height style-Fill

Tab 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  • List item one
  • List item two
  • List item three
  • List item four
  • List item five

Tab 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Tab 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.


در اینجا دو 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
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
widget این اکشن عنصر accordion widget را بازمی گرداند، عنصری که با نام گروه ui-accordion تفسیر می شود. Action - widget این اکشن عنصر accordion widget را بازمی گرداند، عنصری که با نام گروه ui-accordion تفسیر می شود. var widget = $(".selector").accordion("widget");
مثال:

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








jQuery UI Accordion Example 








Tab 1

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.

Tab 2

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.

Tab 3

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.

  • List item one
  • List item two
  • List item three
Disable accordion Enable accordion

در اینجا فعالسازی و غیرفعالسازی 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 را توضیح می دهد.








jQuery UI Accordion Example 








Tab 1

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.

Tab 2

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.

Tab 3

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.

  • List item one
  • List item two
  • List item three


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

  • 1628
  •    860
  • تاریخ ارسال :   1394/07/28

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

ارسال

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

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