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

Тема в разделе "DLE", создана пользователем GauraStyle, 16 фев 2009.

Информация :
Актуальная версия DataLife Engine 11.3
( Final Release v.11.3 | Скачать DataLife Engine | Скачать 11.3 demo )
Нужно ли обновляться | Как обновиться | Изменения в шаблонах
> Нет русских символов <
[Приватная тема DLE (Все подробности в ЛС к модератору раздела)]

Версии 11.2 и ниже - уязвимы!

Локализации | F.A.Q. | Внешний вид
Правила раздела | Правила форума
Обсуждение хайда карается баном!
В каждом сообщении указывайте версию DLE, которого они касаются!
Статус темы:
Закрыта.
Модераторы: killoff
  1. GauraStyle

    GauraStyle Kot

    Регистр.:
    13 фев 2007
    Сообщения:
    1.497
    Симпатии:
    918
    Вкладки с использованием 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();
    });
    Скачать: Посмотреть вложение jquery-tabs.zip
    Автор: ko1yan
    ;)
     
    masima, Shotlandec, gtkatz и 2 другим нравится это.
  2. staker

    staker

    Регистр.:
    24 ноя 2006
    Сообщения:
    226
    Симпатии:
    33
    а причем тут дле?
     
  3. bukа

    bukа Писатель

    Заблокирован
    Регистр.:
    23 окт 2008
    Сообщения:
    446
    Симпатии:
    138
    Да, штука прикольная, только как в блоки поместить новости с DLE?
     
  4. PoMaH

    PoMaH

    Регистр.:
    8 июн 2006
    Сообщения:
    753
    Симпатии:
    142
    через кустом...

    и афтор совсем не ko1yan
    это базовый пример - слово в слово...
     
  5. sergeysnl

    sergeysnl Читатель

    Заблокирован
    Регистр.:
    10 фев 2008
    Сообщения:
    331
    Симпатии:
    100
    В дле встроить легко.

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

    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. bukа

    bukа Писатель

    Заблокирован
    Регистр.:
    23 окт 2008
    Сообщения:
    446
    Симпатии:
    138
    Через кастом как новости вывести я имел ввиду
     
  7. dm_mb

    dm_mb

    Регистр.:
    6 июн 2006
    Сообщения:
    610
    Симпатии:
    122
    ну так вставь в эти дивы свои теги кастом.
     
  8. bukа

    bukа Писатель

    Заблокирован
    Регистр.:
    23 окт 2008
    Сообщения:
    446
    Симпатии:
    138
    Я не понимаю что такое 'кастом' :confused:
     
  9. Хортица

    Хортица Прохожие

    Курим readme.chm к движку!!!
     
  10. Acidrayne

    Acidrayne

    Регистр.:
    30 сен 2007
    Сообщения:
    296
    Симпатии:
    20
    Люди помогите не могу понять в чем дело, у меня все вкладки получаются открытыми :( Тоесть я пробовал и в шаблонах и просто запускал пример который в архиве, всеравно один и тотже результат :( Это может быть проблема с сервером ?
     
Статус темы:
Закрыта.