تگ select در دوجو

تولکیت دوجو برای تگ<select> معادلهای گوناگونی  داره که تفاوتشون توی مقادیر option-ها و نحوه ورود اطلاعات از سمت یوزر هست:
<select  style="width: 150px;" data-dojo-type="dijit.form.Select" >

این ویجت مثل تگ <Select> عمل می کنه یعنی لیبل option-ها با value آنها تفاوت داره.

width:
در حالت پیش فرض عرض ویجت برابر با عرض option-ی هست که انتخاب شده ولی برای فیکس کردن عرض باید از style استفاده کنیم.مثلا:
maxHeight:
یکی از مهمترین attribute این ویجت  maxHeight هست که ارتفاع لیست حاوی option-ها رو مشخص می کنه برحسب پیکسل ولی نباید لفظ px را نوشت.
اگر  ارتفاع لیست حاوی option-ها بلندتر از مقدار مشخص شده در maxHeight  بود  ، scroll کنار لایه ظاهر میشه.
forceWidth:
این attribute پهنای  لیست option-هارو مشخص می کنه .یعنی  اگه می خواین پهنای لیست option-ها دقیقا برابر با پهنای ویجت باشه این attr را true می کنید و اگه می خواین پهنای لیست option-ها در حالت حداکثری باشه و همه option-ها به طور کامل دیده شوند،false (به صورت پیش فرض هم false هست)
emptyLabel:
اگر emptyLabel را ست کرده و ویجت select-ی بدون هیچ option-ی بسازیم، emptyLabel نمایش داده می شود.
separator:
برای افزودن جداکننده بین option-ها (خطی شبیه <hr>)از این کد استفاده می کنیم:
<option type="separator"></option>
Styled options:
در این ویجت برعکس <select> می تونیم option-هایی با رنگ یا فونت متفاوت بسازیم یعنی داخل <option> می تونیم از <li> <strong> <font> یا … استفاده کنیم و option-هایی با استایل متفاوت داشته باشیم.
addOption:
برای اضافه کردن یک یا چند option ، می تونیم از این متد استفاده کنیم
dijit.byId('myId').addOption({value: 'myValue',label: 'Displayed'});
:get
مقدار انتخاب شده توسط کاربر بوسیله دستور
dijit.byId('myId').get('value')
و لیبل گزینه انتخاب شده توسط کاربر
dijit.byId('myId').get('displayedValue')
:set
برای تنظیم attribute های این ویدجت از این تابع استفاده میشه.
متدهای closeDropDown و openDropDown و toggleDropDown برای باز و بسته کردن لیست option-ها توسط جاوا اسکریپت و چند متد دیگه مثل toString و watch و onBlur و onChange و onClick و onClose و onDblClick و onFetch و onFocus و onHide و onKeyDown و onKeyPress و onKeyUp و onMouseDown و onMouseEnter و onMouseLeave و onMouseMove و onMouseOut و onMouseOver و onMouseUp بسیار مفید هستند.

dijit.form.FilteringSelectapi

این ویجت مثل تگ <Select> عمل می کنه یعنی لیبل option-ها با value آنها تفاوت داره و فرق اصلی اون با تگ <select> و ویدجت Select در نحوه انتخاب مقادیر توسط کاربر هست که می تونه از لیست option-ها هم با موس و هم با کیبورد مقداری انتخاب کنه.

همه ی attribute-های قبلا گفته شده برای این ویجت به درستی عمل می کنه و چند attribute مفید دیگه:

hasDownArrow:

این attribute که پیش فرض مقدار true دارد برای نمایش “فلش رو به پایین” هست،در صورتی که مقدار  false وارد شود این ویدجت مثل یک textbox ساده به نظر میاد که خاصیت autoComplete دارد.

highlightMatch:

برای هایلایت کردن مقادیر وارد شده ی کاربر در لیبل option-های موجود،که به صورت پیش فرض first تنظیم شده (و تقریبا شبیه field like string% در mysql عمل می کند)

اگر مقدار all ست شود و queryExpr=”*${0}*” نیز اضافه گردد شبیه field like %string% در mysql عمل می کند.

intermediateChanges:

فرض کنید به  onChange این ویدجت تابعی connect شده باشد،اگر intermediateChanges برابر true باشد با هر بار تغییر مکان در لیست option-ها تابع connect شده اجرا می شود.مقدار پیش فرض این false ، attribute  است.

searchDelay:

تاخیر بر حسب میلی ثانیه بین زمانیکه کاربر چیزی تایپ می کنه و دوجو شروع به جستجو در option-ها می کند.

attribute-های مفید دیگری مثل trim و selectOnClick و scrollOnFocus و ignoreCase وجود دارد.


dijit.form.ComboBox – api

این ویجت مخلوطی از تگ Select و input هست،یعنی option-های این ویجت value ندارد

این سه ویدجت تقریبا همه ی نیازهای یک برنامه نویس تامین میکنه ولی من شخصا ویدجتی می خوام که option-هاش value داشته باشند و در عین حال یوزر بتونه مقدار جدید اضافه کنه.که تو نوشته بعدی این کار انجام میدیم.

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *