barzegar-select

🔥 افزونه 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"	نام کلید خصوصیت عکس

مشارکت

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

ایمیل ارتباط با پشتیبانی: [e-mail]

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

مجوز

دارای مجوز MIT