Перейти к содержимому


Фотография
- - - - -

Вертикальные вкладки (tabs) в модуле JB Zoo Category

вкладки jbzoo tabs bootstrap

Лучший Ответ Анна , 30 August 2017 - 10:18

Справилась, тему можно закрывать. 

В файле шаблона script.js добавила

 
  1. (function($){
  2. $(document).ready(function(){
  3. $("#vtabs a:first").tab('show');
  4. });
  5. })(jQuery);
Перейти к сообщению


В теме одно сообщение

#1 Анна

Анна

Отправлено 29 August 2017 - 00:21

Создала новый шаблон вывода категорий в модуле в модуле JB Zoo Category List с вертикальными вкладками. У меня bootsrap, поэтому всё просто, вот, кому нужно:

  1. <div class="row">
  2. <div class="col-sm-3">
  3. <ul class="nav nav-tabs vtabs-left ">
  4. <?php foreach ($categories as $catId => $category): ?>
  5. <li class="<?php echo $category['active_class']; ?>"><a href="#category-tab-<?php echo $catId ?>" data-toggle="tab"><?php
  6. echo $category['category_name'];
  7. if (!empty($category['item_count'])) {
  8. echo ' (' . $category['item_count'] . ')';
  9. }
  10. ?></a></li>
  11. <?php endforeach; ?>
  12. </ul>
  13. </div>
  14. <div class="col-xs-9">
  15. <!-- Tab panes -->
  16. <div class="tab-content">
  17. <?php foreach ($categories as $catId => $category): ?>
  18. <div class="tab-pane" id="category-tab-<?php echo $catId ?>">
  19.  
  20. <?php if (!empty($category['image']) || !empty($category['desc'])) : ?>
  21. <div class="jbcategory-image">
  22.  
  23. <?php if (!empty($category['image'])): ?>
  24. <div class="align-<?php echo $params->get('category_image_align', 'left') ?>">
  25. <a href="<?php echo $category['cat_link'] ?>"><?php echo $category['image'] ?></a>
  26. </div>
  27. <?php endif; ?>
  28.  
  29. <?php if (!empty($category['desc'])): ?>
  30. <p class="jbcategory-desc"><?php echo $category['desc'] ?></p>
  31. <?php endif; ?>
  32.  
  33. <?php echo JBZOO_CLR; ?>
  34. </div>
  35. <?php endif; ?>
  36.  
  37. <?php
  38. if (!empty($category['items'])) {
  39. echo '<div class="jbcategory-items">';
  40. $layout = $params->get('item_layout', 'default');
  41.  
  42. foreach ($category['items'] as $itemId => $item) {
  43. $itemClasses = array(
  44. 'jbzoo-item',
  45. 'jbzoo-item-' . $layout,
  46. 'jbzoo-item-' . $item->type,
  47. 'jbzoo-item-' . $item->id,
  48. 'rborder',
  49. );
  50.  
  51. $renderer = $modHelper->createRenderer('item');
  52. ?>
  53. <div class="<?php echo implode(' ', $itemClasses); ?>">
  54. <?php echo $renderer->render('item.' . $layout, array('item' => $item, 'params' => $params)); ?>
  55. <?php echo JBZOO_CLR; ?>
  56. </div>
  57. <?php
  58. }
  59. echo '</div>';
  60. }
  61. ?>
  62. </div>
  63.  
  64. <?php endforeach; ?>
  65. </div>
  66.  

Но столкнулась вот с чем, при загрузке страницы все вкладки неактивны. Как сделать, чтобы первому элементу списка присваивался сразу класс "active"?

Попробовала добавить

  1. <script type="text/javascript">
  2. $(document).ready(function(){
  3. $("ul.vtabs-left li:first").addClass("active");
  4. }
  5. </script> 

- не помогает ((

 

 


  • 0

#2 Анна

Анна

Отправлено 30 August 2017 - 10:18   Лучший Ответ

Справилась, тему можно закрывать. 

В файле шаблона script.js добавила

 
  1. (function($){
  2. $(document).ready(function(){
  3. $("#vtabs a:first").tab('show');
  4. });
  5. })(jQuery);

  • 0





Темы с аналогичным тегами вкладки jbzoo, tabs, bootstrap

Click to return to top of page in style!