В bootstrap есть отличные nav-tabs и nav-pills которые работают через
data-toggle="tab" создаётся пара секций:
... другие секции ...
И всё прекрасно, даже есть fade класс который добавляется в атрибут tab-pane чтобы переключение между вкладок было плавное, но когда много закладочек, и их высота сильно разнится, особенно превышая стандартную высоту вьюпорта, контент заметно подпрыгивает на переключениях из за резкозти смены размера контента, так-же в bootstrap есть такая вещь как accordion с классом collapse который делает плавно сворачивающиеся панельки между которыми можно переключаться, например вот такие: http://www.tutorialrepublic.com/codelab.php?topic=bootstrap&file=accordion
Поскольку я не мастер вёрстки и js а только учусь, подскажите, как можно добавить свёртывание развёртывание контента, но в эти вот nav-tabs / nav-pills ?
Поскольку я провёл не один день в попытках найти что-то такое в гоголе и яндуксе, всё что я нашёл это https://css-tricks.com/organic-tabs/ они то как раз делают что надо, но хотелось бы не городить так много всего, а попробовать реализовать это дело максимально функционалом bootstrap и минимально jQuery.
Я также пробовал добавлять класс "collapse in" в активную и "collapse" в остальные вкладки и менять data-toggle на collapse как в аккордионах, но вкладки перестают реагировать на нажатия.
Подскажите люди добрые как-же победить этот вопрос?
Благодарю за внимание.
Ответ
Задача: Построить закладки tabs или таблетки pills с эффектом сворачивания и разворачивания как у аккордеона. При этом обойтись штатными средствами бутстрапа, не дописывая свои скрипты и не добавляя чужие.
Решил в три этапа. Код в конце ответа показывает результаты всех трёх этапов.
1) Будем строить таблетки, потому что они ярче :) Начинаем строить не от таблеток к аккордеону, а от аккордеона к таблеткам. Берём из описания бутстрапа пример с аккордеоном и переставляем фрагменты кода, чтобы из трёх панелей получилось две. В верхнюю собираем все три заголовка, а в нижнюю - тексты к ним.
2) Скрещиваем заголовки
с таблетками из другого примера бутстрапа
и получаем
3) Чтобы активная таблетка выделялась синим, нужно пристроить class="active" и data-toggle="tab". Первый атрибут относился к пункту списка
Результат
1)
2)
Anim pariatur cliche reprehenderit...
Anim pariatur cliche reprehenderit...
Anim pariatur cliche reprehenderit...
Anim pariatur cliche reprehenderit...
Anim pariatur cliche reprehenderit...
Anim pariatur cliche reprehenderit...
3)
Anim pariatur cliche reprehenderit...
Anim pariatur cliche reprehenderit...
Anim pariatur cliche reprehenderit...
Anim pariatur cliche reprehenderit...
Anim pariatur cliche reprehenderit...
Anim pariatur cliche reprehenderit...
Можно посмотреть живьём и в песочнице
Комментариев нет:
Отправить комментарий