Вертикальные вкладки

[monkeymafia]

Доброго всем дня, мальчики и девочки.

Собственно выше показана верстка. Как видите слева находится UnsortedList (UL) - сверху вниз идут элементы списка . Они будут выполнять роль вкладок. Справа расположен текст + изображение (собственно контент отражающий смысл вкладки).

Я вижу 2 варианта реализации данного элемента :

а) загрузка информации из базы при помощи php. User кликает по элементу списка, JS меняет стиль списка на активный (белый с закруглением). В это время из нужной записи загружается текст и изображение.

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

Первый вопрос :

Какой из вариантов посоветуете и почему? Может есть еще варианты?

Второй вопрос :

Как реализовать вариант б малой кровью? Я по поиску находил множество вариантов, но обычно все вкладки идут по верху, а смена стилей под себя дело геморное, особенно если там на 200 строк стилей!

[Searcher]

Как-то вы не совсем понятно описали варианты, что-то вы там напутали. Вариантов может быть как-минимум 3. И вобщем не важно откуда вы там информацию будете брать, из БД или из файлов, на решении данной задачи это никак не влияет.

1. При нажатии на пункт перезагрузка всей страницы с новыми данными, страница на php, и смена стиля текущего элемента реализовывается там элементарно.

2. Если подключить JQuery, то можно воспользоваться возможностью этого пакета подгружать с сервера данные в отдельные элементы без перезагрузки всей страницы. Стиль менять для нажатого пункта при помощи JS.

3. Загружать все данные сразу, располагать их в разных слоях, а при нажатии на пункт при помощи JS или JQuery показывать соответствующий слой и менять стиль текущего пункта.

[Searcher]

выбирайте из этих вариантов по своим знаниям, что лучше знаете, то и делайте

но если принципиально не нужна перезагрузка всей страницы, то 1-ый вариант исключается.

[monkeymafia]

вы правы - первые вариант = не вариант!

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

Меня вот что интересует, есть ли похожие JQuery решения моей проблемы. Те вкладки что я нашел и изменил мне не понравились. Я долго изменял стили и пришел в тупик...мне необходимо было контентный участок уменьшить до определенной ширины, область контента уменьшил, зато когда я менял ее фоновыф цвет - менялся цвет всей конструкции (точнее по всей ширине менялся цвет). Вобщем глупое косноязычное описание того, как это не получилось. Суть не в верстке - просто нужно нечто похожее, что я интуитивно смог бы переделать под свои нужды) Вот

[Searcher]

Я с фреймворками мало работал, не знаю, может и есть похожий модуль к JQuery... Но в принципе и самому не так сложно написать весь функционал, а от JQuery взять только подгрузку в блоки.

[slicemasta]

можно такое и без джс замутить а с помощью :hover и :focus для маньяков верстки, правда думаю будут некоторые ограничения.

[Searcher]

да, было, делал как-то с focus, но в данной ситуации плохо будет, если при любом клике на страничке будет возвращаться выделение к 1-му пункту...

[monkeymafia]

можно такое и без джс замутить а с помощью :hover и :focus для маньяков верстки, правда думаю будут некоторые ограничения.

Нет уж спасибо) Я хоть и маньяк - но не до такой степени! Посмотрим, что можно сделать...но если наткнетесь на JQ с похожим решеним...кидайте ссылку.

[hf3]

Здесь Jquery не нужен вообще то . Обычного ЖС хватит.

1)Загружать сразу все.

2) про нажатии на ссылку - у нее должен меняться бэкграунд, а в соседнем всем присваитваться дисплэй -ноне. или зедИндексами. Зед Индексами даже проще…

Или даже ещё проще включить белый фон под ссылкой в общий фон дива с контентом. и просто менять дивы.