🔥 افزونه Barzegar Select
به سادگی ورودی (input) ها را بسیار جذاب برای کاربران جلوه دهید. فیلد های چند انتخابی (select option) زیبا و کاربردی برای کاربران ایجاد کنید به طوری کامل از دکمه های صفحه کلید کاربر پشتیبانی نماید.
برای مشاهده لینک گیت هاب این کتابخانه اینجا کلیک کنید. 👀
برای مشاهده دمو و مثال های بیشتر اینجا کلیک کنید. ✨
نحوه نصب و راه اندازی
مراحل نصب کاملا ساده است. 😊
با توجه به اینکه این کتابخانه نیازمند به کتابخانه jquery است. بنابراین ابتدا مطمئن شوید که به خوبی فایل جاوااسکریپت آن را پیش از همه بارگزاری نمایید.
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>پس آن ، باید فایل جاوااسکریپت و استایل کتابخانه barzegar-select را تهیه کرده و در زیر آن بارگیری نمایید.
نصب از طریق npm :
npm install barzegar-select
بارگیری CDN های کتابخانه:
<link href="https://cdn.jsdelivr.net/npm/barzegar-select@0.0.9/src/barzegar.select.jquery.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/barzegar-select@0.0.9/src/barzegar.select.jquery.min.js"></script>قابلیت ها و ویژگی ها
- امکان برچسب نویسی ، تگ گذاری و اضافه و حذف کردن آنها
- امکان قرار دادن داده هایی برای نمایش و انتخاب کردن در لیست کشویی
- امکان جستجو در میان آیتم های موجود در لیست کشویی
- پشتیبانی بینظیر و کامل از صفحه کلید برای راحتی کاربران و امکان جابه جایی ، افزودن و حذف آیتم ها با استفاده از صفحه کلید! ( حتی میتوان با Ctrl+A همه را انتخاب کرده و با دکمه Backspace یا Delete آنها را حذف کرد.) 💥
- امکان دریافت مستقیم داده ها از وبسرویس مشخص و ارسال مقادیر مورد نیاز به آن به ساده ترین شکل ممکن
- پشتیبانی کامل از زبان فارسی و جستجوی فارسی ❤️
نحوه استفاده
ابتدا المان input خود را در سند HTML خود ایجاد نمایید و یک آیدی مشخص به آن بدهید.
<input type="text" id="inputId" />سپس از طریق آیدی input خود ، آنرا در jquery انتخاب کرده و آنرا از طریق متد barzegarSelect() آن را به پلاگین BarzegarSelect متصل کنید.
$("#inputId").barzegarSelect({
// change options here
})امکانات
| Option | Type | Default | Info |
|---|---|---|---|
| minChars | Int | 1 |
حداقل تعداد کاراکتر برای شروع جستجو از وب سرویس |
| minLengthToCreate | Int | 1 |
حداقل تعداد کاراکتر برای افزودن به انتخاب شده ها |
| maxLengthToCreate | Int | 30 |
حداکثر تعداد کاراکتر برای افزودن به انتخاب شده ها |
| propertyKey | String | "id" |
نام کلید هر آیتم |
| propertyValue | String | "name" |
نام مقدار هر آیتم |
| propertyToSelect | String | "select" |
نام کلید انتخاب شدن یا نشدن هر آیتم |
| propertyToReadOnly | String | "readonly" |
نام کلید فقط خواندنی بودن یا نبودن هر آیتم |
| createItem | Boolean | true |
امکان افزودن آیتم های جدید با تایپ و ثبت کردن |
| liveConnect | Boolean | false |
اتصال مستقیم به وب سرویس و دریافت اطلاعات از آن |
| dropdownLimit | Int | 3 |
محدود کردن تعداد نمایش در لیست کشویی |
| selectedLimit | Int | 5 |
محدود کردن تعداد آیتم های انتخاب شده |
| setToHiddenInput | Boolean | true |
قرار دادن مقادیر به یک input مخفی |
| dropdownGap | Int | 1 |
فاصله لیست کشویی از خودِ input |
| webserviceUrl | String | "" |
آدرس وب سرویس اتصالی برای دریافت داده های مورد جستجو |
| method | String | "POST" |
متد HTTP وب سرویس |
| contentType | String | "application/x-www-form-urlencoded:charset=UTF-8" |
نوع فرمت ارسالی داده ها به وبسرویس |
| customData | Object | {} |
دیگر پارامتر های ارسالی دلخواه به وب سرویس |
| delay | Int | 100 |
تاخیر در دریافت نتایج از وبسرویس |
| searchingText | String | "در حال جستجو ..." |
متن عبارت درحال جستجو از وب سرویس |
| addBtnText | String | "افزودن" |
متن دکمه افزودن |
| deleteIcon | String | "<svg></svg>" |
آیکون دکمه حذف موارد انتخاب شده |
| hasImg | Boolean | true |
امکان نمایش آیتم همراه با عکس |
| propertyImg | String | "img" |
نام کلید خصوصیت عکس |
مشارکت
در صورت مشاهده هر گونه مشکل، خطا، درخواست و نظر خوشحال میشویم که آن را با ما به اشتراک بگذارید و در ارتباط باشید! 🙏
ایمیل ارتباط با پشتیبانی: barzegar.select.info@gmail.com
تهیه شده با 💖 توسط امیرحسین برزگر برای شما 😉
مجوز
دارای مجوز MIT