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

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

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

  1. Добрый день.
    Во-первых спасибо за вкладочки, оч доступно, понятно и все работает ;)
    Возможно, вопрос не по адресу, но все же. Также как вопросом выше не работает скрипт вывода фоток fancybox внутри вкладки. Есть страница, на ней есть фотки, при нажатии на них выводятся увеличенные фотки. Также на странице есть ваши вкладки, в одну из них я загружаю внешний файл через
    $(document).ready(function(){
    $(‘#test1’).click(function(){
    $.ajax({
    url: «aks.php»,
    cache: false,
    success: function(html){
    $(«#test2»).html(html);
    }
    });
    });
    });
    В этом aks.php также есть фото, если открыть файл в отдельном окне, то они увеличиваются без проблем, а когда пытаешься посмотреть фотки уже в загруженную вкладку, то там скрипт отказывается работать ) Не подскажите, как починить?

  2. Спасибо за вкладки, только возникло 2 вопроса:

    1) как убрать отступ текста, чтобы засунуть в контейнер плагин от соц.сетей?
    2) как вместо текста организовать картинку на закладке?

    Хотелось бы реализовать как на сайте http://echo.msk.ru/blog/

  3. андрей
    попробуйте для подгруженой страницы юзать лайв

    $(’#test1′).live(‘click’, function () {

    должно помоч, этот метод вроде переопределяет когда страница уже загружена

  4. Вопрос не по скрипту вкладок. Меня заинтересовало то, как у тебя на сайте подсвечен синтаксис css и html и т.д. в коде выделенный тегом [code]. Если не секрет подскажи как это сделать? Неужели ты каждое слово и буквы отдельно выделял цветом? Буду очень благодарен если поможешь :)

  5. Dimox, а в твоих табах информация грузится вся скопом или только когда открываешь вкладку? Просто если внедрить ajax без кликанья на ссылку для появления контента в табы и таких табов будет неимоверное количество с ajax контентом то что получится? большой бада-бум!

  6. Подскажите, пожалуйста, у меня на Ucoze работает почему-то только на двух страницах «Главная» и «Новости» — дальше вкладки перестают двигаться.

  7. Смотрите, когда я кликаю по табу, он становится current

    $(‘ul.tabs’).delegate(‘li:not(.current)’, ‘click’, function() {
    $(this).addClass(‘current’).siblings().removeClass(‘current’)
    .parents(‘body’).find(‘div.box’).hide().eq($(this).index()).;
    })

    А код для загрузки с помощью кнопки «loadhtml» в контейнер feeds из контейнера area такой :

    $(document).ready(function(){ $(«#loadhtml»).click(function(){
    $(«#feeds»).load(«/news/portal/1-0-1 #area»);
    });
    });

    Как, если это возможно, превратить второй код, чтобы он загружал информацию только если таб превращен в current?

  8. Я очень плох в скриптах, но неужели нельзя сделать загрузку только по активному табу именно в Вашем примере?

    Я попытался сделать нечто подобное:

    $(document).ready(function(){
    if
    ($(«ul.tabs»).hasClass(«current»); )
    { $(«#feeds»).load(«news/1-0-1 #area»); }
    else
    {$(«#feedss»).load(«pages/demo.html #area»); }
    });

    Но, к сожалению он не работает…кто знает как правильно его написать? И чтобы в else ничего не грузилось или была иконка загрузки.

  9. Похожу по форумам, может, подскажут решение.

  10. Переделал пример, чтобы наглядней было (в табе «новости» загрузка из страницы demo.html контейнера «areaa» в контейнер «feedss»)
    но опять же, любая информация загрузится во всех табах одновременно, а не только в активном табе…http://narod.ru/disk/26384649001/%D1%82%D0%B0%D0%B1%D1%8B%20%D1%81%20ajax.rar.html

  11. Спасибо установил всё работает очень компактно что ну очень радует!!! Я подключил через этот скрипты внешние php файлы пару минут протестировал вроде бы всё пока отлично работает буду советовать этот скрипт остальным!!

  12. Ребята немогли бы вы объяснить, не совсем еще опытному блогеру, в какие именно файлы темы вписывать эти коды которые в шапке. Я тут методом тыка, переборобовал много методов.. но что то несходится у меня. постоянно вылетает эта ошибка :
    Parse error: syntax error, unexpected ‘$’, expecting ‘&’ or T_VARIABLE in D:my_projectsblog.localwwwwp-contentthemesfervens-aferevens-afunctions.php on line 289
    Может это потому что я на локальном сервере работаю ?

  13. Ранее писалось, что из-за
    * {margin: 0; padding: 0;}
    едет весь дизайн сайта, когда внедряешь код. А без этой строчки «пляшут» вкладки. Странно даже, как это вебмастера внедряют и у них ничего не съезжает…
    Пришлось прочитать весь блог, в начале блога давалось неправильная информация что надо вставить
    ul.tabs и li.tabs вместо * {margin: 0; padding: 0;}
    Правильно вставить это:
    ul.tabs {margin: 0; padding: 0;}
    и тогда всё нормально. Dimox — добавьте это в хелп, чтобы не тратить зря время.
    На мой взляд это существенно, так как в противном случае внедрить в какой-нибудь сайт на CMS нельзя.

  14. Скрипт хорош и кода минимум. Единственный недостаток — это то, что Вы не используете хеш ссылок для вкладок. Т.е. нельзя введя в адресной строке определнную хеш ссылку, сразу перейти на нужную вкладку. А так все классно!

  15. Это полезно, когда например в табах есть формы для отправки данных. И допустим мы с какой-то вкладки отправляем данные на сервер для обработки, но там возникли ошибки, которые нужно вывести пользователю. В вашем случае страница перегрузится и вкладка собьется! А если бы были хеш ссылки, то можно было бы сразу вывести нужную вкладку.

  16. Сергей
    8 лет назад

    Подскажите пожалуйста в чем у меня проблема =( Не корректное отображение происхождит вкладок — назад одной на другую…

    • Не вижу никакой проблемы, все на месте.

      • Таблица на странице выехала за пределы контейнера, цвет фона в контейнере отображается не тот, котрый в коде прописан… =(((((

        Да и какая часть отвечает за ширину корешка вкладки?

      • Горизонтальные табы у меня почему-то отказываются корректно отображаться. Возможно из-за того что у меня уже есть одна колонка с табами?

        • Для горизонтальных используются другие стили.

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

            Что из всего этого получилось можно посмотреть на странице http://cheravtotrans.info/index/raspisanie_avtobusov_zima_2011_2012/0-130

            PS Предыдущие мои посты можно и нужно удалить, так как они не несут смысловой нагрузки и ссылки не рабочие там.

  17. класс!
    большущее спасибо :)

    установила себе — радует очень :)

  18. Добрый день Dimox. Спасибо за превосходный скрипт.Пригодится в разработке сайта. У меня вопрос может быть не по теме. Dimox мне очень понравилось как у Вас происходит процесс «Цитирования» комментариев при выделении текста. Не подскажите это с помощью плагина происходит или Ваша собственная разработка? Заранее спасибо.

  19. А Вы не против если я у Вас этот скрипт позаимствую???

      • Dimox спасибо за скрипт. Попробовал сделать у себя на тестовом сайте. Получились заморочки по поводу вывода всплывающего окна. Не знаю с помощью какой функции выводить окно. Пришлось сделать ссылку «Цитировать» в комментариях. Нажимаешь «Цитировать», а затем выделяю текст окно появляется и выделенный текст добавляется в форму ответа. Вызываю с помощью вот этого

        <a href="#" onclick="bquote(''); return false">цитировать</a>

        . Может быть подскажите как правильно сделать. За ранее благодарен.

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

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