barzegar-select

1.0.2 • Public • Published

🔥 افزونه 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

Package Sidebar

Install

npm i barzegar-select

Weekly Downloads

3

Version

1.0.2

License

MIT

Unpacked Size

690 kB

Total Files

20

Last publish

Collaborators

  • amirhossein-barzegar