سورس کد فرم login با Asp.net MVC
سورس کد فرم ورود به سایت با Asp.net MVC
اسفند ۲, ۱۳۹۵
semantic Tags در html 5
تگ های معنایی یا semantic Tags در html5
اسفند ۱۰, ۱۳۹۵
ساخت باکس وب با منوی تب دار با bootstrap

ساخت باکس وب با منوی تب دار با bootstrap

ساخت باکس وب با منوی تب دار با bootstrap ، در این آموزش قصد داریم طراحی باکس وب با منوی تب دار (tab) با bootstrap و جاوا اسکریپت را به شما آموزش دهیم.

ساخت باکس وب با منوی تب دار با bootstrap :

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

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

برای ایجاد زبانه ها (tabs) میتوان از Bootstrap ، Jquery و CSS استفاده کرد که در این آموزش ما مثالی برای طراحی با بوت استرپ را برای شما خواهیم آورده ایم.

اگر پروژه شما خود به طور پیشفرض بوت استرپ را درون خود نداشت تنها کافی است این فریم ورک را از سایت بوت استرپ دانلود کنید و فولدر های درونش (CSS, JS, Img) را به محل ذخیره سازی پروژه کپی کنید سپس درون ویژوال استودیو قسمت solution برنامه گزینه show All files را انتخاب کرده

tab1

tab

سپس خواهید دید که فولدر هایی با رنگ سفید به سلوشن اضافه شدند

tab2

tab

حال کافی است برروی فولدر های بوت استرپی که اضافه کردید به پروژه کلیک راست کرده و گزینه Include in Project را کلیک کنید تا به سلوشن اضافه شوند.

حال یک فایل HTML ایجاد میکنیم برای کدنویسی Tabها .برای استفاده از بوت استرپ باید درون فایل HTML باید در تگhead  لینک های مربوطه را قرار دهیم.

در ادامه در تگ head یک کلاس نیز برای محتویات هر تب نیز در نظر میگیریم

این استایل کمک میکند که هنگام لود شدن صفحه هیچکدام از محتویات نمایش داده نشوند.

در نهایت کدهای درون تگ head به صورت زیر خواهد شد

حال کدنویسی های درون تگ body را شروع میکنیم که شامل عنوان زبانه ها و محتویاتشان که با کلیک برروی هرکدام نمایش داده خواهند شده

تمامی عنوان ها و وتنظیمات مربوط به زبانه هارا درون یک لیست <ul> قرار میدهیم توجه کنید که لیست دارای کلاس nav nav-tabs میباشد که این کلاس ها, کلاس های بوت استرپ میباشد پس خود زبانه هارا طراحی میکند.

.

توجه کنید که برای هرکدام از عناصر لیست کلاس tabTitle در نظر گرفته شده (این کلاس در استایل تعریف نشده و درواقع اصلا ایجاد نشده بلکه برای اشاره به زبانه ها از طریق دستورات جاوا اسکریپت میباشد)در ادامه در رویداد onCLick  آیتم های لیست اشاره به متد Tabs با دو پارامتر event و مقادیری که اشاره به محتویات میکنند, اشاره میکنند. نکته دیگر مقدار دهی href تگ هایa  درون لیست است که با javascript:void(0) مقدار دهی شده.

این مقدار درواقع به نقطه ای اشاره نمیکند مانند علامت #  اما با مقدار دهی href با این علامت , در آدرس بار این علامت را نشان داده میشود اما با javascript:void(0) در آدرس بار هیچ مقداری به آدرس کنونی اضافه نمیشود.

.

در ادامه مقادیری که میخواهیم با کلیک برروی زبانه هانمایش داده شود را تعریف میکنیم

در تعریف این مقادیر توجه کنید که ای دی مربوط به تگ های حاوی اطلاعات ,دقیقا برابر با مقادیر ارسالی به متد جاوا اسکریپت باشند.

در ادامه نیزدستورات جاوا اسکریپت را مینویسیم

دستورات جاوا اسکریپت زمانی که برروی یکی از زبانه ها کلیک شود اجرا میشوند که به ترتیب  با دو حلقهfor  تمامی tabContent هارا مخفی میکند سپس تمامی زبانه هارا نیز  غیر فعال میکند سپس content مربوط به زبانه کلیک شده را به صورت block نمایش میدهد همچنین کلاس active را به زبانه کلیک شده اضافه میکند.

در نهایت پروژه را اجرا کنید و نتیجه ای مشابه زیر ببینید

tab3

tab

پاسخ دهید

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