کنترل توکن چند منتخب

کنترل توکن چند منتخب یک کنترل کشویی با یک لیست کامل خودکار است که نشانه هایی را که می توانند با کلیک بر روی یک دکمه "X" بر روی توکن یا استفاده از کلید حذف یا backspace روی صفحه کلید حذف شوند ، درج می کند.

کنترل توکن چند منتخب شبیه به کنترل ویرایش-کامبو و کنترل خودکار است. با این حال ، مقادیر انتخاب شده به عنوان "نشانه ها" نمایش داده می شوند (همانطور که در تصویر زیر نشان داده شده است که "بلژیک" ، "برزیل" و "کانادا" انتخاب شده اند). با کلیک بر روی نماد "X" در توکن ، می توان مقدار انتخابی را حذف کرد.

کاربر می تواند مقادیر را از لیست انتخاب همانطور که در تصویر زیر نشان داده شده است انتخاب کند. لیست انتخاب به طور خودکار وقتی کاربر در کنترل ورودی تایپ می شود یا بر روی فلش به پایین اختیاری کلیک می کند ، نمایش داده می شود. کاربر می تواند با انتخاب انتخابی از کشویی یا با تایپ مقدار در کنترل و سپس فشار دادن کلید Enter ، یک نشانه را وارد کند.

توکن ها با کلیک بر روی نماد "X" یا با قرار دادن مکان نما پس از توکن و استفاده از کلید backspace حذف می شوند.

گزینه های لیست انتخاب را می توان به صورت آماری به عنوان یک لیست ثابت از گزینه ها تعریف کرد یا با استفاده از یک عملکرد SQL یا XBasic به صورت پویا جمع شد.

چگونه می توان یک کنترل توکن چند انتخابی را به یک مؤلفه UX اضافه کرد

برای افزودن یک کنترل توکن چند انتخابی به یک مؤلفه UX ، [More را انتخاب کنید.] مورد در بخش کنترل داده های جعبه ابزار UX.

کنترل توکن چند منتخب یک کنترل داده است. این بدان معنی است که می توان از آن با روش های . getValue () و . setValue () استفاده کرد. هنگامی که مؤلفه UX ارسال می شود ، ارزش کنترل چند منظوره Token به عنوان لیست مقادیر محدود کاما ارسال می شود.

به عنوان مثال ، اگر سه نشانه با ارزش های "ایالات متحده" ، "انگلستان" و "کانادا" انتخاب شود ، ارزش ارائه شده "ایالات متحده ، انگلیس ، کانادا" است.

برای تنظیم مقدار در یک کنترل توکن چند منتخب ، مقادیر باید به عنوان یک آرایه مشخص شوند. مثلا:

تنظیم خصوصیات کنترل توکن چند منتخب

برای تنظیم ویژگی های کنترل توکن چند انتخاب ، روی دکمه Smart Field برای ویژگی Control Properties در برگه املاک کلیک کنید.

همانطور که در زیر آمده است ، پنجره پیکربندی Genie نمایش داده می شود:

روش تعریف گزینه ها

روش تعریف گزینه ها چگونگی به دست آوردن داده های انتخاب شده توسط کنترل را مشخص می کند. گزینه ها را می توان به عنوان یک لیست استاتیک از گزینه ها ، پرس و جو SQL یا یک عملکرد XBASIC مشخص کرد. پرس و جو SQL می تواند نام یک جدول در یک پایگاه داده یا یک عبارت SQL سفارشی (مانند تماس با یک روش ذخیره شده) باشد.

اگر از گزینه FieldSfromTable استفاده شود ، برای تعریف مقدار صفحه نمایش و مقدار ذخیره شده باید دو ستون از جدول انتخاب شود. ستون اول (ستون مقدار) مقدار را برای نشانه انتخاب شده تعریف می کند. ستون دوم (ستون نمایش) مقدار نشان داده شده در کنترل ورودی برای توکن است. یک ستون 3 اختیاری نیز می تواند انتخاب شود - ستون نمایش لیست. این ویژگی مقدار نمایشگر نشان داده شده در لیست انتخاب را تعریف می کند. در صورت مشخص شدن ستون نمایش لیست ، ویژگی نمایش هر انتخاب استفاده می شود.

پرس و جو برای یک عبارت SQL باید نتیجه ای را با 2 یا 3 ستون تنظیم کند. ستون اول باید دارای نام "مقدار" باشد ، ستون دوم باید دارای نام "نمایش" باشد و ستون 3 اختیاری باید دارای نام "ListDisplay" باشد. مثلا:

نماد را برای باز کردن لیست انتخاب نمایش دهید

