Главная › JavaScript

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

978 комментариев

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

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

Смотрите также

Создаем удобные, практичные вкладки с помощью jQuery

50 комментариев

Внимание! Нижеизложенная статья на данный момент не актуальна. Вместо нее читайте статью «Универсальный jQuery-скрипт для блоков с вкладками (табами)». * * * Примерно последние месяц-два на англоязычных блогах мне стали попадаться на глаза блоки в сайдбаре, ...

Скрипт для плавной прокрутки на верх страницы (на JavaScript и на jQuery)

66 комментариев

Предлагаю вашему вниманию скрипт, который плавно прокручивает страницу наверх при клике на соответствующую ссылку. Я сделал 2 варианта: на чистом JavaScript и на jQuery. Выбирайте тот, который вам больше по душе. Вариант на JavaScript Можно посмотреть готовый ...

Добавляем кнопку «Google +1» в панель от Share42.com

68 комментариев

На своем другом блоге я недавно объяснил, почему в данный момент кнопка «Google +1» не может быть добавлена в моем сервисе Share42.com, о чем все просят. Однако прямо сейчас на данном блоге вы можете наблюдать, что кнопка «Google ...

Красивые всплывающие подсказки с помощью jQuery

144 комментария

Внимательные пользователи моего сайта Share42.com заметили, что на нем с определенной поры появились красивые всплывающие подсказки, и меня попросили рассказать, как такое сделать. Поэтому я хочу поделиться с вами моим очередным небольшим jQuery-скриптом, который поможет ...

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

  1. Казанский бомж
    14 лет 1 месяц назад

    спасибо Дим, буду пробовать

  2. Ильшат
    14 лет 1 месяц назад

    за скрипт спасибо, как раз для одного сайта пригодится.
    оффтоп: не знаешь как разбить теги на категории? чтобы моңно было выводить и т. д. как у слона под статьями, напр. slon.ru/articles/309 304/

  3. fenris
    14 лет 1 месяц назад

    Спасибо за скрипт, Дима. Ох как бы он мне пригодился полгода назад.

  4. Keleran
    14 лет 1 месяц назад

    Больше похоже на решение конкретной проблемы, чем на универсальный скрипт. Для универсальности не хватает настроек.
    Код можно значительно сократить, примерно так:

    $(function() {
	$('ul.tabs').delegate('li:not(.current)', 'click', function() {
		$(this).addClass('current').siblings('.current').removeClass('current').parents('div.section:first').find('div.box').hide().eq($(this).index() ).fadeIn(150);
	});
});
  5. Demetr
    14 лет 1 месяц назад

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

  6. Windemiatrix
    14 лет 1 месяц назад 
    (function($) {
$(function() {

    $('ul.tabs').each(function() {
	$(this).find('li').each(function(i) {
	    $(this).click(function(){
		$(this).addClass('current').siblings().removeClass('current');
		var p = $(this).parents('div.section');
		p.find('div.box').hide();
		p.find('div.box:eq('+i+')').show();
	    });
	});
    });

})
})(jQuery)

    Нет эффекта при появлении, но и нет глюка с перескакиванием в начало страницы. А нужный эффект, если не ошибаюсь, можно прописывать в свойствах show ().
    Ну и, конечно же, спасибо!

  7. Ramster
    14 лет 1 месяц назад

    Хороший блог, полезные статьи. Спасибо, Дмитрий. Подписался на RSS!

  8. Константин
    14 лет 1 месяц назад

    Добрый день.

    Я бы на вашем месте не объявлял. current в табах и. visible в боксах — мне кажется, это лишняя манипуляция. Класс. visible можно принудительно обозначить для соответствующего элемента при обработке скрипта.

  9. Sonikelf
    14 лет 1 месяц назад

    Мне в твиттере как-то сказали, что я «изобретаю колесо», что такой скрипт уже есть в jQuery UI

    Побольше бы таких колес и мир стал бы в разы лучше :-) Так что давай, изобретай еще велосипед, электричество и всё остальное — мы будем только рады твоим таким изобретениям :-)
    О чем это я. А да, спасибо тебе, Дим, — ты как всегда великолепен!
    Полностью переписал сайдбар благодаря твоим вкладкам :-)

  10. dimm2k
    14 лет 1 месяц назад

    Все здорово, а не подскажет ли кто как сделать вложенные табы :) Что-то я итак и сяк и никак…

  11. dimm2k
    14 лет 1 месяц назад

    решил вопрос дублированием кода скрипта… и элементов на форме. более красивого нет решения?

  12. oldvovk
    14 лет 1 месяц назад

    Хорошее минималистическое решение, уже пристроил к делу в блоге, где табы уже используются. Смущает одно, а есть ли смысл только для табов подключать библиотеку под 50−70 кило? Может быть найдется решение изменить код к примеру у «tabbera» — у него на все про все 8 кило.

  13. Foxil
    14 лет 1 месяц назад

    Dimox, спасибо за скрипт! jQuery очень удобен в этом плане)

  14. Василий
    14 лет 1 месяц назад

    Великолепная работа.
    Есть вопрос —
    Как сделать, чтобы поисковили индексировали
    содержимое?

  15. Sajke
    14 лет 1 месяц назад

    Хороший компактный скрипт, только конфликтует с datepicker почему-то… что первым поставишь, то и будет работать. Очень жаль ((

  16. Galer
    14 лет назад

    В сокращенном скрипте анимация присутствует?

  17. Braun
    14 лет назад

    Теперь нужно попробывать сделать на своем блоге такое. Выглидит на самом деле лучше.

  18. Какан
    14 лет назад

    Спасибо за плагин. Подскажи как исправить следующую ситуацию: если добавить табы внутрь другого таба, то всё перестаёт работать. Бага. Как избавиться? Хелп.

  19. 0:0=
    14 лет назад

    Сам спросил, сам отвечаю.
    Для большей универсальности нужно заменить строку:
    var p = $(this).parents ('div.section');
    на:
    var p = $(this).parent ('div.section');
    И тогда начинают работать табы внутри табов. Хо-хо-хо.

  20. 0:0=
    14 лет назад

    Эммм… поспешил, всё равно не работает ((

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