מערכת לשוניות לדפדוף בין תכנים באמצעות jQuery

מחבר:
בתאריך:

הסקריפט המצורף יוצר מערכת טאבים (לשוניות) באמצעות jQuery.

היכנסו כדי לראות את הסקריפט בפעולה:

להדגמה

ה-HTML

ה-HTML מורכב משלושה דיבים השייכים למחלקה article. כל דיב כזה מכיל את כל המידע הדרוש לבניית הלשוניות.

article_tab מכיל את הכיתוב שיופיע על גבי הלשונית.

tab_content מכיל את התוכן שמקושר עם כל אחת מהלשוניות, וזה כולל כותרת ופסקאות.


<!DOCTYPE html>
<html lang="he-IL">
<head>
<meta charset="utf-8">
</head>
<body dir="rtl">
<div id="wrapper">
  <div id="tabs"></div>
  <div id="tabs_content">
    <div class="article">
      <div class="article_tab">לשונית ראשונה</div>
      <div class="tab_content">
        <h2 class="article_title">כותרת 1</h2>
        <div class="article_content">
        תוכן ראשון...תוכן ראשון...תוכן
        </div>
      </div>
    </div>
    <div class="article">
      <div class="article_tab">לשונית שנייה</div>
      <div class="tab_content">
        <h2 class="article_title">כותרת 2</h2>
        <div class="article_content">
        תוכן שני...תוכן שני...תוכן
        </div>
      </div>
    </div>
    <div class="article">
      <div class="article_tab">לשונית שלישית</div>
      <div class="tab_content">
        <h2 class="article_title">כותרת 3</h2>
        <div class="article_content">
        תוכן שלישי...תוכן שלישי...תוכן
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>

הדיב tabs הוא ריק כרגע, וקוד ה-jQuery בהמשך יוסיף לו את הלשוניות.

 

ה-jQuery

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


<script>
(function($) {
  $(document).ready(function() {
    // אוסף את הכיתוב ללשוניות לתוך מערך
    var i    = 0;
    var tabs = new Array();

    $('.article').each(function(index, value) {
      var article = $(this);
    
      var tab     = $(this).children('.article_tab');
      tabs[i]     = tab;

      var content = $(this).children('.tab_content');
	
      // מסתיר את התכנים מלבד התוכן הראשון
      if(index > 0){
        content.hide();
      }
		
      i++;		
    });
	
        // בונה את הלשוניות
    var build = '';
    $.each(tabs, function(index, value) {
      build += '<a href="#" data-num="'+index+'">'+value.text()+'</a>';
    });
	
    var tabs_div = $('#tabs');
    tabs_div.html(build);
 	
    // מאזין ללשוניות, ומציג את התוכן לפי בחירת המשתמש
    tabs_div.on('click', 'a', function(event){
      event.preventDefault();
 			
      var link = $(this).css('border-bottom', '1px solid #fafbfd');
	
      link.siblings('a').css('border-bottom', '1px solid #babbbd');
		
      var num  = link.data('num') + 1;
		
      var current = $('#tabs_content .article:nth-child('+num+')');
			
      current.siblings('.article').find('.tab_content').hide();
		
      current.find('.tab_content').show();
    });
  });
})(jQuery);
</script>

 

ה-CSS


<style>
body{font-family: arial, sans-serif; color: #504e4f;}
.article_tab{display: none;}
#wrapper{width: 600px; margin: 10px auto; padding-top: 30px;}
#tabs{margin-bottom: 4px;}
#tabs a{color: #555555; background: #fafbfd;
font-weight: bold; text-decoration: none; border: 1px solid #babbbd;
border-radius: 5px 5px 0px 0px; -webkit-border-radius: 5px 5px 0px 0px; -moz-border-radius: 5px 5px 0px 0px;
padding: 5px 10px; z-index: 10;
}
#tabs a:nth-child(1){border-bottom: 1px solid #fafbfd;}
#tabs_content{margin-top: 0px; border: 1px solid #babbbd;}
.article{width: 550px; margin-right: auto; margin-left: auto;}
h2.article_title{padding-top: 25px; margin-top: 0; color: #3169a4;}
.article_content{padding-bottom: 30px;}

</style>

לכל מדריכי ה-jQuery

הוסף תגובה חדשה

 

= 6 + 4