هنگامی که کاربر شروع به تایپ کنترل می کند ، لیست انتخاب باز می شود و روی متنی که کاربر تایپ کرده است فیلتر می شود. این شبیه به نحوه عملکرد یک کنترل خودکار است. نماد نمایشگر برای باز کردن گزینه گزینه انتخاب کنترل می کند که آیا یک نماد برای باز کردن لیست انتخاب نشان داده شده است یا خیر. نماد را می توان در سمت چپ یا راست کنترل ورودی نمایش داد.

کاربر باید از گزینه ها انتخاب کند

در صورت عدم بررسی ، کاربر می تواند هر مقدار را در کنترل تایپ کند. هنگامی که کاربر فشار را وارد می کند ، متنی که کاربر تایپ کرده است به لیست توکن اضافه می شود. اگر این ویژگی بررسی شود ، اگر کاربر در یک مقدار تایپ کند و سپس وارد کنید Enter و متنی که کاربر تایپ کرده است در لیست انتخاب نیست (یعنی ویژگی ارزش یکی از گزینه های موجود در لیست نیست) ، یک نشانه جدیداضافه نشده است

نماد

نمادهای مورد استفاده برای نمایش لیست انتخاب و حذف یک نشانه قبلاً انتخاب شده می توانند با استفاده از ویژگی Icons سفارشی شوند. کنترل توکن چند منتخب فقط با استفاده از نمادهای SVG پشتیبانی می کند.

نوع CSS Token

از ویژگی Token CSS می توان برای سفارشی کردن ظاهر نشانه های انتخاب شده استفاده کرد. نوع CSS Token می تواند به صورت پیش فرض یا سفارشی تنظیم شود. در صورت انتخاب پیش فرض ، می توان با استفاده از خاصیت سبک مرزی Token Token Token Token Token ، Tokens را پیکربندی کرد. در تصاویر بالا ، سبک مرزی به صورت گرد قرار گرفته است.

در تغییر

هنگامی که مقدار در کنترل تغییر می کند ، می توان از رویداد OnChange برای اجرای کد JavaScript استفاده کرد. این رویداد هر بار که کاربر انتخابی را از لیست انتخاب انتخاب می کند تا یک نشانه جدید را انتخاب کند ، یا وقتی کاربر در مقدار یک توکن جدید تایپ می کند و فشار را وارد می کند. مقادیر به ترتیب آنها به کنترل اضافه می شوند.

متغیرهای زیر در رویداد OnChange موجود است:

یک اشاره گر به کنترل ViewBox که برای اجرای کنترل توکن انتخاب شده MUTLTI استفاده می شود.

آرایه ای که شامل تمام انتخاب های موجود در کنترل است. آخرین مقدار در لیست همیشه جدیدترین نشانه اضافه شده است.

رفیق

هنگامی که کاربر وارد مقداری می شود که در لیست گزینه ها قرار ندارد ، می توان از رویداد ValueNotInlist برای اجرای کد JavaScript استفاده کرد. این ویژگی فقط در صورتی نشان داده می شود که کاربر باید از گزینه های انتخابی انتخاب نشده باشد. اگر کاربر در مقداری که IN در لیست گزینه ها قرار ندارد ، نوع تعریف شده برای این رویداد را اجرا کند. از این رویداد می توان برای افزودن مقدار به یک پایگاه داده استفاده کرد.

متغیرهای زیر در رویداد ValueNotInlist موجود است:

مقداری که کاربر در کنترل تایپ کرده است.

یک اشاره گر به کنترل ViewBox که برای اجرای کنترل توکن انتخاب شده MUTLTI استفاده می شود.

به عنوان مثال ، کد زیر یک پاسخ به تماس AJAX به سرور می کند و از مقداری که در لیست به عنوان پارامتر "NewProduct" در لیست نیست ، عبور می کند. a5. ajax. buildurlparam () برای ایجاد پارامتر URL برای انتقال داده ها به پاسخ به تماس استفاده می شود:

عملکرد پاسخ به تماس AddNewProduct () کار اضافه کردن مقدار جدید به جدول محصولات و بازگشت JavaScript به مشتری را برای به روزرسانی کنترل توکن چند انتخابی انجام می دهد. در عملکرد پاسخ به تماس ، که در زیر نشان داده شده است ، از عملکرد SQL_INSERT () XBASIC برای اضافه کردن محصول جدید به جدول محصولات در پایگاه داده Northwind استفاده می شود:

اگر این محصول به طور موفقیت آمیز به جدول محصولات اضافه شود ، عملکرد پاسخ به تماس AddNewProducts () JavaScript را برمی گرداند تا عملکرد repopulateProducts را روی مشتری فراخوانی کند تا کنترل توکن چند منتخب را با مقدار جدید به روز کند.

عملکرد repopulateProducts () JavaScript در زیر نشان داده شده است:

مواد و روش ها

روشهای زیر برای کنترل توکن چند منتخب در دسترس است. برای فراخوانی این روشها ، ابتدا باید شیء JavaScript را برای کنترل دریافت کنید:

