آیا می دانید با دوره های آموزشی سون لرن می توانید از 0 تا 100 طراحی وب را در منزل فراگیرید!

تعدادی تگ HTML5 که ممکنه بلد نباشید (جلسه 4) : تگ optgroup

0 255 ۲۸ دی ۹۵

در این جلسه با ادامه تعدادی تگ HTML5 که ممکنه بلد نباشید در خدمتتون هستیم.html5 tags

مدیریت Option ها با تگ optgroup

این تگ یکی از تگهای قدیمی هست ولی با این حال خیلی از کاربران در مورد اون چیزی نمیدونن و یا اگر در مورد اون چیزی میدونن، به اون مسلط نیستن.

تگ optgroup درون المنت select مورد استفاده قرار میگیره و وظیفه اون اینه که option های درون select رو دسته بندی و مدیریت کنند. فرض کنید که شما یک select دارید که 1000 option درون اون قرار داده شده. شما میتونین با استفاده از تگ optgroup اون option ها رو دسته بندی کنید و با اینکار نحوه دسترسی به اونا رو برای کاربران خودتون راحتتر کنید.

تگ optgroup حتما باید درون المنت select قرار بگیره و دو ویژگی بصورت زیر رو قبول میکنه:

  • ویژگی label: با استفاده از این ویژگی میتونین عنوانی برای هر دسته بندی قرار بدین و این عناوین زمانی که dropdown رو باز میکنید، نمایش داده میشه
  • ویژگی disabled: اگر این ویژگی رو برای تگ optgroup قرار بدین، باعث میشه که نتونیم هیچ کدام از option های درون اون رو انتخاب کنیم و همه اونا غیرفعال میشن

تگ optgroup نه قابل انتخاب توسط CSS هست و نه میشه به اون استایل داد و ظاهرش رو تغییر داد. (اگر راهی هم باشه برای همه مرورگرها قابل اجرا نیست)

مثال عملی و کاربردی:

المنت optgroup در هر شرایطی خیلی خوب با تگ select کار میکنه و با هم خوب کار میکنن. برای مثال یک سایت تجاری رو در نظر بگیرید که در اون لیست قیمت های کامپیوترها درون Dropdown قرار داده شده. کد زیر رو در نظر بگیرید:

خروجی بصورت دموی زیر خواهد بود:

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

شما میتونین با disabled کردن یکی از optgroup ها، همه option های درون اون رو غیرفعال کنید و با اینکار نمیشه هیچ کدوم از اونا رو انتخاب کنید.

کد زیر رو در نظر بگیرید:

دموی خروجی بصورت زیر هست:

همونطور که دیدید یکی از دسته های مربوط به این select غیرفعال هست و نمیتونین اون رو انتخاب کنید. بهمین راحتی.

در جلسات بعدی با ادامه نکات در خدمتتون هستیم.

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

موفق و پیروز باشید.

یا علی

Source

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها اولین دیدگاه این مطلب را ارسال کنید.

ارسال دیدگاه

ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

:: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
عضویت/ ورود سریع با :
در حال اتصال ...

ورود به سایت

ورود سریع با :
در حال اتصال ...

جستجو در سون لرن

عبارت :
7LearnTelegram