کتابخانه
bootstrap-select یه پلاگین jQuery هست که select ساده HTML رو به یه منوی کشویی مرتب تبدیل می کنه، با انتخاب چندتایی، جستجو داخل لیست و ظاهر هماهنگ با Bootstrap. اگه فرم هات پر از لیست های طولانی و بی ریخت شده، این کتابخانه کارت رو راحت می کنه.
نسخه رسمی و بدون تغییر، از منبع رسمی با مجوز MIT؛ هش هر فایل با منبع بررسی شده است.
۴۵۳ کیلوبایت· ۱۳۲ فایل· انتشار
SHA-256: aa8d026a6e17274410d3a5e70a20856018771835d4e398f7969529f9e9b6c815
bootstrap-select یه مشکل قدیمی رو حل می کنه: select معمولی مرورگر. ظاهرش توی هر مرورگر فرق داره و با بقیه فیلدهای Bootstrap جور در نمیاد. انتخاب چندتایی باهاش فقط با Ctrl و کلیک ممکنه، و وقتی لیست صد تا گزینه داره، پیدا کردن یه مورد واقعاً اذیت می کنه. این پلاگین همون تگ select خودت رو برمی داره و یه منوی کشویی با ظاهر Bootstrap روش می ذاره، با انتخاب چندتایی و کادر جستجو.
توی سایت های ایرانی جاهای زیادی به دردت می خوره: لیست استان ها و شهرها توی فرم ثبت سفارش، انتخاب چند دسته بندی برای یه محصول توی پنل مدیریت، یا فیلتر چند برچسبی توی یه سایت آگهی یا خبری. خوبیش اینه که بیشتر کارها با چند attribute روی خود تگ انجام می شه و لازم نیست کلی JavaScript بنویسی. مثلاً کلاس selectpicker پلاگین رو فعال می کنه و data-live-search جستجو رو روشن می کنه. یه مزیت دیگه هم اینه که select اصلی سر جاش می مونه. پس مقدار فرم مثل قبل ارسال می شه و کد سمت سرورت لازم نیست تغییر کنه.
ولی همه جا مناسب نیست. این کتابخانه به jQuery و Bootstrap وابسته هست. اگه پروژه ات jQuery نداره و نمی خوای فقط برای یه منوی کشویی اضافه اش کنی، یا فرانت ات با React و Vue نوشته شده، بهتره سراغ کامپوننت خود همون فریم ورک بری. موقع انتخاب، سازگاری با نسخه Bootstrap پروژه ات هم مهمه. قبل از استفاده توی سایت واقعی تست کن که با نسخه ای که داری درست کار می کنه. اگه لیستت چند هزار گزینه داره، روی یه موبایل معمولی هم امتحانش کن، چون ممکنه کند بشه.
یه چیز دیگه برای سایت های فارسی: چون صفحه ها راست چین هستن، سمت باز شدن منو، جای فلش و کادر جستجو رو حتماً تست کن. ممکنه چند خط CSS اضافه لازم داشته باشی. کتابخانه با مجوز MIT منتشر شده و توی پروژه های شخصی و تجاری آزادانه قابل استفاده هست. نسخه های رسمی و بدون تغییرش توی مخزن داخلی ما هم هست، برای روزهایی که npm و CDN های خارجی درست باز نمی شن.
کار با bootstrap-select چند قدم ساده داره. اول مطمئن شو jQuery و فایل های CSS و JS خود Bootstrap توی صفحه لود شدن. بعدش فایل های bootstrap-select رو اضافه کن. ترتیب مهمه: JS این پلاگین باید بعد از jQuery و Bootstrap بیاد. کد آماده اضافه کردن به صفحه پایین همین صفحه هست.
یه چیز رو یادت نره: متن های پیش فرض پلاگین انگلیسی هستن. فایل های زبان پلاگین رو چک کن و اگه گزینه فارسی مناسبی پیدا نکردی، متن ها رو خودت با attribute های مربوطه عوض کن. آخرش هم منو رو توی صفحه راست چین باز کن و یه بار با موبایل امتحانش کن.
یه پلاگین jQuery هست که ظاهر و رفتار select معمولی HTML رو بهتر می کنه. بهش انتخاب چندتایی، جستجوی داخل لیست و ظاهر هماهنگ با Bootstrap اضافه می کنه. برای فرم هایی که لیست طولانی یا انتخاب چند گزینه ای دارن، مثل شهر، دسته بندی یا برچسب، خیلی کاربردیه.
نه، این پلاگین روی jQuery ساخته شده و Bootstrap هم باید توی صفحه باشه. یعنی توی پروژه های بدون jQuery نمی شه ازش استفاده کرد، مگه اینکه jQuery رو هم لود کنی. برای صفحه های سبک یا فرانت های مدرن این یه هزینه اضافه حساب می شه. تو این حالت بهتره سراغ یه کامپوننت select بدون وابستگی به jQuery بری.
روی تگ select، attribute به اسم data-live-search رو با مقدار true بذار. با این کار بالای لیست یه کادر جستجو نشون داده می شه و کاربر با تایپ کردن، گزینه ها رو فیلتر می کنه. اگه پلاگین رو با جاوااسکریپت راه می اندازی، همین گزینه با اسم liveSearch هم هست. برای لیست های طولانی مثل شهرها خیلی به کار می آد.
پلاگین یه نسخه ظاهری از select می سازه، پس تغییر گزینه ها خودکار توی اون دیده نمی شه. بعد از اضافه یا حذف کردن گزینه ها، متد refresh رو روی selectpicker صدا بزن تا منو از روی select اصلی دوباره ساخته بشه. اگه مقدار select رو با جاوااسکریپت عوض کردی هم معمولاً همین متد کار رو درست می کنه.
ممکنه بعضی جزئیات مثل جای فلش، سمت باز شدن منو یا ترازبندی متن به CSS اضافه نیاز داشته باشه. چون جواب قطعی به قالب و نسخه Bootstrap تو بستگی داره، پیش از استفاده روی سایت اصلی، توی یه صفحه آزمایشی همه چیز رو تست کن.
نام کتابخانه، افزونه یا قالب را بفرستید؛ پس از بررسی، نسخه‌های رسمی آن به مخزن اضافه می‌شود.