iv-select یک افزونه jQuery سبک، سریع و ساده می باشد، که می تواند جایگزین مناسبی برای جعبه های انتخاب HTML باشد. این افزونه توسط ایران VBA برنامه نویسی و ایجاد شده است و بطور رایگان در دسترس استفاده کنندگان می باشد.
فهرست مطالب
مهمترین قابلیت های iv-select
- رابط کاربری بهبود یافته با افزودن فیلد جستجو به جعبه انتخاب اچ تی ام ال (HTML select tag)
- رابط کاربری بهبود یافته برای جعبه های انتخاب چندتایی
- ساده و سبک. iv-select بینهایت ساده و سبک می باشد. فقط 16.7 کیلوبایت. (نسخه فشرده شده فقط 11.9 کیلوبایت)
- iv-select با استفاده از w3.css طراحی شده است.
- iv-select از تابع val برای تعیین مقدار استفاده می نماید. (jQuery val function)
- iv-select با اعتبارسنجی HTML5 سازگار می باشد.
راه اندازی iv-select
با استفاده از تابع iv_selectConvert می توانید جعبه (های) انتخاب HTML را به iv-select تبدیل نمایید. بعنوان مثال کدهای زیر تگ های انتخاب شده توسط jQuery را به iv-select تبدیل می نماید.
$('select').iv_selectConvert(); //convert all HTML selects to iv_select
$('#select-id').iv_selectConvert(); //convert specific HTML select to iv_select
$('.class-name').iv_selectConvert(); //convert all selects with specific class name to iv_select
هیچیک از آرگومان های تابع iv_selectConvert اجباری نمی باشد. بنابراین کدهای بالا بدون هیچ مشکلی کار خود را انجام خواهند داد.
تعیین و گرفتن مقدار iv-select
تعیین و گرفتن مقدار iv-select کاملاً مشابه jQuery می باشد و از این بابت iv-select هیچ تغییری در فرایند ایجاد نکرده است.
مقدار اولیه iv-select
برای اینکه انتخاب های اول iv-select را مشخص کنید می توانید از ویژگی data-iv-init-value استفاده نمایید. در صورتی که در تگ انتخابی این ویژگی مقدار داشته باشد، تابع iv_selectConvert بصورت خودکار مقادیر اولیه را انتخاب می نماید. مزیت این کار امکان تعیین مقادیر اولیه در سمت سرور می باشد.
توجه داشته باشید که مقدار اولیه برای جعبه های چند انتخابی (multipe) باید از طریق پیوند (join) مقادیر اولیه با استفاده از کاراکتر | انجام پذیرد. بعنوان مثال 1|2|5
مستندات توابع iv-select
تابع iv_selectConvert
وظیفه این تابع تبدیل جعبه (های) انتخاب HTML به iv-select می باشد. آرگومان ها و مقدار پیش فرض این تابع به شرح جدول زیر می باشد.
| آرگومان | نوع داده | مقدار پیش فرض | توضیحات |
|---|---|---|---|
| placeholder | string | “Type to search” | متنی که در جعبه متن نمایش داده می شود. |
| text_el_class | string | “w3-block w3-border” | کلاس های CSS مربوط به جعبه متن |
| text_el_style | string | “” | سبک های CSS درون خطی مربوط به جعبه متن |
| class_for_search | string | “w3-block” | کلاس های CSS مربوط به فیلد جستجو |
| search_style | string | “” | سبک های CSS درون خطی مربوط به فیلد جستجو |
| class_for_value | string | “” | کلاس های CSS مربوط به عنصر مقدار |
| container_class | string | “” | کلاس های CSS مربوط به عنصر ظرف iv-select |
| options_container_class | string | “” | کلاس های CSS مربوط به عنصر ظرف انتخاب ها |
| options_container_style | string | “” | سبک های CSS درون خطی مربوط به عنصر ظرف انتخاب ها |
| option_class | string | “w3-block w3-button w3-hover-blue w3-border-left w3-border-right” | کلاس های CSS مربوط به عنصر انتخاب ها |
| option_style | string | “” | سبک های CSS درون خطی مربوط به عنصر انتخاب ها |
| keep_existing_class | string | toValue | مشخص می کند که کلاس های جعبه انتخابی که باید تبدیل شود به کدام عنصر iv-select انتقال شوند. toText : برای انتقال به عنصر نمایشی متن toValue : برای انتقال به عنصر مخفی مقدار toContainer : برای انتقال به عنصر ظرف iv-select |
| close_after_click | bool | true | انتخاب ها بعد از کلیک بسته شوند یا باز بمانند. مقدار پیش فرض: بسته شوند. |
| no_search_element | bool | false | عنصر جستجو ایجاد شود یا خیر. مقدار پیش فرض: ایجاد شود. |
مثال
جعبه انتخاب زیر لیست تمام کشورهای دنیا می باشد. می خواهیم با استفاده از تابع iv_selectConvert این لیست را به iv-select تبدیل کنیم.
کد کلید
در زیر می توانید کد کلید بالا را مشاهده نمایید.
<div class="wp-block-button w3-padding-top is-style-fill">
<a class="wp-block-button__link wp-element-button" onclick="jQuery('#country-list-1').iv_selectConvert()">تبدیل به iv-select</a>
</div>
تابع iv_cloneSelect
وظیفه این تابع تهیه یک نسخه کپی کامل از iv-select می باشد. آرگومان ها و مقدار پیش فرض این تابع به شرح جدول زیر می باشد.
| آرگومان | نوع داده | مقدار پیش فرض | توضیحات |
|---|---|---|---|
| name | string | “” | ویژگی name عنصر مقدار iv-select جدید. |
| id | string | “” | ویژگی id عنصر مقدار iv-select جدید. |
| placeholder | string | “Type to search” | متنی که در جعبه متن نمایش داده می شود. |
| text_el_class | string | “w3-block w3-border” | کلاس های CSS مربوط به جعبه متن |
| text_el_style | string | “background-color:white;cursor:pointer!important;padding:7px 8px;” | سبک های CSS درون خطی مربوط به جعبه متن |
| container_class | string | “” | کلاس های CSS مربوط به عنصر ظرف iv-select |
| container_style | string | “” | سبک های CSS مربوط به عنصر ظرف iv-select |
| options_container_class | string | “” | کلاس های CSS مربوط به عنصر ظرف انتخاب ها |
| options_container_style | string | “” | سبک های CSS درون خطی مربوط به عنصر ظرف انتخاب ها |
| option_class | string | “w3-block w3-button w3-hover-blue w3-border-left w3-border-right” | کلاس های CSS مربوط به عنصر انتخاب ها |
| option_style | string | “” | سبک های CSS درون خطی مربوط به عنصر انتخاب ها |
| remove_unselected | bool | true | مشخص می کند که انتخاب هایی که در iv-select اصلی انتخاب نشده اند، ایجاد شوند یا خیر. |
| close_after_click | bool | true | انتخاب ها بعد از کلیک بسته شوند یا باز بمانند. مقدار پیش فرض: بسته شوند. |
دریافت iv-select
بیشتر بخوانید
تابع Concat اکسل | جمع کردن کلمات و رشته ها در اکسل
توابع توکار VBA | لیست کامل توابع داخلی در ویژوال بیسیک
عملگرهای VBA | انجام عملیات روی داده ها و ایجاد عبارت ها
مرجع VBA | فهرست دستورات و مفاهیم زبان برنامه نویسی ویژوال بیسیک
واژه نامه اکسل | فهرست اصطلاحات اختصاصی بکار رفته در اکسل