آموزش ساخت تب افقی و عمودی HTML

0
آموزش ساخت تب افقی و عمودی

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

ساخت تب افقی

در کلیه بخش ها، ساختار تب هایی که میسازیم به سه بخش تقسیم میشود، بخش اول ساختار و کد HTML تب ها و بخش های بعدی، استایل های CSS و کد جاوااسکریپت تب ها هستند. ساختار HTML تب ها به شرح زیر خواهد بود :

در بالا ابتدا سه زبانه ایجاد کرده ایم و سپس محتوای دلخواه را جهت نمایش در آنها جایگذاری کرده ایم.

بخش بعدی که به آن احتیاج داریم، کد های CSS ماست که نحوه نمایش این زبانه ها را معین خواهد کرد :

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

در مرحله آخر، کد جاوااسکریپت مورد نیاز جهت تغییر، نمایش و مخفی سازی تب ها را اضافه میکنیم :

این سه بخش کد، به سادگی شما را به یک ساختار تب ساده و در عین حال کاربردی خواهد رساند. نمونه آماده این تب ها را میتوانید در فایل tabs.html که در پکیج فایل های تمرین در انتهای این مطلب درج شده مشاهده کنید.

ساخت تب های پدیدار شونده (Fade in)

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

نمونه نحوه نمایش محتوا به صورت پدیدار شونده را میتوانید در فایل tabs-fadein.html در فایل های نمونه پروژه در انتهای این مطلب مشاهده کنید.

انتخاب و نمایش یک زبانه به صورت پیشفرض

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

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

در این حالت تب مورد نظر را با id دلخواه مشخص کرده و سپس با استفاده از جاوااسکریپت، آن id را مورد هدف قرار گرفته و روی آن کلیک کرده ایم تا تب فعال شود. نمونه انتخاب تب پیشفرض را میتونید در فایل tabs-select-by-default.html که در فایل های آماده این آموزش در انتهای مطلب درج شده مشاهده نمایید.

اضافه کردن قابلیت بستن به تب ها

برای بستن محتوای تب ها نیز میتوانیم به سادگی از جاوااسکریپت استفاده کنیم :

در ادامه میتوانید در بخش استایل های CSS خود، نحوه نمایش دکمه ضربدر بستن و محل قرار گیری آن را نیز تعییر کنید. نمونه این نوع دکمه را میتوانید در فایل tabs-close-button.html ارائه شده در انتهای همین آموزش مشاهده کنید.

ساخت تب عمودی

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

ساختار اچ تی ام ال زبانه ها به شرح زیر خواهد بود :

مطابق بخش های قبل، برای ساختن هر تب از botton ها استفاده کرده ایم. به div ها کلاس tabcontent را اختصاص داده و بعد آنها را با استفاده از css و جاوااسکریپت مختفی مکنیم. وقتی کاربر روی یکی از دکمه ها کلیک کند، تب مربوط به آن دکمه باز خواهد شد.

مرحله بعدی اضافه کردن استایل های مورد نیاز است :

و در مرحله آخر کد جاوااسکریپت

نمونه این نوع تب را نیز میتوانید در فایل tabs-vertical.html ارائه شده در انتهای همین آموزش بیابید.

دسترسی آسان به این مطلب لینک کوتاه :
شاید از اینها هم خوشتان بیاید!
ارسال پاسخ

آدرس ایمیل شما منتشر نخواهد شد.