توضیحات روش getDisplayValue (مقدار)

متن نشان داده شده در کنترل توکن چند منتخب را برای مقدار مشخص شده برمی گرداند. این روش فقط زمانی مفید است که مقدار نشان داده شده در کنترل توکن چند انتخابی با مقدار ذخیره شده متفاوت باشد.

اگر مقدار در لیست گزینه ها یافت نشد ، GetDisplayValue مقدار منتقل شده به عملکرد را برمی گرداند.

داده های ذخیره شده برای مقدار مشخص شده را برمی گرداند. این روش فقط زمانی مفید است که مقدار نشان داده شده در کنترل توکن چند انتخابی با مقدار ذخیره شده متفاوت باشد.

اگر مقدار در لیست گزینه ها یافت نشد ، GetRealValue مقدار منتقل شده به عملکرد را برمی گرداند.

تمرکز خود را به کنترل توکن چند منتخب می بخشد و نقطه درج را پس از آخرین نشانه قرار می دهد.

مثالهایی که برای روشهای ایجاد شده با جمع آوری یک کنترل توکن چند انتخابی با داده های جدول محصولات Northwind نشان داده شده است.

انتخاب های پویا یا انتخاب مجدد در زمان اجرا

انتخاب در کنترل توکن چند انتخابی با استفاده از روش کنترل () کنترل () می تواند به صورت پویا جمع شود. به عنوان مثال ، جاوا اسکریپت زیر گزینه های کنترل توکن چند منتخب را با شناسه "MST1" جمع می کند:

شما می توانید از طرف . populatemultiselecttokenscontrol () برای استفاده مجدد از کنترل استفاده کنید:

تابع . populatemultiselecttokenscontrol () سه پارامتر را به خود اختصاص می دهد: نام کنترل توکن انتخابی برای به روزرسانی ، آرایه ای از مقادیر تنظیم شده و یک پارامتر سوم اختیاری که تعریف می کند که آیا نشانه های منتخب موجود باید نگه داشته شود یا خیر.

برجسته کردن متن

هنگامی که شما شروع به تایپ کردن در یک کنترل توکن های چند منتخب می کنید ، لیست انتخاب هایی که نمایش داده می شود ، که فیلتر شده است ، توسط متنی که تایپ کرده اید ، اکنون مسابقات را در لیست انتخاب با متنی که به صورت جسورانه تایپ کرده اید نشان می دهد.

به عنوان مثال ، در تصویر زیر ، کاربر "OU" را تایپ کرده است. لیست انتخاب تمام مواردی را که حاوی رشته "OU" هستند ، نشان می دهد. توجه کنید که در لیست انتخاب ، تمام موارد رشته "ou" برجسته شده است:

برای کنترل های توکن چند انتخابی ایجاد شده در آلفا در هر نقطه 4. 4. 5 یا قبل از آن ، کنترل باید ویرایش و مجدداً ذخیره شود تا برجسته متن را اضافه کند.

درج کنترل افزودنی

کنترل های افزودنی با استفاده از موارد بیشتر درج می شوند. گزینه در بخش کنترل داده های سازنده UX.

کنترلی را که می خواهید اضافه کنید انتخاب کنید و بر روی OK کلیک کنید.

علاوه بر کنترل هایی که با آلفا در هر نقطه حمل می شوند ، می توانید کنترل های افزودنی خود را نیز ایجاد کنید. برای کسب اطلاعات بیشتر به نحوه ایجاد کنترل های افزودنی مراجعه کنید.

فیلم های

اضافه کردن یک کنترل توکن چند انتخابی به یک مؤلفه UX

کنترل توکن های چند منتخب مانند برنامه Gmail هنگام ارسال نامه الکترونیکی به چندین گیرنده عمل می کند. می توانید مقادیر را در یک کنترل تایپ کنید ، یا از لیست انتخاب کشویی انتخاب کنید. هر انتخاب در کنترل به عنوان "نشانه" نشان داده شده است. توکن ها را می توان با ضربه زدن به کلید backspace در حالی که تمرکز در کنترل است ، یا با کلیک بر روی نماد "حذف" در نشانه ، از لیست انتخاب ها حذف شود.

یک مورد استفاده متداول برای کنترل توکن های چند منتخب ، تعریف معیارهای انتخاب برای کنترل لیست است. در این ویدیو نشان می دهیم که چگونه از یک کنترل توکن چند منتخب برای انتخاب لیستی از کشورها استفاده می شود. سپس کنترل لیست فیلتر می شود تا کشورهایی را که با نشانه های منتخب مطابقت دارند ، نشان دهد. به عنوان مثال ، اگر نشانه های "ایالات متحده" و "انگلستان" انتخاب شوند ، این لیست فیلتر می شود تا مشتریان را در "ایالات متحده" یا "انگلیس" نشان دهد