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

معرفی پلاگین x tree select یک select با قابلیت تو در تو

به نام دانای بر حق

مقدمه گاهی اوقات نیاز دارید از یک لیست درحتی یا تو در تو یک select یا combobox درست کنید. ما این موضوع رو تو سایت دیوار دیدم و اما نمونه رایگان و اوپن سورسی از اون ندیدیم. بنده حقیر و استاد SadeghPM  خودمون پلاگین jquery رو منطبق بر نیاز های یک توسعه دهنده وب پارسی زبان در حد و کلاس بین المللی نوشتیم.

DEMO | دمو یا پیش نمایش این افزونه یا پلاگین

برای دیدن پیش نمایش این افزونه به لینک زیر مراجعه کنید:

https://4xmen.ir/github_example/tree-select/demo/

امکانات x tree select چیست؟

مهم ترین امکان استفاده از داده های درختی است به صورتی اگر شما مثلا چندی دسته بندی و زیر دسته بندی دارید میتونید از پلاگین استفاده کنید.

اما سایر امکانات:

  • قابلیت تعریف عنوان ها
  • قابلیت راست به چپ یا rtl
  • قابلیت استفاده از رویداد onClose زمان بسته شدن منوی برنامه
  • قابلیت استفاده از رویداد onOpen زمان باز شدن منوی برنامه
  • قابلیت استفاده از رویداد onSelect زمان تغییردادن مقدار انتخاب شده
  • قابلیت استفاده از رویداد onChange زمان انتخاب یک مقدار
  • قابلیت استفاده از تم های bootstrap, materilze, semantic ui و …
  • قابلیت جستجو در بین آیتم ها
  • قابلیت انتخاب یا عدم انتخاب والد ها
  • قابلیت استفاده از json سفارشی سازی شده
  • قابلیت استفاده از افکت مختلف fade, flip, slide
  • و …

مرورگر های سازگار

  • IE >= 9
  • Edge all version
  • Firefox >= 16
  • Safari >=11
  • / chrome / chromium >= 26
  • Opera >=15
  • Android browser >= 4.4
  • Blackberry Browser >= 10
  • iOS Safari >= 7

جدول اطلاعات کلی

امکانات مقدار پیش فرض توضیحات
direction ltr راست به چپ یا برعکس rtl
searchable false قابلیت سرچ
datatree [] اطلاعات درختی به صورت json
mainTitle “Main category” عنوان دسته اصلی
transition “fade” افکات تغییرات
json {title: 'title',value: 'value',child: 'child'} کلید های اطلاعات ورودی جیسون
selectablePrernt false امکان انتخاب والد

نحوه استفاده

برای نحوه استفاده به پیش نمایش مراجعه کنید نمونه های متعدد وجود دارد.

ساده ترین روش فروخوانی توسط npm

 npm i x-tree-select

دانلود افزونه و اطلاعات بیشتر

گیت هاب + سورس

https://github.com/4xmen/x-tree-select

npm :

https://www.npmjs.com/package/x-tree-select

 

لطفا برای حمایت و تشکر از ما پروژه جهت توسعه بیشتر در گیت هاب star کنید و اگر مشکلی داشتید از همین گیت هاب موضوع ایجاد کنید قطعا پاسخگو خواهیم بود.

 


انتشار

در

, ,

توسط

برچسب‌ها:

نظرات

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *