ساخت تب با کمک بوت استرپ در دروپال

به نسبت تعداد تب های مورد نظرتان ، اقدام به ایجاد بلوک های شخصی نمایید. در زمان ساخت بلوک ها از فیلد عنوان بلوک، جهت درج عنوان تب و از فیلد بدنه بلوک ، برای قرار دادن محتوای بدنه تب استفاده کنید. در مثال زیر به 4 تب اشاره شده است.
پس از ساختن تمامی بلوک ها ، id بلوک های شخصی ساخته شده را شناسایی کرده و در کد زیر بجای 1,2,3,4 قرار دهید. اکنون از کد بوجود آمده در هر کجای قالب سایت دروپالی خود که میخواهید استفاده کنید و یک تب زیبا و ساده ، بدون تکیه بر افزونه های دروپالی داشته باشید.

<!-- Drupal Tab with bootstrap -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">

<?PHP
$block1 = module_invoke('block', 'block', 'view', 1);
$block2 = module_invoke('block', 'block', 'view', 2);
$block3 = module_invoke('block', 'block', 'view', 3);
$block4 = module_invoke('block', 'block', 'view', 4);
?>
<div id="exTab1" class="container"> 
 <ul  class="nav nav-pills">
  <li class="active">
   <a href="#1a" data-toggle="tab"><?PHP print $block1['subject'];?></a>
  </li>
  <li>
   <a href="#2a" data-toggle="tab"><?PHP print $block2['subject'];?></a>
  </li>
  <li>
   <a href="#3a" data-toggle="tab"><?PHP print $block3['subject'];?></a>
  </li>
  <li>
   <a href="#4a" data-toggle="tab"><?PHP print $block4['subject'];?></a>
  </li>
 </ul>

 <div class="tab-content clearfix">
  <div class="tab-pane active" id="1a">
   <h3><?PHP print $block1['content'];?></h3>
  </div>
  <div class="tab-pane" id="2a">
   <h3><?PHP print $block2['content'];?></h3>
  </div>
  <div class="tab-pane" id="3a">
   <h3><?PHP print $block3['content'];?></h3>
  </div>
  <div class="tab-pane" id="4a">
   <h3><?PHP print $block4['content'];?></h3>
  </div>
 </div>
</div>
<!-- Drupal Tab with bootstrap -->

 

نسخه دروپال: