Универсальный jQuery-скрипт для блоков с вкладками (табами)

Вступление Мое знакомство с фреймворком jQuery произошло в 2008-м году, после того, как, однажды, на одном из англоязычных сайтов я нашел jQuery-скрипт, который позволяет создавать блоки с удобными вкладками. Этому скрипту я посвятил отдельный пост на данном блоге. С тех пор прошло 2 года, ...

Комментарии (970)

  1. Dimox, можешь рассказать, как делаются табы с категориями, новыми записями, тэгами и т.д. для сайдбара? В качестве примера возьмем табы с этого блога, в которых все выше перечисленное уже есть. Может напишешь отдельный пост? Очень интересно реализация такой вещи без применения плагинов, которых толковых под эти цели еще не встречал. Спасибо!

    • Рассказывать особо нечего. В основном все стандартно.

      — последние и новостные сделано с помощью query_posts;
      — популярные плагином Popular Posts;
      — рубрики плагином Category Tagging;
      — теги стандартным кодом;
      — архивы плагином Simple Archive.

      • Спасибо тебе! Сейчас буду лопатить! :)

      • Dimox, подскажи пожалуйста какой код ты использовал для вывода последних записей?
        Пытался использовать вариант, предложенный тобой с этой страницы: query_posts

        
        <?php
        
        // The Query
        query_posts( $args );
        
        // The Loop
        while ( have_posts() ) : the_post();
        	echo '<li>';
        	the_title();
        	echo '</li>';
        endwhile;
        
        // Reset Query
        wp_reset_query();
        
        ?>
        

        Но таким образом нельзя добиться выводом ссылок на выводимые материалы. И как это сделать, ума пока не хватает. Погуглил немного и нарыл другой вариант, но он не совсем мне подходит:

        
        								<?php if( have_posts() ){ while( have_posts() ){ the_post(); ?>
        
        								<div>
        									<ul><li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a><li></ul>
        								</div>
        
        							<?php } // конец while ?>
        							<?php
        							} // конец if
        							else // если записей нет выводим следующее
        							{ ?>
        
        							<?php } ?>
        

        При таком раскладе, в сайдбаре на главной странице выводится указанное количество последних записей. Но когда переходишь на любую страницу, выводится только одна — та на которой находишься.
        Подскажешь?

  2. Подскажите и мне, пожалуйста, хочу использовать данный скрипт в связке со слайдером контента. По 1 вкладке листалка нормально работает, но после последнего слайда уходит в никуда, а навторой вобоще ничего не отображается где искать решение. Использую вот этот слайдер контента:

    http://manos.malihu.gr/tuts/slidebox.html

  3. Приветствую! Dimox, спасибо огромное за проделанную работу! Применил для экономии места при отображении виждетов сообществ на боковой панели. Все отлично работает!
    Один только странный нюанс… В Firefox при открытии второй вкладки не отображается виджет сообщества вконтакте.. с фейсбуком проблем нет .. а вот с вконтакте тоьлко пока в лисе такой баг заметил.. причем если отдельно его вставить на странице — он есть …
    как я его леплю:

    <div class="box" id="vk_groups"></div>
    <script type="text/javascript">
    VK.Widgets.Group("vk_groups", {mode: 0, width: "280", height: "270"}, GROUP_ID);
    </script>

    Подскажите, пожалуйста, в чем причина. При чём, пару раз отображался корректно, но приобновлении страницы просто пустая вкладка, сжатая по высоте (. Спасибо.

    • Сам однажды столкнулся с этой проблемой и, к счастью, нашел решение.

      Добавьте следующие стили, и все должно исправиться:

      
      #vk_groups, #vk_groups iframe {
        height: 272px !important;
      }
      
  4. Dimox, перемучал уже css как мог, внедрил рекомендацию по отображению в режиме отключенного скрипта в браузере и ничего не помогает… Если виджеты расположены один под другим — всё ок, если же виджет вконтакте на 2-ой вкладке — лиса то отображает то не отображает его.. в большей степени не отображает… что это за странный баг… хелп ми %) в остальных браузерах всё ок

  5. ООООООООООООО!!!! Алилуя!! Спасибо те огромное!!! Всё работает!!! :)

  6. А на UCOZе работает этот скрипт?

  7. P.S. Мне в твиттере как-то сказали, что я “изобретаю колесо”, что такой скрипт уже есть в jQuery UI. Ну и пусть, пусть я “изобрел колесо”, главное, что я получаю большое удовольствие от данного процесса и одновременно повышаю свой опыт в jQuery. Разве это плохо? =)

    Я жутко злюсь когда мне такое говорят! Мне например очень не нравится использовать чужие наработки, для меня лучше самому написать, пусть и «колесо», или даже «велосипед»…

    • Изобретать колёса и велосипеды иногда хорошо, иногда плохо.. но тут я бы выразил свое несогласие с пользователем твиттера по другой причине. Дело то в том, что не всегда хочется подключать целый UI ради одних только табов, ведь это неслабый такой объём лишних килобайт :)

  8. Спасибо! Почти все получилось, но только вкладки не переключаются? Где я допустил ошибку?

  9. Урааа… Ты супер Dimox/ И у меня получилось. Все работает и на UCOZ. Спасибо тебе огромное за это «колесо».

    • Отлично. Пожалуйста.

      Предыдущие твои комментарии почему-то ушли на модерации, их тогда уже нет смысла публиковать.

      Причина у тебя была в том, что была подключена не та версия jQuery. Не успел об этом написать.

  10. Да я заметил что сообщения не выводились. Спасибо тебе еще раз. У меня ещё один ( я надеюсь последний :-) ) вопрос к тебе. Как сделать углы вкладок закругленными? Заранее благодарю.

  11. А можно ли сделать вкладки во вкладках? :) Ну, наверное, вы меня поняли, о чём я :)

  12. Доброго времени суток. Dimox а можно в css вот верхние вкладки заголовки подвинуть чуть к центру чтобы левая граница первой вкладки заголовка (li class=»current») не совпадала с границей первой вкладки с содержанием (div class=»box visible»). Не знаю правильно ли я объяснил :)
    Ну вот у тебя допустим (на примере вкладок «заработок для вебмастера» и «архивы») они ровно идут по левой границе а после вкладки — заголовка «архивы» справа остается ещё место. Так вот надо чтоб и слева оставалось место

  13. Все все все. Сам догадался. С помощью тега margin :)/ Но все равно спасибо

  14. Как убрать фон возле табов, а в них оставить?
    В CSS есть значение background, но при его удалении фон становиться такого же цветак как и табы.
    Просто дело в том что у меня фон на сайте сделан из узора в фотошопе, который на табы распространяться не должен, а как бы оставаться под всеми блоками, типо за ними.
    Живой пример:
    Счелк

  15. У div.section убрал фон — помогло. Спасибо!
    Но еще есть проблема другого рода.
    Между табами и зоной с контентом есть пустое место. Я так понимаю что где то в CSS есть отступ, который создает этот промежуток, но перепробывав значения у разных padding проблема не решилась. Dimox, помоги.
    Пример: http://savepic.ru/3035730.htm

    • Покажи лучше страницу с исходным кодом. По скриншоту можно только гадать. Этот отступ, скорее всего, создает margin у какого-то из блоков.

      • CSS:

        /* <![CDATA[ */
        
        .section {
        	width: 833px;
        	margin: 0 0 30px;
        padding-left: 132px;
        }
        ul.tabs {
        	height: 28px;
        	line-height: 25px;
        	list-style: none;
        	border-bottom: 1px solid #aeaeae;
        }
        .tabs li {
        	float: left;
        	display: inline;
        	margin: 0 2px 0px 0;
        	padding: 0 13px 2px;
        	cursor: pointer;
        	background: #dddddd;
        	border: 1px solid #aeaeae;
        	border-bottom: 1px solid #aeaeae;
        	position: relative;
                color: #949494;
                font: Tahoma; 
                FONT-SIZE: 12px;
        }
        .tabs li.current {
        	background: #f4f3f3;
        	padding: 0 13px 2px;
        	border: 1px solid #aeaeae;
        	border-bottom: 1px solid #e9e9e9;
                color: #949494;
                font: Tahoma; 
                FONT-SIZE: 12px;
        }
        .box {
        	display: none;
        	border: 1px solid #aeaeae;
          border-width: 0px 1px 1px;
        	background: #f4f3f3;
        	padding: 0 12px;
        }
        .box.visible {
        	display: block;
        }
        /* ]]> */

        HTML INDEX:

        <div class="section">

        <ul class="tabs">
        <li class="current">С КОМПЬЮТЕРА</li>
        <li>С ИНТЕРНЕТА</li>
        </ul>

        <div class="box visible">
        <form action="http://no4evka.ru/loadfile.php" name="Loadimage" enctype="multipart/form-data" method="POST">
        <div class="textloadstyle">Изображение для загрузки:</div><div class="loadstyle"><input id="load" name="img" type="file" size="60"></div><br><div class="textloadstyle1">Описание : (не обязательно)</div><div class="loadstyle1"><input id="descrip" name="descrip" type="text" size="71"></div>
        <div class="upload"><input type="submit" value="Отправить"></div>
        </form>
        </div>

        <div class="box">
        <p>Закон внешнего мира, как принято считать, реально рассматривается знак, отрицая очевидное. Гегельянство творит катарсис, хотя в официозе принято обратное. Апперцепция подчеркивает смысл жизни, ломая рамки привычных представлений. Представляется логичным, что адживика откровенна.</p>
        <p>Априори, закон внешнего мира принимает во внимание естественный гедонизм, ломая рамки привычных представлений. Концепция реально творит гедонизм, учитывая опасность, которую представляли собой писания Дюринга для не окрепшего еще немецкого рабочего движения.</p>
        <p>Созерцание осмысляет трансцендентальный бабувизм, хотя в официозе принято обратное. Бабувизм абстрактен. Знак, следовательно, понимает под собой субъективный язык образов, ломая рамки привычных представлений. Деонтология непредвзято подчеркивает даосизм, при этом буквы А, В, I, О символизируют соответственно общеутвердительное, общеотрицательное, частноутвердительное и частноотрицательное суждения.</p>
        </div>

        </div><!-- .section -->

        В первом табе я уже залил свой контент. 2й еще не изменял.

  16. Спасибо, это помогло, но только текущему табу.
    То есть, если открыть второй таб, то там проблема осталась. Помоги пожалуйста

    • Добавь в самое начала файла стилей:

      * {margin: 0; padding: 0;}

      А потом уже задавай тегам нужные отступы.

      И вообще, рекомендую почитать руководство по CSS, там все написано.

  17. Не подскажете причину, по которой может не цепляться ко второму набору вкладок. Первый переключается отлично, а второй никак. И спасибо большое, очень простой в использовании и удобный модуль)

  18. Алексей
    8 лет назад

    Доброго времени суток!
    Отличное решение, мне подходит. Но есть одно Но, а именно:

    В примере фон задается цветом, а у меня возникла необходимость применить изображение, при чем не одно на все вкладки, а на каждую вкладку своя картинка (можете меня ругать, но другого решения я пока не вижу).
    Для наглядности загляните на портал города Перми www.properm.ru, на главной странице там выведены новости как раз при помощи вкладок.
    При клике на вкладку она принимает вид прямоугольника со стрелочкой.
    Вот так же пытаюсь сделать я. Но в силу моего начального уровня не могу понять как. То есть я конечно могу в таблице стилей вместо background: #xxx поставить background:url(xxx), но тогда получится не совсем красиво в силу того, что длина ссылок разная, а размер картинки фиксированный.
    Если есть решение моей проблемки, буду признателен.
    Заранее спасибо, с уважением.

    • Почитайте вот эти статьи, должно помочь:

      http://dimox.name/dinamic_link_buttons_with_css/
      http://www.id-as.com/arts/ala/slidingdoors/

      • Спасибо за ссылки. Но метод «раздвижных дверей» не совсем подходит, либо его нужно доработать. Объясню.

        Дело в том, что для того, чтобы реализовать этот метод нужно не два, а три изображения (левая растягивающаяся часть, правая часть и центрированная средняя часть (это тот самый треугольник)).

        <a href="#" class="button"><span>Динамическая кнопочка</span></a>

        Как я понял из приведенных Вами статей, образуется два слоя, и к каждому из них присваивается картинка. Верхний слой соответственно перекрывает нижний и получается кнопка какой угодно длины.
        Но как добавить третий слой для добавления треугольника? Вот в чем вопрос.
        здесь соответственно

        • Все тут подходит. Ничто не мешает добавить 3-ю обертку вот таким, например, образом:

          <a href="#" class="button"><span><span>Динамическая кнопочка</span></span></a>

          и использовать ее для треугольника:

          
          .button span span { ... }
          
  19. Алексей
    8 лет назад

    Спасибо за разъяснения. С трудом, но почти сделал что хотел. Правда я обернул div’ами

    <li class="current"><div><div>первая вкладка</div></div></li>

    Осталась одна маленькая деталь. При переходе на другую вкладку меняется вид, прописанный для класса .current. То есть в яваскрипт нужно каким-то образом дописать изменения и для div’ов.
    Я, конечно делал попытки, но ничего из этого не вышло.
    Подскажите что нужно дописать в скрипт?
    Тестовая страничка на ucoz’е. Вот ссылка для наглядности
    С уважением.

    • Да, в данном случае как раз дивами правильнее будет.

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

      
      <ul class="tabs">
      	<li class="current t1"><div><div>первая вкладка</div></div></li>
      	<li class="t2"><div><div>вторая вкладка</div></div></li>
      	<li class="t3"><div><div>третья вкладка</div></div></li>
      	<li class="t4"><div><div>червертая вкладка</div></div></li>
      </ul>
      

      и стили:

      
      .tabs li.current.t1 { ... }
      .tabs li.current.t2 { ... }
      .tabs li.current.t3 { ... }
      .tabs li.current.t4 { ... }
      
  20. Привет Dimox :)
    Есть один вопрос.
    Почему то в Firefox не хотят работать внутри вкладок, разного рода скрипты. Хотя в Хроме и опере работают на ура.
    В чём проблема?

    Вот примеры можешь глянуть тут:
    http://videotuts.ru/2305-maya-to-softimage-conversion.html
    Жми вкладку Соц. голосование

    Или же в правом сайдбаре найди Мы вконтакте

Ваш комментарий