...
...
... другие секции ...
И всё прекрасно, даже есть 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 как в аккордионах, но вкладки перестают реагировать
на нажатия.
Подскажите люди добрые как-же победить этот вопрос?
Благодарю за внимание.
Ответы
Ответ 1
Задача: Построить закладки tabs или таблетки pills с эффектом сворачивания и разворачивания
как у аккордеона. При этом обойтись штатными средствами бутстрапа, не дописывая свои
скрипты и не добавляя чужие.
Решил в три этапа. Код в конце ответа показывает результаты всех трёх этапов.
1) Будем строить таблетки, потому что они ярче :) Начинаем строить не от таблеток
к аккордеону, а от аккордеона к таблеткам. Берём из описания бутстрапа пример с аккордеоном
и переставляем фрагменты кода, чтобы из трёх панелей получилось две. В верхнюю собираем
все три заголовка, а в нижнюю - тексты к ним.
2) Скрещиваем заголовки
3) Чтобы активная таблетка выделялась синим, нужно пристроить class="active" и data-toggle="tab".
Первый атрибут относился к пункту списка
, а второй - к ссылке внутри этого пункта.
Но у ссылки уже есть data-toggle="collapse". Поэтому оба оставшихся атрибута назначаем
пункту списка.
Результат
Комментариев нет:
Отправить комментарий