Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →

barzegar-select

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

barzegar-select

An awesome UI select box, search box, tagging input, etc... with too many features; which powered by JavaScript and JQuery!

1.0.2
latest
Source
npm

Version published: 11 months ago

Weekly downloads: 6; increased by200%

Maintainers: 1

Weekly downloads

Created: 12 months ago

Source

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

Keywords

FAQs

What is barzegar-select?

Is barzegar-select popular?

Is barzegar-select well maintained?

Package last updated on 12 Dec 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install