טאבים ב jQuery

[CSS]

טאבים ב jQuery.
למי שלא יודע מה זה טאבים, שיכנס לפרופיל שלו ויראה אצלו "הודעות הגולשים, אודותיי, חברים ..", אז זה טאבים, סוג של תפריט מהיר.
במדריך הזה נלמד איך לעשות טאבים כאלה עם אנימציה נחמדה.

נתחיל ב HTML.
תחילה ניצור תפריט עם UL, עם class="pages" , ובתוכו נכניס לכל עמוד LI חדש.
לדוגמא אם אנחנו רוצים שיהיו לנו 3 עמודים, אז ניצור את זה ככה:

<ul class="pages">
<li>page 1</li>
<li>page 2</li>
<li>page 3</li>
</ul>

התוצאה שלנו כרגע היא כזאת:

עכשיו ניצור דיב עם class="tabs", שבתוכו כל טאב יהיה בדיב.
כלומר הדיב שבתוך ה tabs צריך להיות באותו סדר שה li בתוך pages.
אז ניצור גם הפעם 3 דיבים.

<div class="tabs">
<div>bla bla 1<BR>bla bla 1<BR>bla bla 1<BR>bla bla 1<BR>bla bla 1<BR>bla bla 1<BR></div>
<div>bla bla 2<BR>bla bla 2<BR>bla bla 2<BR>bla bla 2<BR>bla bla 2<BR>bla bla 2<BR></div>
<div>bla bla 3<BR>bla bla 3<BR>bla bla 3<BR>bla bla 3<BR>bla bla 3<BR>bla bla 3<BR></div>
</div>

התוצאה עד עכשיו היא כזאת:


הקוד המלא של ה HTML:

<ul class="pages">
<li>page 1</li>
<li>page 2</li>
<li>page 3</li>
</ul>

<div class="tabs">
<div>bla bla 1<BR>bla bla 1<BR>bla bla 1<BR>bla bla 1<BR>bla bla 1<BR>bla bla 1<BR></div>
<div>bla bla 2<BR>bla bla 2<BR>bla bla 2<BR>bla bla 2<BR>bla bla 2<BR>bla bla 2<BR></div>
<div>bla bla 3<BR>bla bla 3<BR>bla bla 3<BR>bla bla 3<BR>bla bla 3<BR>bla bla 3<BR></div>
</div>

נעבור ל CSS.
בקובץ ה CSS אנחנו צריכים לעצב את הטאבים שלנו.
נתחיל בעיצוב העמודים, בכך שנעשה שכל העמודים יהיו באותה שורה, ושהם יהיו באמצע ושיהיה להם רקע.

.pages {list-style:none; padding:0; margin:0; text-align:center;}
.pages li {display:inline; background:lightgray; padding:2px 10px; cursor:pointer;}

איך שזה אמור להיראות עד עכשיו:

עכשיו נעצב את הטאבים ככה שיהיה להם מסגרת אפורה, ושהם יהיו ממורכזים.

.tabs {border:1px solid gray; margin:auto; width:750px; padding:5px; margin-top:2px;}

עכשיו נצטרך לעשות ככה שרק הטאב הראשון יופיע, ושכל השאר יהיו מוחבאים - מזכיר את מה שעכשיו בגלריה.
נוסיף את השורה הזאת כדי לבצע זאת:

.tabs div {display:none;}
.tabs div:first-child {display:block;}

עכשיו הטאבים צריכים להיראות כך:


זהו, סיימנו את החלק של העיצוב.
קוד ה CSS המלא שעשינו בחלק הזה:

.pages {list-style:none; padding:0; margin:0; text-align:center;}
.pages li {display:inline; background:lightgray; padding:2px 10px; cursor:pointer;}
.tabs {border:1px solid gray; margin:auto; width:750px; padding:5px; margin-top:2px;}
.tabs div {display:none;}
.tabs div:first-child {display:block;}

עכשיו נשאר רק החלק של ה jQuery - החלק שגורם לזה לעבוד.
אוקי, אז עכשיו נתחיל עם החלק של ה jQuery.
מה שבעצם אמור לקרות זה שבמידה ואנחנו נלחץ על אחד הכפתורים, אז הטאב שהמיקום שלו הוא כמו המיקום של העמוד יופיע.
איך עושים את זה? פשוט מאוד.
נוסיף אירוע לחיצה על אחד הכפתורים.

$(".pages li").click(function() {

});

בתוך האירוע נוסיף שורה אשר תכניס למשתנה npage את המספר של הכפתור שנלחץ עליו.

var npage = $(this).index();

נעלים את כל הטאבים ע"י אנימציה:

$(".tabs div").slideUp(300);

עכשיו ניגש לטאב שנמצא במקום של הכפתור, נחכה 0.3 שניות, ואז נגרום לו להופיע.

$(".tabs div").eq(npage).delay(300).slideDown(200);

זהו, סיימנו את הטאבים!
למי שלא הצליח, הינה הקוד המלא של הטאבים:

<style type="text/css">
body {font-family:arial;}
.pages {list-style:none; padding:0; margin:0; text-align:center;}
.pages li {display:inline; background:lightgray; padding:2px 10px; cursor:pointer;}
.tabs {border:1px solid gray; margin:auto; width:750px; padding:5px; margin-top:2px;}
.tabs div {display:none;}
.tabs div:first-child {display:block;}
</style>

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {

$(".pages li").click(function() {
var npage = $(this).index();
$(".tabs div").slideUp(300);
$(".tabs div").eq(npage).delay(300).slideDown(200);
});

});
</script>

<ul class="pages">
<li>page 1</li>
<li>page 2</li>
<li>page 3</li>
</ul>

<div class="tabs">
<div>bla bla 1<BR>bla bla 1<BR>bla bla 1<BR>bla bla 1<BR>bla bla 1<BR>bla bla 1<BR></div>
<div>bla bla 2<BR>bla bla 2<BR>bla bla 2<BR>bla bla 2<BR>bla bla 2<BR>bla bla 2<BR></div>
<div>bla bla 3<BR>bla bla 3<BR>bla bla 3<BR>bla bla 3<BR>bla bla 3<BR>bla bla 3<BR></div>
</div>

כל שאלה, הערה, בקשה תתקבל בברכה.

[-Smoxer-]

מדריך מצויין, תודה רבה!