آموزش کار با پلاگین Tab در بوت استرپ برای ایجاد تب بندی در صفحه

پلاگین Tab

پلاگین های بوت استرپ

Tab ها در بخش مؤلفه های ناوبری بوت استرپ معرفی شده اند. با ترکیب چند ویژگی داده ، ما به راحتی می توانیم یک رابط کاربری با تب ایجاد کنیم. با استفاده از این پلاگین ، ما می توانیم از میان pane های محتوای محلی در تب ها یا pill ها ، حتی از میان منوهای کشویی گذر کنیم.

اگر بخواهیم که این پلاگین را به صورت جداگانه وارد کنیم ، در این صورت به فایل tab.js نیاز خواهیم داشت. در غیر این صورت ،  همان طور که در مقاله "مروری بر پلاگین های بوت استرپ" ذکر شد ، می توانیم از یکی از فایل های bootstrap.js یا bootstrap min.js.min.js استفاده نماییم.

نحوه کاربرد

ما می توانیم به دو روش تب ها را فعال نماییم :

• از طریق ویژگی های داده : در این روش نیاز داریم که "data-toggle=”tab یا "data-toggle=”pill را به anchor ها اضافه کنیم.

اضافه کردن کلاس های nav و nav-tabs به تب ul ، استایل تب Bootstrap را اعمال خواهد کرد ، در حالی که افزودن کلاس های nav و nav-pills ، استیل pill را اعمال خواهد نمود.

<ul class = "nav nav-tabs">
   <li><a href = "#identifier" data-toggle = "tab">Home</a></li>
   ...
</ul>

• از طریق جاوا اسکریپت : ما می توانیم تب ها را از طریق جاوا اسکریت فعال نماییم :

$('#myTab a').click(function (e) {
   e.preventDefault()
   $(this).tab('show')
})

در ادامه مثال را ارائه خواهیم نمود که در آن روش های مختلف فعال کردن تب ها آورده شده است :

// Select tab by name
$('#myTab a[href = "#profile"]').tab('show')
 
// Select first tab
$('#myTab a:first').tab('show') 

// Select last tab
$('#myTab a:last').tab('show') 

// Select third tab (0-indexed)
$('#myTab li:eq(2) a').tab('show') 

افکت Fade

برای اعمال افکت fade به تب ها ، fade. را به هر tab-pane. اضافه می کنیم. اولین تب pane باید هم چنین in. را برای اعمال درست افکت fade در محتوای اولیه داشته باشد :

<div class = "tab-content">
   <div class = "tab-pane fade in active" id = "home">...</div>
   <div class = "tab-pane fade" id = "svn">...</div>
   <div class = "tab-pane fade" id = "ios">...</div>
   <div class = "tab-pane fade" id = "java">...</div>
</div>

مثال

یک کاربرد از پلاگین tab با استفاده از ویژگی های داده و افکت fade در مثال زیر آورده شده است :

<ul id = "myTab" class = "nav nav-tabs">
   <li class = "active">
      <a href = "#home" data-toggle = "tab">
         Tutorial Point Home
      </a>
   </li>
   
   <li><a href = "#ios" data-toggle = "tab">iOS</a></li>
	
   <li class = "dropdown">
      <a href = "#" id = "myTabDrop1" class = "dropdown-toggle" data-toggle = "dropdown">
         Java 
         <b class = "caret"></b>
      </a>
      
      <ul class = "dropdown-menu" role = "menu" aria-labelledby = "myTabDrop1">
         <li><a href = "#jmeter" tabindex = "-1" data-toggle = "tab">jmeter</a></li>
         <li><a href = "#ejb" tabindex = "-1" data-toggle = "tab">ejb</a></li>
      </ul>
      
   </li>
	
</ul>

<div id = "myTabContent" class = "tab-content">

   <div class = "tab-pane fade in active" id = "home">
      <p>Tutorials Point is a place for beginners in all technical areas.
         This website covers most of the latest technologies and explains each of
         the technology with simple examples. You also have a 
         <b>tryit</b> editor, wherein you can edit your code and 
         try out different possibilities of the examples.</p>
   </div>
   
   <div class = "tab-pane fade" id = "ios">
      <p>iOS is a mobile operating system developed and distributed 
         by Apple Inc. Originally released in 2007 for the iPhone, iPod Touch,
         and Apple TV. iOS is derived from OS X, with which it shares the 
         Darwin foundation. iOS is Apple's mobile version of the OS X 
         operating system used on Apple computers.</p>
   </div>
   
   <div class = "tab-pane fade" id = "jmeter">
      <p>jMeter is an Open Source testing software. It is 100% pure Java 
         application for load and performance testing.</p>
   </div>
   
   <div class = "tab-pane fade" id = "ejb">
      <p>Enterprise Java Beans (EJB) is a development architecture for 
         building highly scalable and robust enterprise level applications to be 
         deployed on J2EE compliant Application Server such as JBOSS, Web Logic etc.</p>
   </div>
   
</div>

خروجی قطعه کد فوق به صورت زیر می باشد :

متدها

().tab.$ : این متد یک عنصر تب و ظرف محتوا (content container) را فعال می کند. تب باید یک data-target یا یک href داشته باشد و یک گره container را در DOM هدف قرار دهد.

<ul class = "nav nav-tabs" id = "myTab">
   <li class = "active"><a href = "#identifier" data-toggle = "tab">Home</a></li>
   .....
</ul>

<div class = "tab-content">
   <div class = "tab-pane active" id = "home">...</div>
   .....
</div>

<script>
   $(function () {
      $('#myTab a:last').tab('show')
   })
</script>

مثال

