نحوه ساخت تب(سربرگ) برای نمایش آیتم ها

[emad_67]

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

این تب یا سربرگ ها خیلی ساده با با تگ های ul-li ساخته میشن. این کد html رو که از یک div تشکیل شده و درونش تگ های ul-li هستند در نظر بگیرید:

<div>

    <ul>

    <li><a href="#">محبوب ترين مطلب</a></li>

    <li><a href="#">آخرين مطالب</a></li>

    <li><a href="#">افراد آنلاين</a></li>

    <li><a href="#">وضعيت اعضاء</a></li>

    </ul>

</div>

ما میخوایم با css کاری کنیم که هر تگ li بشه یه تب. برای شروع کار کد های زیر رو در فایل css خودتون قرار بدین:

#TabContainer

{

    margin: 30px 250px;

    padding: 0;

}

#TabContainer .tab

{

    list-style: none;

    border: 1px solid #000000;

    margin: 0;

    padding: 0;

}

#TabContainer .tab li

{

    float: right;

    margin-left: 5px;

}

در کد های بالا شناسه TabContainer برای نگهداری tab ها در نظر گرفته شده و کلاس tab نیز به تگ ul نسبت داده شده که گزینه های اون واضحه.
برای اینکه هر تگ li به صورت یک تب در بیاد لازم هست که li ها کنار هم قرار بگیرن پس گزینه float:right رو براشون در نظر میگیریم تا به حالت شناور در بین و در سمت راست ul قرار بگیرن. margin-left هم برای ایجاد فاصله بین تب ها در نظر گرفته شده. خوب تا اینجا کارمون به این شکل شده:

اولین اشکالی که به چشم میاد اینه که با float کردن li ها ارتفاع ul صفر شده و مثل یک border بالای li ها قرار گرفته. برای اینکه این حاشیه به پایین li ها بیاد باید padding-bottom به ul بدیم با اینکار ul مثل یه کادر دور تب ها رو میگیره. با توجه به اینکه ما فقط به حاشیه پایینی نیاز داریم پس border رو به border-bottom تغییر بدید.
این رو هم عرض کنم خدمتتون که padding-bottom رو طوری در تگ ul مقدار دهی کنید که دقیقا حاشیه تگ ul روی حاشیه پایینی li ها قرار بگیره. توی این مثال من 21 پیکسل براش در نظر گرفتم. بنابراین کلاس tab رو به این شکل ویرایش کنید:

#TabContainer .tab

{

    list-style: none;

    border-bottom: 1px solid #000000;

    margin:  0;

    padding: 0 50px 21px 0;

}

حالا میریم سراغ تعیین استایل برای تگ های a که درون li هستند:

#TabContainer li a:link,#TabContainer li a:visited

{

    display: block;

    font-family: tahoma;

    font-size: .75em;

    background-color: #fcd9af;

    color: #800000;

    border: 1px solid #000;

    padding: 3px;

    text-decoration: none;

}

#TabContainer li a:hover

{

    background-color: #ff9797;

}

فکر نمیکنم در کد های بالا چیزی نا مفهوم باشه. فقط اینو بگم که جهت اینکه تگ a به صورت جعبه ای در بیاد خاصیت display اونو برابر block قرار دادم. با این کار تگ a تمام فضای درون li رو میپوشونه و وقتی که موس رو در هر جای li قرار بگیره. علامت دست ظاهر میشه. البته شاید تو این مثال چون اندازه تب ها کوچیکه زیاد این مورد حس نشه. بعد از اون هم کلاس کاذب hover رو برای تغییر رنگ زمینه تگ a هنگام رفتن موس روی اون استایل دهی کردم.
تا اینجا کارمون به این شکل شده که تقریبا تب ها آماده شدن:

برای ساخت قسمتی که آیتم های هر تب درون اون قرار بگیره فقط کافیه از یه div استفاده کنیم. در ابتدای کار تب ها رو درون یه div با آی دی TabContainer قرار دادیم. بنابراین الان تب های ما دقیقا در بین این div مهار شده هستند. پس خیلی راحت با اضافه کردن یک div دیگه به عنوان محل قرار گیری آیتم ها و دادن border به اون می تونیم یه چهارچوب برای تب ها درست کنیم. این کد html ما تا الان به همراه این قسمت به این شکل هست:

<div id="TabContainer">

    <ul class="tab">

        <li><a href="#">محبوب ترين مطلب</a></li>

        <li><a href="#">آخرين مطالب</a></li>

        <li><a href="#">افراد آنلاين</a></li>

        <li><a href="#">وضعيت اعضاء</a></li>

    </ul>

    <div class="ContentArea">

        <p>test</p>

        <p>test</p>

        <p>test</p>

        <p>test</p>

    </div>

</div>

و این هم کد css این div:

#TabContainer .ContentArea

{

    border: 1px solid #000;

    border-top: none;

    padding: 3px;

}

توجه کنید که border-top رو در کلاس ContentArea حذف میکنیم و به جای اون border-bottom تگ ul جایگزین میشه.
تا اینجا کار ساخت تب ها تمومه. حالا باید قسمتی رو اضافه کنیم که کاربر با کلیک روی یک تب، اون تب به حالت فعال در بیاد و فقط آیتم های همون تب نشون داده بشه.

برای فعال شدن هر تب باید از جاوا اسکریپت استفاده کنیم به طوری که با کلیک روی هر تب تابعی فراخوانی بشه و استایل اون تب رو تغییر بده همچنین آیتم های مربوط به تمام تب ها رو در همون تگ div که کلاس ContentArea رو داره، قرار میدیم و با جاوااسکریپت خاصیت display اونا رو جوری تغییر میدیم که موقع کلیک روی هر تب فقط آیتم های اون تب نشون داده بشن. به این ترتیب برای هر کدوم از تگ های a یک آی دی در نظر میگیریم و به رویداد onclick هر یک نیز نام تابع جاوا اسکریپت مورد نظر رو اختصاص میدیم.

    <li><a href="#" id="MostVisited" class="active" onclick="tabselect(id);">محبوب ترین مطالب</a></li>

<li><a href="#" id="LastContent" onclick="tabselect(id);">آخرین مطالب</a></li>

<li><a href="#" id="OnlineUsers" onclick="tabselect(id);">افراد آنلاین</a></li>

<li><a href="#" id="UsersStatus" onclick="tabselect(id);">وضعیت اعضاء</a></li>

همچنین به div نگهدارنده آیتم ها هم چند تگ div دیگه که هرکدوم مربوط به یک تب هستند رو به عنوان آیتم هایی که باید درون هر تب نمایش داده بشن، اضافه کردم:

<div class="ContentArea">

    <div id="MostVisited_content">

        most visited

    </div>

    <div id="LastContent_content">

        last content

    </div>

    <div id="OnlineUsers_content">

        online user

    </div>

    <div id="UsersStatus_content">

        user status

    </div>

</div>

با توجه به اینکه باید تب فعال ما دارای استایل متفاوتی نسبت به تب های دیگه داشته باشه من یک کلاس css با نام active رو برای تب های فعال در نظر گرفتم:

#TabContainer .tab a.active , #TabContainer .tab a.active:hover

{

    background-color: #ffffff;

    border-bottom: 1px solid #ffffff;

}

توی این کلاس فقط لازمه رنگ زمینه اون تب و حاشیه پایینی اون رو همرنگ با رنگ زمینه آیتم ها کنیم. در کد های html ئی که بالاتر قرار دادم به اولین تب این کلاس رو نسبت دادم. همچنین چون قبلا برای کلاس hover استایل تعیین کرده بودیم، باید اونو نیز override کنیم تا با رفتن موس روی اون رنگ زمینه تب عوض نشه. بنابراین الان چنین شکلی رو داریم:

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

var activeId = "MostVisited";

function tabselect(id)

{   

    document.getElementById(activeId).className="";

    document.getElementById(id).className="active";

    document.getElementById(id).blur();

    

    document.getElementById(activeId + "_content").style.display="none";

    document.getElementById(id + "_content").style.display="";

    activeId = id;

}

با کلیک بر روی یک تب، آی دی اون تب به این تابع پاس داده میشه و طبق اون آی دی، خاصیت display و className آیتم ها و تگ های a تعیین میشه.
یکه نکته کوچکی باقی میمونه و اونم اینکه وقتی صفحه لود میشه به دلیل اینکه این تابع جاوا اسکریپت فراخوانی نشده همه آیتم های تب ها با هم دیگه نشون داده میشن. برای رفع این مورد به div تک تک آیتم ها به غیر از آیتم اول style="display: none;" اضافه میکنیم که در زمان لود صفحه نشون داده نشن:

<div class="ContentArea">

    <div id="MostVisited_content">

        most visited

    </div>

    <div id="LastContent_content" style="display: none;">

        last content

    </div>

    <div id="OnlineUsers_content" style="display: none;">

        online user

    </div>

    <div id="UsersStatus_content" style="display: none;">

        user status

    </div>

