Drupal → Модуль Views UI Tabs — выводим контент в вкладках

04.05.2012

Описание

Модуль Views UI Tabs это style plugin для Views 3, позволяющий выводить контент в вкладках, используя для этого jQuery UI Tabs:

jQuery UI Tabs

Модуль можно использовать например для создания контент-слайдера как на сайте ntv.ru:

Контент-слайдер

Или в качестве замены монструозного Dynamic Display Block.

Установка и использование

Установка стандартная — распаковать в sites/all/modules, включить.

Дальше создаём представление. Указываем стиль вывода — Fields. Добавляем необходимые поля.

В качестве стиля выбираем UI Tabs:

В настройках стиля, в поле Grouping field Nr.1, выбираем поле, по которому будет происходить группировка и которое будет выводится в заголовках табов:

Замечание — это поле не может быть ссылкой.

Profit.

Написанное актуально для
Views UI Tabs 7.x-1.0
Похожие записи

Комментарии

Гость
04.05.2012, 19:39

А Grouping field Nr.1 как используется?

Гость
04.05.2012, 19:40

В смысле А Grouping field Nr.2 как используется?

Валентин
16.05.2012, 19:29

Доброго времени суток, подскажите можно ли использовать этот модуль для ноды товара Ubercart(что бы были такие табы: "Описание" "Отзывы" "Доставка")

раньше в табах все эти вкладки вылезали а теперь отдельно будет ?

Гость
31.05.2012, 19:53

Скажите, пожалуйста, а есть ли более простой модуль, как этот, чтобы вывести вот такой слайдер?
Или кроме как с помощью Dynamic Display Block никак?
Насколько я понял, модуль Views UI Tabs под требуемый вид не подойдет, ибо заголовком для вкладок может быть лишь только один критерий, например заголовок ...

заголовком может быть любое поле, в том числе созданное самостоятельно

Гость
31.05.2012, 23:03

Та так то оно так, просто интересно как же тогда в это одно поле группового фильтра всунуть 4 поля (фото, заголовок, год, цена), да еще, если это все-таки возможно, будет ли работать такой групповой фильтр правильно?
Я понимаю, что вместо заголовка можно выбрать фото, соответственно перекрутив стиль отображения посредством шаманства с css под нужный лад, но вот как прикрутить дополнительно остальные поля вместо одного названия вкладки что-то неясно...

Гость
31.05.2012, 23:52

Ха, интересная идея. Попробую, отпишусь :)

Гость
01.06.2012, 00:38

Да, спасибо, в принципе все получилось. Осталась только css напильником подровнять и новостной слайдер готов :)

Гость
03.09.2012, 08:50

не скачивается ни по одной из ссылок, автор, если не сложно выложите архив сами на какой- нибудь файлообменник, спасибо

Гость
11.11.2012, 13:10

views slideshow использовал для таких задач, сейчас и этот модуль попробую

Гость
11.11.2012, 13:14

скачал по ссылке и без проблем

Владимир
25.11.2012, 14:00

А можно ли как-то создать ещё вкладку, чтобы отображалось на ней всё без группировки?

Добрый день. У меня в табах используется Gallery Formatter, который перестает работать после переключения таба. Как я понимаю, скрипт не инициализуется. Пробовал quicktabs и UI Tabs, проблема одна и та же.

Антон
23.08.2013, 13:35

Жаль, что недоступен он теперь на дорге.

Гость
27.10.2013, 14:34

а можно ли сделать, чтобы табы автоматически переключались? (как в том же Dynamic Display Block)

Игорь
27.10.2013, 15:53

можно ли сделать, чтобы табы автоматически переключались?

    $(this).tabs("rotate", 2000).mouseover(function(e){
      $(this).tabs("rotate", null);  
    }).mouseout(function(){
      $(this).tabs("rotate", 2000);
    });
Гость
27.10.2013, 15:57

$(this).tabs("rotate", 2000).mouseover(function(e){
$(this).tabs("rotate", null);
}).mouseout(function(){
$(this).tabs("rotate", 2000);
});

не подскажите куда это вставлять?

Игорь
27.10.2013, 18:11

Вставлять не это а почти это, это общий принцип.
вместо this - скорее всего - #views-ui-tabs
создать новый или в уже имеющийся файл.js в теме и подключен через .info или в teplate.php через drupal_add_js (так больше возможностей управления подключением для конкретных страниц)
Ааа можно и через блок - добавить блок формат php (я обычно делаю ещё один формат - "Без форматирования") и вывести в футере для определенных страниц.

<script type="text/javascript">
(function ($) {
     $('#views-ui-tabs').tabs("rotate", 2000).mouseover(function(e){
      $('#views-ui-tabs').tabs("rotate", null);  
    }).mouseout(function(){
      $('#views-ui-tabs').tabs("rotate", 2000);
    }); 
})(jQuery);
</script>

Хотя достаточно и формата: "Full HTML"
Проверил специально для вас - работает!

Гость
27.10.2013, 18:25

да, при наведении начинает перелистывать слайды - спасибо!

Игорь
27.10.2013, 21:19

