سلام ، خوش اومدی !
در این قسمت پلاگین فوق العاده کاربردی Select2 رو به همراه توضیح آپشن های مختلفش براتون قرار دادیم
سلکت تک انتخابی
با Select2 میشه یک سلکت تک انتخابی درست کرد مثل نمونه زیر ...
سلکت چند انتخابی
Select2 همچنین از سلکت چند انتخابی هم پشتیبانی می کنه. سلکت زیر با اتریبیوت های multiple مقداردهی شده .
گروه بندی گزینه های دراپ دان
در HTML ، اجزای<option> رو میشه با قرار دادن اونها در
یه المنت <optgroup> گروه بندی کرد:
غیرفعال کردن گزینه ها
Select2 گزینه هایی رو که اتریبیوت disabled برای اونها ست شده و آبجکت هایی که در منابع دورتر قرار دارن و کد disabled:
true براشون ست شده رو بصورت غیرفعال در میاره .
غیرفعال کردن Select2
Select2 به اتریبیوتdisabled روی المنت های
<select> جواب میده . همچنین میتونی Select2 رو با
disabled: true مقداردهی کنی تا همون تنیجه رو بگیری .
Select2 با برچسب
برای این مورد باید از یه<label> همراه با Select2 استفاده کنی ، دقیقا مثل هر المنت <select> دیگه ای.
عرض کانتینر
دو تا باکس Select2 زیر به ترتیب با عرض50% و 75% برای پشتیبانی از طراحی ریسپانسیو استایل دهی شدن :
تم ها
با استفاده از گزینه theme میتونی از تم های سفارشی در Select2 استفاده کنی و اون رو متناسب با بقیه برنامه خودت تنظیم کنی.
آژاکس (داده از راه دور)
Select2 با پشتیبانی AJAX داخلی ، با استفاده از متدهای AJAX jQuery ارائه میشه. در این مثال ، ما می تونیم با استفاده از GitHub's API مخازن رو جستجو کنیم:
بارگیری داده های آرایه
برای استفاده از داده های یک آرایه محلی در منوی دراپ دان و نمایش اونها ، میتونی از گزینه پیکربندی data استفاده کنی.
انتخاب خودکار
با استفاده از گزینه selectOnClose می توان Select2 رو پیکربندی کرد تا موقع بسته شدن دراپ دان ، نتیجه انتخاب شده فعلی رو به طور خودکار نشون بده :
باز موندن بعد از انتخاب
Select2 هنگام انتخاب یک عنصر ، دراپ دان رو بطور خودکار میبنده ، شبیه کاری که با سلکت باکس عادی انجام میشه. برای جلوگیری از بسته شدن منوی کشویی هنگام انتخاب نتیجه ، میتونی از گزینه closeOnSelect استفاده کنی:
محل قرارگیری دراپ دان
گزینه dropdownParent به شما امکان میده یک المنت جایگزین رو برای دراپ دان انتخاب کنید تا به اون اضافه بشه:
محدود کردن تعداد انتخاب ها
در سلکت های چند انتخابی Select2 میتونین محدودیت هایی رو در مورد حداکثر تعداد گزینه هایی که میتونن انتخاب بشن تنظیم کنین. سلکت زیر با اتریبیوت
multiple و آپشن maximumSelectionLength که در select2 وجود داره ایجاد شده .
ایجاد گزینه های پویا
علاوه بر گزینه های از پیش تعریف شده منو، Select2 میتونه به صورت پویا گزینه های جدیدی رو از طریق ورود متن توسط کاربر در سرچ باکس ایجاد کنه. این ویژگی برچسب گذاری (tagging) نام داره. برای فعال کردن برچسب گذاری ، گزینه tags رو روی true تنظیم کن:
برچسب گذاری با سلکت های چند انتخابی
از برچسب گذاری میشه در سلکت های چند انتخابی هم استفاده کرد. در مثال زیر ، روی کنترل Select2 ایی که tags: true اون رو قبلا فعال کردیم اتریبیوت multiple = "multiple" رو تنظیم می کنیم :
placeholder در سلکت تک انتخابی
Select2 از نمایش مقدار placeholder با استفاده از گزینه پیکربندی placeholder پشتیبانی می کنه . مقدار placeholder تا زمانی که یک انتخاب انجام بشه نشان داده میشه .
placeholder در سلکت چند انتخابی
برای اجرای این گرینه در سلکت های چندانتخابی شما نباید هیچ المنت
<option>خالی داشته باشی
placeholder پیش فرض
از طرف دیگه ، مقدار گزینه placeholder میتونه یه data object باشه که یک انتخاب پیش فرض رو نشان میده ( < option >) . در این حالت data object id باید با value گزینه پیش فرض مربوطه
مطابقت داشته باشه.
سفارشی کردن نحوه تطبیق نتایج
وقتی کاربران با وارد کردن سرچ ترم در باکس جستجو ، نتایج رو فیلتر می کنن ، Select2 از یک "تطبیق دهنده" داخلی استفاده میکنه تا سرچ ترم ها رو با گزینه های موجود در لیست مطابقت بده . شما میتونی با استفاده از گزینه پیکربندی matcher در Select2 روشی رو انتخاب کنی که
هنگام تایپ سرچ ترم ها نتایجی که با اون تطابق داره نشون داده بشه.
تطبیق گزینه های گروه بندی شده
فقط آبجکت های سطح اول به matcher منتقل میشن. اگه با داده های تو در تو کار می کنین ، باید از طریق آرایه children اونها رو به صورت جداگانه مطابقت بدی. این امکان برای تطبیق پیشرفته تر هنگام کار با اجسام تودرتو ، به شما امکان میده
اونها رو هر طور که می خوای مدیریت کنی.
حداقل طول عبارات جستجو
با استفاده از گزینه minimumInputLength میتونی حداقل طول عبارات جستجو رو تعیین کنی :
حداکثر طول عبارات جستجو
با استفاده از گزینه maximumInputLength میتونی حداکثر طول عبارات جستجو رو محدود کنی :
اضافه کردن گزینه های جدید به صورت برنامه ریزی شده
با ایجاد یه آبجکت جاوااسکریپت Option و ضمیمه کردن اون به کنترل ، گزینه های جدید رو میشه به صورت برنامه ریزی شده به کنترل Select2 اضافه کرد:
اگه وجود نداره ایجاد کن
می تونی با استفاده از find. گزینه ای رو که از قبل وجود داره انتخاب کنی و در غیر اینصورت اون رو ایجاد کنی :
استفاده از سلکتور jQuery
از طریق سلکتور جی کوئری :selected هم میشه به موارد انتخاب شده دسترسی پیدا کرد و اونها رو دید:
پشتیبانی از راست چین
اگه اتریبیوت dir بر روی <select> یا والد اون تنظیم شده باشه ، در وب سایت های
RTL هم کار میکنه . همچنین میتونی این کار رو با استفاده از گزینه پیکربندی "dir: "rtl انجام بدی .
از بین بردن کنترل Select2
متد destroy ویجت Select2 رو از المنت مورد نظر حذف می کنه و المنت دوباره به Select ساده تبدیل میشه :
بازکردن دراپ دان
Select2 هنگام انجام اقدامات مختلف با استفاده از کامپوننت، چندتا رویداد مختلف رو اجرا میکنه و به شما امکان میده قلاب‌های سفارشی اضافه کنید و اقداماتی رو انجام بدین.
باز و بسته کردن دراپ دان
Select2 هنگام انجام اقدامات مختلف با استفاده از کامپوننت، چندتا رویداد مختلف رو اجرا میکنه و به شما امکان میده قلاب‌های سفارشی اضافه کنید و اقداماتی رو انجام بدین.
متدهای Select2
Select2 چندین متد داخلی داره که امکان کنترل محتویات سلکت رو به وسیله دکمه ها فراهم میکنه.
متدهای Select2
Select2 چندین متد داخلی داره که امکان کنترل محتویات سلکت رو به وسیله دکمه ها فراهم میکنه.