• DONATE to NULLED!
    Форуму и его команде можно помочь, мотивировать модераторов разделов.
    Помогите модератору этого раздела killoff лично.

Хак Вкладки с использованием jQuery

Статус
В этой теме нельзя размещать новые ответы.

GauraStyle

SeoPlus.com.ua
Регистрация
13 Фев 2007
Сообщения
1.512
Реакции
939
Вкладки с использованием jQuery
jquery-tabs.gif
В последнее время на многих блогах стали использовать блоки в сайдбаре, переключаемые с помощью вкладок. Во-первых для экономии места, а во-вторых, это просто красиво. Далее описан простой способ создания таких вкладок при помощи jQuery.
Сначала подключаем библиотеку jQuery и файл стилей в разделе head HTML-документа:
PHP:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="tabs.js"></script>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
Добавляем сами вкладки на страницу:
PHP:
<div class="tabs">
    <!–- tabs -–>
    <ul class="tabNavigation">
    <li><a href="#first">Первая</a></li>
    <li><a href="#second">Вторая</a></li>
    <li><a href="#third">Третья</a></li>
    </ul>

    <!–- tab containers -–>
    <div id="first">
    <p>Содержание первой вкладки</p>
    </div>
    <div id="second">
    <p>Содержание второй вкладки</p>
    </div>
    <div id="third">
    <p>Содержание третьей вкладки</p>
    </div>
</div>
А теперь небольшой скрипт (файл tabs.js), который позволит нам переключать вкладки.
PHP:
$(function () {
    var tabContainers = $('div.tabs > div');
    tabContainers.hide().filter(':first').show();
           
    $('div.tabs ul.tabNavigation a').click(function () {
        tabContainers.hide();
        tabContainers.filter(this.hash).show();
        $('div.tabs ul.tabNavigation a').removeClass('selected');
        $(this).addClass('selected');
        return false;
    }).filter(':first').click();
});
Скачать:
Автор: ko1yan
;)
 
а причем тут дле?
 
  • Заблокирован
  • #3
Да, штука прикольная, только как в блоки поместить новости с DLE?
 
через кустом...

и афтор совсем не ko1yan
это базовый пример - слово в слово...
 
  • Заблокирован
  • #5
В дле встроить легко.

К примеру это ваш блок

PHP:
<div class="block">
<h1>Block</h1>
Какойто текст
</div>

Вставляем вместо "какойто текст" или что у вас там в блоке

PHP:
<div class="tabs">
    <!–- tabs -–>
    <ul class="tabNavigation">
    <li><a href="#first">Первая</a></li>
    <li><a href="#second">Вторая</a></li>
    <li><a href="#third">Третья</a></li>
    </ul>

    <!–- tab containers -–>
    <div id="first">
    <p>Содержание первой вкладки</p>
    </div>
    <div id="second">
    <p>Содержание второй вкладки</p>
    </div>
    <div id="third">
    <p>Содержание третьей вкладки</p>
    </div>
</div>

Вот и все... Видел подобное на DLE - сайтах.

ЗЫ: вылаживайте прикольные js скриптики в эту тему, они очень прикольные и полезные. :)
 
  • Заблокирован
  • #6
Через кастом как новости вывести я имел ввиду
 
ну так вставь в эти дивы свои теги кастом.
 
  • Заблокирован
  • #8
Я не понимаю что такое 'кастом' :confused:
 
Люди помогите не могу понять в чем дело, у меня все вкладки получаются открытыми :( Тоесть я пробовал и в шаблонах и просто запускал пример который в архиве, всеравно один и тотже результат :( Это может быть проблема с сервером ?
 
Статус
В этой теме нельзя размещать новые ответы.
Назад
Сверху