🔥 افزونه 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/[email protected]/src/barzegar.select.jquery.css" rel="stylesheet"/>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/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" | نام کلید خصوصیت عکس

مشارکت

در صورت مشاهده هر گونه مشکل، خطا، درخواست و نظر خوشحال میشویم که آن را با ما به اشتراک بگذارید و در ارتباط باشید! 🙏

ایمیل ارتباط با پشتیبانی: [email protected]

تهیه شده با 💖 توسط امیرحسین برزگر برای شما 😉

مجوز

دارای مجوز MIT