Warning: Cannot use a scalar value as an array in /home/admin/public_html/forum/include/fm.class.php on line 757

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/include/fm.class.php on line 770
Форумы портала PHP.SU :: Версия для печати :: переключатель? Как такй сделать?
Форумы портала PHP.SU » Клиентская разработка » HTML, Дизайн & CSS » переключатель? Как такй сделать?

Страниц (1): [1]
 

1. android - 19 Февраля, 2012 - 16:22:24 - перейти к сообщению
Спойлер (Отобразить)


как же можно сделать переключеник таких вкладок с сменой контента?

html+css+js

Можете показать пример?
2. IllusionMH - 19 Февраля, 2012 - 16:38:20 - перейти к сообщению
android, если простой пример, то можно глянуть здесь
3. Михаил - 19 Февраля, 2012 - 17:57:26 - перейти к сообщению
Можно использовать JQuery UI
Посмотреть пример и скачать можно здесь
4. illy - 19 Февраля, 2012 - 19:16:33 - перейти к сообщению
можно просто на javascript
5. IllusionMH - 19 Февраля, 2012 - 19:56:09 - перейти к сообщению
illy, можно без js, через чекбокс/рабиобатон хак(но тогда нужно подумать как активную вкладку выделить и IE9+)


В моем примере использоват jQuery только потому, что это писалось под форумы mybb и ко., а там всегда jQ1.4.4 подключен
6. android - 20 Февраля, 2012 - 15:53:20 - перейти к сообщению
всем спасибо.

А сверстать такие вкладки можно? Именно с изгибами...
7. Viper - 20 Февраля, 2012 - 16:15:08 - перейти к сообщению
android пишет:
А сверстать такие вкладки можно? Именно с изгибами...
Можно. Если на css то не будут работать в IE6/7, если картинками то будут.

Изобретателям велосипедов почет и уважение Улыбка
8. IllusionMH - 20 Февраля, 2012 - 16:20:55 - перейти к сообщению
android, как сделать с изгибами под прямым углом подробно расписано
Tabs with Round Out Borders (на хабре можно поискать перевод)
А пологие с закруглениями(конкретно нижние закругления) - предыдущая техника уже не поможет. Псевдоэлементов не хватит, чтобы у пологой грани (треугольник рисуется двумя непрозрачными границами, в иннете полно инфы) добавить хвостик, который под скруглением.
Еще будет проблема позиционировать псевдоэлементы так, чтобы линия закругления сверху, плавно переходила в пологую часть, а потом снова в закругление.
Еще могут появится проблемы с тем, что псевдоэлемент который воном соседа убирает часть прямоугольника, может закрывать текст.
(Better) Tabs with Round Out Borders
Вот с этой техникой не разбирался, больше свободных псевдоэлементов, но тут останется проблема с переходом прямой в изгиб, и может даже сильнее выражается.

И естественно, старые браузеры не поддерживают скругления, а более старые - псевдоэлементы.

Но есть решение по-проще - картинки.

 

Powered by ExBB FM 1.0 RC1