PHP.SU

Программирование на PHP, MySQL и другие веб-технологии
PHP.SU Портал     На главную страницу форума Главная     Помощь Помощь     Поиск Поиск     Поиск Яндекс Поиск Яндекс     Вакансии  Пользователи Пользователи


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

> Без описания
android
Отправлено: 19 Февраля, 2012 - 16:22:24
Post Id


Посетитель


Покинул форум
Сообщений всего: 335
Дата рег-ции: Сент. 2011  


Помог: 0 раз(а)




Спойлер (Отобразить)


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

html+css+js

Можете показать пример?
 
 Top
IllusionMH
Отправлено: 19 Февраля, 2012 - 16:38:20
Post Id



Активный участник


Покинул форум
Сообщений всего: 4254
Дата рег-ции: Февр. 2011  
Откуда: .kh.ua


Помог: 242 раз(а)




android, если простой пример, то можно глянуть здесь
 
 Top
Михаил
Отправлено: 19 Февраля, 2012 - 17:57:26
Post Id



Гость


Покинул форум
Сообщений всего: 112
Дата рег-ции: Июнь 2010  
Откуда: Армавир, Россия


Помог: 0 раз(а)




Можно использовать JQuery UI
Посмотреть пример и скачать можно здесь
 
 Top
illy
Отправлено: 19 Февраля, 2012 - 19:16:33
Post Id



Участник


Покинул форум
Сообщений всего: 1119
Дата рег-ции: Июль 2011  
Откуда: от верблюда)


Помог: 28 раз(а)




можно просто на javascript


-----
Всё гениальное - просто
И ещё проще, если ты - индиго
 
 Top
IllusionMH
Отправлено: 19 Февраля, 2012 - 19:56:09
Post Id



Активный участник


Покинул форум
Сообщений всего: 4254
Дата рег-ции: Февр. 2011  
Откуда: .kh.ua


Помог: 242 раз(а)




illy, можно без js, через чекбокс/рабиобатон хак(но тогда нужно подумать как активную вкладку выделить и IE9+)


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


Посетитель


Покинул форум
Сообщений всего: 335
Дата рег-ции: Сент. 2011  


Помог: 0 раз(а)




всем спасибо.

А сверстать такие вкладки можно? Именно с изгибами...
 
 Top
Viper
Отправлено: 20 Февраля, 2012 - 16:15:08
Post Id



Активный участник


Покинул форум
Сообщений всего: 4556
Дата рег-ции: Февр. 2007  
Откуда: Симферополь


Помог: 98 раз(а)




android пишет:
А сверстать такие вкладки можно? Именно с изгибами...
Можно. Если на css то не будут работать в IE6/7, если картинками то будут.

Изобретателям велосипедов почет и уважение Улыбка


-----
Список фильмов с описанием, блекджеком и... для Joomla? -> https://киноархив[dot]com
Демо нового движка для сайта php.su -> php[dot]su, проект на гитхабе
 
 Top
IllusionMH
Отправлено: 20 Февраля, 2012 - 16:20:55
Post Id



Активный участник


Покинул форум
Сообщений всего: 4254
Дата рег-ции: Февр. 2011  
Откуда: .kh.ua


Помог: 242 раз(а)




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

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

Но есть решение по-проще - картинки.
 
 Top
Страниц (1): [1]
Сейчас эту тему просматривают: 1 (гостей: 1, зарегистрированных: 0)
« HTML, Дизайн & CSS »


Все гости форума могут просматривать этот раздел.
Только зарегистрированные пользователи могут создавать новые темы в этом разделе.
Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.
 



Powered by PHP  Powered By MySQL  Powered by Nginx  Valid CSS  RSS

 
Powered by ExBB FM 1.0 RC1. InvisionExBB