rezadana
شنبه 03 خرداد 1393, 02:58 صبح
سلام. آموزش زیر رو میتونی دنبال کنی.
دمو تب هایی که میخوایم درست کنیم در لینک زیر.
http://www.7learn.com/js/tabber/themes.html
برای ساخت این جور tabber menu یا tabber box به ترتیب این سه مرحله زیر رو طی کنید که بسیار ساده اند و واضح توضیح داده شده چیکار کنید :
گام اول) افزودن فایل کتابخانه جاوااسکریپت tabcontent
:: برای ساخت این منوی تب دار از کتابخانه جاوااسکریپت tabcontent استفاده می کنیم که من اون رو به اضافه ی 6 تا تم براتون آپلود کردم و می تونید از آدرس فایل های آپلود شده در 7learn برای لود کردن اونها استفاده کنید .
در مرحله اول شما باید این دو خط رو به header صفحه html خودتون (درون تگ head) اضافه کنید .
<script src="http://7learn.com/js/tabber/tc.js" type="text/javascript"></script>
<link href="http://7learn.com/js/tabber/template1/tabcontent.css"
rel="stylesheet" type="text/css" />
:: خط اول خود library رو لود میکنه و در خط دوم هم استایل و تم منوی تب دار رو تعیین می کنید . 6 تا تم برای این منو آماده شده که شما می تونید در خط دوم با تغییر template1 به template3 , template2 .... و template6 تم منو رو عوض کنید .
:: در اینجا می تونید ظاهر هر 6 تم رو ببینید .
گام دوم) افزودن تب ها
:: بعد از اینکه کتابخانه و تم دلخواه گفته شده در گام 1 رو لود کردید و دو خط بالا رو در صفحه وبتون قرار دادید نوبت اینه که تب ها رو اضافه کنید . برای این منظور باید در قالبی شبیه کد زیر تب هاتون رو اضافه کنید .
<ul class="tabs">
<li><a href="#view1" rel="view1">Tab1</a></li>
<li><a href="#view2" rel="view2">Tab2</a></li>
<li><a href="#view3" rel="view3">Tab3</a></li>
</ul>
:: توجه کنید که حتما باید برای ویژگی class تگ ul که لیست تب ها هست ، مقدار tabs رو قرار بدید. (خط 1)
:: هر کدوم از تگهای li یک تب رو نشون میده . دقت کنید که برای هر کدوم از لینک های درون این تب ها ویژگی rel مشخص شده . از مقدار این ویژگی برای تعیین محتوایی که باید با کلیک روی تب نمایش داده بشه استفاده میشه . مثلا برای تب دوم ویژگی rel مقدار view2 رو داره . در گام بعدی می بینید که محتوای این تب باید ویژگی id داشته باشه با همین مقدار view2 .
گام سوم) افزودن محتوای نمایش هر تب
:: خوب ، بعد از اینکه تب ها رو به صفحه وب اضافه کردید ، باید محتوای تب ها رو اضافه کنید . این محتوا رو هم در قالب و فرمت زیر اضافه میکنید :
<div class="tabcontents">
<div id="view1" class="tabcontent">
Content Of Tab1 ...
</div>
<div id="view2" class="tabcontent">
Content Of Tab2 ...
</div>
<div id="view3" class="tabcontent">
Content Of Tab3 ...
</div>
</div>
:: نکته اول اینکه مقدار ویژگی class تگ div که همه محتوا ها رو در برداره باید tabcontents باشه (خط 1 کد فوق) .
:: نکته دوم هم اینکه مقدار ویژگی class برای هر محتوا که یک تگ div هست باید tabcontent باشه . (خط های 2 و 5 و 8 در کد فوق)
:: مهمتر از همه اینکه مقدار ویژگی id هر محتوا باید با مقدار ویژگی rel تب مربوط به خودش (که در گام دوم کدش رو آوردیم) برابر باشه . (خط های 2 و 5 و 8 در کد فوق رو با خط های 2 ، 3 و 4 در کد گام دوم مقایسه و یکسان بودن id محتوا و rel تب مربوط به خودش رو مشاهده کنید)
در نهایت شما باید یک صفحه وب با کدی شبیه زیر داشته باشید :
<html>
<head>
<script src="http://7learn.com/js/tabber/tc.js" type="text/javascript"></script>
<link href="http://7learn.com/js/tabber/template1/tabcontent.css"
rel="stylesheet" type="text/css" />
</head>
<body>
<ul class="tabs">
<li><a href="#view1" rel="view1">Tab1</a></li>
<li><a href="#view2" rel="view2">Tab2</a></li>
<li><a href="#view3" rel="view3">Tab3</a></li>
</ul>
<div class="tabcontents">
<div id="view1" class="tabcontent">
Content Of Tab1 ...
</div>
<div id="view2" class="tabcontent">
Content Of Tab2 ...
</div>
<div id="view3" class="tabcontent">
Content Of Tab3 ...
</div>
</div>
</body>
</html>
(!) نکات مهم در استفاده از این کتابخانه
:: شما به راحتی می تونید برای هر کدوم از تب ها و یا محتوای تب ها استایل های css تعریف کنید و ظاهر منو رو به شکل دلخواه تغیر بدید .
:: اگر بخواید بیش از یک منو و باکس تب دار در یک صفحه داشته باشید حتما دقت کنید که rel و id های استفاده شده در یک منو با بقیه تداخل اسمی نداشته باشه و باید اسامی مختلفی استفاده کنید .
:: اگر می خواید این کتابخانه رو در هاست شخصی داشته باشید می تونید اونو از اینجا دانلود کنید .
---------------------------------
www.rezalynda.rzb.ir (http://www.rezalynda.rzb.ir)