مثال زیر کاربرد متد tab مر بوط به پلاگین tab را نشان می دهد. در این مثال ، تب دوم یعنی iOS فعال شده است :

<ul id = "myTab" class = "nav nav-tabs">
   <li class = "active">
      <a href = "#home" data-toggle = "tab">
         Tutorial Point Home
      </a>
   </li>
   
   <li><a href = "#ios" data-toggle = "tab">iOS</a></li>
	
   <li class = "dropdown">
	
      <a href = "#" id = "myTabDrop1" class = "dropdown-toggle" data-toggle = "dropdown">
         Java 
         <b class = "caret"></b>
      </a>
      
      <ul class = "dropdown-menu" role = "menu" aria-labelledby = "myTabDrop1">
         <li>
            <a href = "#jmeter" tabindex = "-1" data-toggle = "tab">
               jmeter
            </a>
         </li>
         
         <li>
            <a href = "#ejb" tabindex = "-1" data-toggle = "tab">
               ejb
            </a>
         </li>
      </ul>
      
   </li>
	
</ul>

<div id = "myTabContent" class = "tab-content">

   <div class = "tab-pane fade in active" id = "home">
      <p>Tutorials Point is a place for beginners in all technical areas. 
         This website covers most of the latest technologies and explains each of 
         the technology with simple examples. You also have a 
         <b>tryit</b> editor, wherein you can edit your code and try 
         out different possibilities of the examples.</p>
   </div>
   
   <div class = "tab-pane fade" id = "ios">
      <p>iOS is a mobile operating system developed and distributed by 
         Apple Inc. Originally released in 2007 for the iPhone, iPod Touch, and 
         Apple TV. iOS is derived from OS X, with which it shares the Darwin 
         foundation. iOS is Apple's mobile version of the OS X operating system 
         used on Apple computers.</p>
   </div>
   
   <div class = "tab-pane fade" id = "jmeter">
      <p>jMeter is an Open Source testing software. It is 100% pure Java 
         application for load and performance testing.</p>
   </div>
   
   <div class = "tab-pane fade" id = "ejb">
      <p>Enterprise Java Beans (EJB) is a development architecture for 
         building highly scalable and robust enterprise level applications to be 
         deployed on J2EE compliant Application Server such as JBOSS, 
         Web Logic etc.</p>
   </div>
   
</div>

<script>
   $(function () {
      $('#myTab li:eq(1) a').tab('show');
   });
</script>

خروجی قطعه کد فوق به صورت زیر می باشد :

رویدادها

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

$('a[data-toggle = "tab"]').on('show.bs.tab', function (e) {

   e.target // activated tab

   e.relatedTarget // previous tab

})

$('a[data-toggle = "tab"]').on('shown.bs.tab', function (e) {

   e.target // activated tab

   e.relatedTarget // previous tab

})

مثال

مثال زیر کاربرد رویدادهای پلاگین tab را نشان می دهد. در این مثال ، ما تب های بازدید شده فعلی و قبلی را خواهیم دید :

<hr>
<p class = "active-tab"><strong>Active Tab</strong>: <span></span></p>
<p class = "previous-tab"><strong>Previous Tab</strong>: <span></span></p>
<hr>

<ul id = "myTab" class = "nav nav-tabs">
   <li class = "active">
      <a href = "#home" data-toggle = "tab">
         Tutorial Point Home
      </a>
   </li>
   
   <li><a href = "#ios" data-toggle = "tab">iOS</a></li>
	
   <li class = "dropdown">
      <a href = "#" id = "myTabDrop1" class = "dropdown-toggle" data-toggle = "dropdown">
         Java 
         <b class = "caret"></b>
      </a>
      
      <ul class = "dropdown-menu" role = "menu" aria-labelledby = "myTabDrop1">
         <li>
            <a href = "#jmeter" tabindex = "-1" data-toggle = "tab">jmeter</a>
         </li>
         
         <li>
            <a href = "#ejb" tabindex = "-1" data-toggle = "tab">ejb</a>
         </li>
      </ul>
      
   </li>
</ul>

<div id = "myTabContent" class = "tab-content">

   <div class = "tab-pane fade in active" id = "home">
      <p>Tutorials Point is a place for beginners in all technical areas.
         This website covers most of the latest technologies and explains each of 
         the technology with simple examples. You also have a 
         <b>tryit</b> editor, wherein you can edit your code and try
         out different possibilities of the examples.</p>
   </div>
   
   <div class = "tab-pane fade" id = "ios">
      <p>iOS is a mobile operating system developed and distributed by 
         Apple Inc. Originally released in 2007 for the iPhone, iPod Touch, and 
         Apple TV. iOS is derived from OS X, with which it shares the Darwin
         foundation. iOS is Apple's mobile version of the OS X operating system
         used on Apple computers.</p>
   </div>
   
   <div class = "tab-pane fade" id = "jmeter">
      <p>jMeter is an Open Source testing software. It is 100% pure Java 
         application for load and performance testing.</p>
   </div>
   
   <div class = "tab-pane fade" id = "ejb">
      <p>Enterprise Java Beans (EJB) is a development architecture for
         building highly scalable and robust enterprise level applications to be 
         deployed on J2EE compliant Application Server such as JBOSS, Web Logic etc.</p>
   </div>
   
</div>

<script>
   $(function(){
      $('a[data-toggle = "tab"]').on('shown.bs.tab', function (e) {
         // Get the name of active tab
         var activeTab = $(e.target).text(); 
         
         // Get the name of previous tab
         var previousTab = $(e.relatedTarget).text(); 
         
         $(".active-tab span").html(activeTab);
         $(".previous-tab span").html(previousTab);
      });
   });
</script>

خروجی قطعه کد فوق به صورت زیر می باشد :