</div>

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

موفق باشید.

[saeidejafari]

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

[emad_67]

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

خواهش میکنم

[Exception]

یه سوال: دلیل خاصی داشت که هدرها رو تو تگ a گذاشتی؟

[emad_67]

جالب تر میشه یه تایم بدی بعد از اینکه مثلا به غیر از اولی رو انتخاب کرد دوباره بیاد روی اولی!

ایده بدی نیست، ولی در کل اینا دیگه به سلیقه هر فردی بر میگرده و فقط هدف من آموزش ساختش بود ;)

یه سوال: دلیل خاصی داشت که هدرها رو تو تگ a گذاشتی؟

خوب برای اینکه برای کلاس hover هم بتونم یه جلوه ای رو در نظر بگیرم از تگ a استفاده کردم. البته میشد a رو در نظر نگرفت و hover رو برای li نوشت:

li:hover

{

..

}

ولی توی IE پشتیبانی نمیشه و IE کلاس hover رو برای تگ a فقط میشناسه. البته با ابزاری میشه hover رو هم به ie شناسوند ولی توی این مثال قصد استفاده از اونو نداشتم و برای همین تگ a رو براش در نظر گرفتم.
موفق باشید.

[yaqubian]

دوست عزیز emad_67
خیلی لطف کردید اما تمام مواردی که گفتید با نصب یه نرم افزار کوچولو مثل tab designer قابل انجامه!
نوع تب رو انتخاب می کنید و خودش خروجی css رو بهتون می ده!
موفق باشید

[eAmin]

دوست عزیز emad_67
خیلی لطف کردید اما تمام مواردی که گفتید با نصب یه نرم افزار کوچولو مثل tab designer قابل انجامه!
نوع تب رو انتخاب می کنید و خودش خروجی css رو بهتون می ده!
موفق باشید

سلام.

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

[emad_67]

دوست عزیز emad_67
خیلی لطف کردید اما تمام مواردی که گفتید با نصب یه نرم افزار کوچولو مثل tab designer قابل انجامه!
نوع تب رو انتخاب می کنید و خودش خروجی css رو بهتون می ده!
موفق باشید

درسته، ولی به شخصه زیاد علاقه ای به این نرم افزار ها ندارم و ترجیح میدم خودم همه چیزو بسازم هر چند ممکنه وقت بیشتری صرف بشه.( البته ممکنه یه نفر دیگه وقت براش بیشتر مهم باشه). توی این تاپیک هم قصد داشتم نحوه ساخت رو از ابتدا بگم(حالا خوب یا بدش بماند) چون به نظرم تاثیر بیشتری داره نسبت به اینکه من بیام و یه نرم افزار معرفی کنم یا اینکه کد html و css اونو ضمیمه کنم و بگم اینم یه نمونه تب.
موفق باشید ;)

[hamid1081]

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

[gheysar14]

آقا من از این نرم افزار Tab designer خوشم اومده (یعنی یه خورده تنبلم ) فقط اینکه فارسی تو تب ها نمایش داده نمیشه! دوستان راه حلی برای این کار دارند؟؟؟؟

[saeed25]

دروود
آن کدهایی که برای فایلCSS نوشتید تا کاربرگها دربالای صفحه قرار بگیرندبرای من کارنمی کند،باوجودی که همه شان را به درستی وارد کرده ام!

[emad_67]

شما فایلت رو زمینه کن تا چک کنم.

[emad_67]

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

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

بهتر یه ورژن جدید ازش بدی و توی یک متغیر مقدار اولین تب رو بزاری و هر وقت روی هر تبی که کلیک میشه آیدی جدیده رو بریزی توی متغییر.

اینجوری با دو خط تموم میشه :D

راست میگی، قبلا چه خنگی بودم

[emad_67]

نسخه جدید با اندکی تغییرات در تابع جاوا اسکریپت:
تابع رو به این شکل تغییر دادم:

var activeId = "MostVisited";

function tabselect(id)

{   

    document.getElementById(activeId).className="";

    document.getElementById(id).className="active";

    document.getElementById(id).blur();

    

    document.getElementById(activeId + "_content").style.display="none";

    document.getElementById(id + "_content").style.display="";

    activeId = id;

}

یک متغیر پیش فرض به نام activeId در نظر گرفته شده که id هر تب فعال در اون قرار میگیره. در زمانی که تب دیگه ای کلیک بشه توسط این متغیر، کلاس active از تب فعال قبلی برداشته و به تب جدید اختصاص داده میشه. همچنین قسمت مربوط به نمایش آیتم های هر تب بر اساس همین آی دی show/hide میشن.
با تشکر از جناب tarhebartar.

[hakowsari]

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

[snowynight]

سلام دوستان من میخوام این رو به پروژه م اضافه کنم ولی li ها رو همچنان به tab تبدیل نکرده!!!!

لطفا راهنماییم کنید، ممنون از شما

[هانیه دره باغی]

دوست عزیز emad_67
خیلی لطف کردید اما تمام مواردی که گفتید با نصب یه نرم افزار کوچولو مثل tab designer قابل انجامه!
نوع تب رو انتخاب می کنید و خودش خروجی css رو بهتون می ده!
موفق باشید

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

[hedye89]

نسخه جدید با اندکی تغییرات در تابع جاوا اسکریپت:
تابع رو به این شکل تغییر دادم:

var activeId = "MostVisited";

function tabselect(id)

{   

    document.getElementById(activeId).className="";

    document.getElementById(id).className="active";

    document.getElementById(id).blur();

    

    document.getElementById(activeId + "_content").style.display="none";

    document.getElementById(id + "_content").style.display="";

    activeId = id;

}

یک متغیر پیش فرض به نام activeId در نظر گرفته شده که id هر تب فعال در اون قرار میگیره. در زمانی که تب دیگه ای کلیک بشه توسط این متغیر، کلاس active از تب فعال قبلی برداشته و به تب جدید اختصاص داده میشه. همچنین قسمت مربوط به نمایش آیتم های هر تب بر اساس همین آی دی show/hide میشن.
با تشکر از جناب tarhebartar.

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

[emad_67]

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

کار خاصی نمی خواد دوست عزیز، شما فقط کافیه خصوصیت width رو به #TabContainer اضافه کنید تا در موقع کوچک شدن صفحه تب ها بهم نریزه. مثلا width: 500px;

[HABIB_TANHA]

من هم از اين تکه برنامه استفاده کردم - تبها درست کار مي کنن ولي وقتي تب ديگه اي رو (غير از تب پيش فرض) فعال مي کنم و داخل اين تب روي يک button کليک مي کنم اين تب غير فعال ميشه و دوباره تب پيش فرض فعال ميشه ! اميدوارم منظورم رو خوب رسونده باشم.

[askar333]

ســــــــــــــلام

منظور از (برای شروع کار کد های زیر رو در فایل css خودتون قرار بدین:)چیــــــــــــــــــ ـــــست.

با تشکر

[mahsa.n]

سلام

من در هر تب یه دکمه قرار دادم که هر وقت کلیک میشه صفحه postback میشه و به بانک وصل میشه و ....

چون صفحه postback میشه دوباره تب اول نمایش داده میشه

چه طور میشه تنظیم کرد که مثلا اگه دکمه موجود در تب دوم کلیک شد بعد از postback شدن صفحه ، تب دوم باز باشه؟

[mahsa.n]

کسی نیست جواب بده؟

[nimja145]

»منون
این کد قرار دادید فکر کنم یک مشکل کوچیک داره.
وقتی تب ها عوض میشه دوباره به بالای صفحه میپره. و دوباره باید صفحه نمایش رو پایین بیاریم.

[h00manb]

سلام
من دستی به کد های این تب ساز زدم و بعضی اشکالهاش را برطرف کردم.
امیدوارم مفید باشه

[Sirwan Afifi]

سلام دوستان کسی می دونه این Tab Menu رو چه جوری میشه با cSS ساخت.
ضمیمه 75927

[hjran abdpor]

با سلام.
دوست عزیز اینها را با Jquery میسازند. سرچ کنید پیذا میکنید.

[Sirwan Afifi]

میخوام دقیقا این تب باشه.

[rahas2]

سلام دوستان من میخوام قبل از اینکه نمودارمو چاپ کنم برای کاغذ سر برگ بزارم که تاریخ و نام شرکتو نشان بدهد برای چاپ نمودارم از
chart.printing.print(true);
استفاده کردم کسی میتونه کمکم کنه؟

[aminghaderi]

اون سربرگ با این سربرگ فرق می کنه ، یه تاپیک جدید بزنید تا بشه منسجم بروی موضوع بحث کرد.

[zahra_d84]

واقعا عالی بود
دست شما درد نکنه.

[elahe_sd]

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