Что это за имя "Гость"? Почему лень представиться? Странно это как то...
Специально для тебя, Гость - подарок...)))
метод начинает работать сразу, после загрузки страницы:

<script type="text/javascript">
(function ($) {  
  $.getScript('http://www.linkexchanger.su/example_jquery/js/jquery.livequery.js', function(){
    $('#views-ui-tabs').livequery(function(){
      $(this).tabs("rotate", 2000).mouseover(function(e){
        $(this).tabs("rotate", null);  
      }).mouseout(function(){
        $(this).tabs("rotate", 2000);
      });
	  });
  });   
})(jQuery);
</script>  

jQuery - волшебная вещь...)))
Конечно желательно скачать себе jquery.livequery.js
И открыть его для себя! В отличии от live - можно сразу вызвать функцию без привязки к события!

Алексей
14.11.2013, 17:59

Если нетрудно, подскажите, как настроить этот модуль для получения вертикальных вкладок. Заранее благодарю.

Костя
14.11.2013, 18:07

http://jqueryui.com/tabs/#vertical

создайте блок, добавьте туда

(<script type="text/javascript">
function ($) {
     $( "#views-ui-tabs" ).tabs().addClass( "ui-tabs-vertical ui-helper-clearfix" );
     $( "#views-ui-tabs li" ).removeClass( "ui-corner-top" ).addClass( "ui-corner-left" );
})(jQuery);
</script>

а в .css пропишите

  .ui-tabs-vertical { width: 55em; }
  .ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: left; width: 12em; }
  .ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; }
  .ui-tabs-vertical .ui-tabs-nav li a { display:block; }
  .ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; border-right-width: 1px; }
  .ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: right; width: 40em;}
Алексей
14.11.2013, 19:36

Уважаемый Костя, большое спасибо. ВСе работает! РЕспект и уважуха!

Костя
28.11.2013, 22:20

а вот так можно сделать слайдер с fade эффектом.

<script type="text/javascript">

(function($) {

$( "#views-ui-tabs" ).tabs().addClass( "ui-tabs-vertical ui-helper-clearfix" );
    $( "#views-ui-tabs li" ).removeClass( "ui-corner-top" ).addClass( "ui-corner-left" );

$("#views-ui-tabs").tabs({
  show: function(event, ui) {
    var lastOpenedPanel = $(this).data("lastOpenedPanel");
    if (!$(this).data("topPositionTab")) {
        $(this).data("topPositionTab", $(ui.panel).position().top)
    }
    // do crossfade of tabs
    $(ui.panel).hide().css('z-index', 2).fadeIn(1000, function() {
      $(this).css('z-index', '');
      if (lastOpenedPanel) 
      {
        lastOpenedPanel
          .toggleClass("ui-tabs-hide")
          .hide();
      }
    });

    $(this).data("lastOpenedPanel", $(ui.panel));
  } 
}).tabs('rotate', 3000);

$.getScript('http://www.linkexchanger.su/example_jquery/js/jquery.livequery.js', function(){
    $('#views-ui-tabs').livequery(function(){
      $(this).tabs("rotate", 4000).mouseover(function(e){
        $(this).tabs("rotate", null);  
      }).mouseout(function(){
        $(this).tabs("rotate", 4000);
      });
	  });
  });   
})(jQuery);

</script>
Костя
30.11.2013, 13:45

а можно ли как-нибудь сделать ссылку на определённую вкладку? чтобы страница открывалась на ней, а не на первой.

при наведении на вкладку отображается ссылка вида /#views-ui-tabs-tab--2, но при загрузке страницы с таким url, всё равно отображается первый таб.

Алексей
02.12.2013, 19:35

Константин, доброго времени суток. У меня новая беда. Пытался включить на вкладках модуль Gallery foкmatter, мучился весь день... Модуль толком так и не заработал, но в рез-те что-то случилось с вкладками - теперь они все отображаются сверху, а контент - под ними всеми, а не сверху. Выглядит страшновато.

Андрей
03.07.2014, 22:13

привет! спасибо, все почти получилось. не хотел работать "rotate", но я решил это подключением jQuery-UI-Tabs-Rotate.
а вот fade эффект появляться в упор не хочет, все выставлено верно, есть мысли в какую сторону посмотреть и как протестить что его блокирует ?

смотрите браузерную консоль ошибок

Андрей
03.07.2014, 22:16

сейчас ошибок нет, была только Uncaught Error: no such method 'rotate' for tabs widget instance
но она решилась

Гость
12.03.2015, 17:36

Ребята, новичок в Друпале, куда вставлять код JS и для CSS чтоб вертикально табы были?
(
function ($) {
$( "#views-ui-tabs" ).tabs().addClass( "ui-tabs-vertical ui-helper-clearfix" );
$( "#views-ui-tabs li" ).removeClass( "ui-corner-top" ).addClass( "ui-corner-left" );
})(jQuery);

и это:

.ui-tabs-vertical { width: 55em; }
.ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: left; width: 12em; }
.ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; }
.ui-tabs-vertical .ui-tabs-nav li a { display:block; }
.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; border-right-width: 1px; }
.ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: right; width: 40em;}

Добавить комментарий