dle.in.ua » Хаки » Вкладки с использованием jQuery

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

Автор: GauraStyle от 15-02-2009, 23:27
Вкладки с использованием jQuery
Вкладки с использованием jQuery

В последнее время на многих блогах стали использовать блоки в сайдбаре, переключаемые с помощью вкладок. Во-первых для экономии места, а во-вторых, это просто красиво. Далее описан простой способ создания таких вкладок при помощи jQuery.
Сначала подключаем библиотеку jQuery и файл стилей в разделе head HTML-документа:
<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" />  

Добавляем сами вкладки на страницу:
<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), который позволит нам переключать вкладки.
$(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
Скачать: jquery-tabs.zip [52.8 Kb] (cкачиваний: 534)
laughing
  • Группа: Гости
  • Icq: 767792
  • Комментариев: 414
  • Публикаций: 19
  • Превыйнах!)
    Спасибо, очень полезная штуко для тех у кого нет места на сайте)
    ^
  • Группа: Гости
  • Icq: --
  • Комментариев: 0
  • Публикаций: 0
  • Ооооо Спасибо нужная вещь!
    • Artyom4ik
    • Регистрация: --
    • Репутация: (||)
    • 16 февраля 2009 00:06
    • 2
    ^
  • Группа: User
  • Icq: 5994599
  • Комментариев: 144
  • Публикаций: 23
  • пасиб)

    --------------------
    • petroff
    • Регистрация: 11.08.2008
    • Репутация: (0|0|0)
    • 16 февраля 2009 00:07
    • 3
    ^
  • Группа: Гости
  • Icq: --
  • Комментариев: 0
  • Публикаций: 0
  • а файлы с папки jquery-tabs куда на сервер бросать ?
    • Artyom4ik
    • Регистрация: --
    • Репутация: (||)
    • 16 февраля 2009 00:15
    • 4
    ^
  • Группа: User
  • Icq: --
  • Комментариев: 52
  • Публикаций: 0
  • 1.Как сделать Бендера ссылкой например на какую то новость
    2.Куда пихать файлы чтоб они отображались на всех страницах, а не только на главной

    --------------------
    • zhr07
    • Регистрация: 23.09.2008
    • Репутация: (0|0|0)
    • 16 февраля 2009 01:22
    • 5
    ^
  • Группа: Гости
  • Icq: --
  • Комментариев: 0
  • Публикаций: 0
  • КРУТО! СПАСИБО!
    • MONAH
    • Регистрация: --
    • Репутация: (||)
    • 16 февраля 2009 02:13
    • 6
    ^
  • Группа: Гости
  • Icq: --
  • Комментариев: 0
  • Публикаций: 0
  • smile
    • websasha
    • Регистрация: --
    • Репутация: (||)
    • 16 февраля 2009 06:04
    • 7
    ^
  • Группа: Гости
  • Icq: --
  • Комментариев: 0
  • Публикаций: 0
  • Почему на всех страницах не хочет работать? только на главной пашет нормально
    • Fred
    • Регистрация: --
    • Репутация: (||)
    • 17 февраля 2009 12:07
    • 8
    ^
  • Группа: User
  • Icq: 6017724
  • Комментариев: 276
  • Публикаций: 4
  • спасибо! bully

    --------------------
    • vilcom
    • Регистрация: 18.10.2008
    • Репутация: (0|0|0)
    • 17 февраля 2009 16:04
    • 9
    ^
  • Группа: Гости
  • Icq: --
  • Комментариев: 0
  • Публикаций: 0
  • Artyom4ik, создай в папке с твоей темой любую папку (пусть будит папка blok)
    Далее изменим это:

    <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" />  

    Fred, zhr07
    На это:
       <script type="text/javascript" src="/templates/qwertys/blok/jquery.js"></script>
                <scr
    ipt type="text/javascript" src="/templates/qwertys/blok/tabs.js"></script>
                <lin
    k rel="stylesheet" type="text/css" href="/templates/qwertys/blok/blok.css" media="screen" />

    в папке /blok/ создай фаил .htaccess с таким содержанием:

    Order Deny,Allow
    Allow from all

    и получаем работу данного хака на всех страницах!!!


    • tood
    • Регистрация: --
    • Репутация: (||)
    • 21 февраля 2009 15:55
    • 10
    ^
  • Группа: Гости
  • Icq: --
  • Комментариев: 0
  • Публикаций: 0
  • Хорошо подойдет для экономии места на сайте, возмем себу !
    • wp
    • Регистрация: --
    • Репутация: (||)
    • 26 февраля 2009 13:21
    • 11
    ^
  • Группа: Гости
  • Icq: --
  • Комментариев: 0
  • Публикаций: 0
  • спасибо
    • Fred
    • Регистрация: --
    • Репутация: (||)
    • 12 марта 2009 21:57
    • 12
    ^
  • Группа: Гости
  • Icq: --
  • Комментариев: 0
  • Публикаций: 0
  • Как прикрутить это дело на DLE 8.3 то?, чтоб можно было в каждую полную новость вставлять новые вкладки?
    • Xuk
    • Регистрация: --
    • Репутация: (||)
    • 29 марта 2010 21:36
    • 13
    ^
  • Группа: User
  • Icq: --
  • Комментариев: 1
  • Публикаций: 0
  • Хоть кто то обясните нормально На 9,2 пойдет. И как можно это реализовать для отображения в fullstory
    • arelsi
    • Регистрация: 24.02.2011
    • Репутация: (0|0|0)
    • 3 марта 2011 12:22
    • 14
    ^
    Информация
    Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.