jQuery UI: Tabs below content

Похоже открывается очередной сезон этого блога. И вот я вчера приготовил статью про табики, я всего лишь хотел сделать их снизу, и выложить пример даже без объяснения, но все серьезно затянулось и сейчас вам предстоит прочитать достаточно много текста.

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

Основная идея примера из мануала: чтобы на одной и той же разметке можно было сделать табики и сверху и снизу. Это очень хорошая идея но мне явно не подходила. Вкратце табики выглядят так: общий контейнер, в нем сверху UL с закладками, снизу — DIV с контентом. Это верно как для разметки так и для отображения. Для табиков снизу разметка та же, но табики имеют position:absolute и bottom:0 . Казалось бы все должно работать, НО есть одно НО, и это не IE! Это как не странно WebKit. Все размерности в JQuery UI указаны в EM, что бы все одинаково хорошо смотрелось с любым размером текста, так вот при переходе из EM (да в общем и из остальных относительных величин) в PX, WebKit округляет числа в большую сторону, тогда как все остальные в меньшую, или подгоняют. Об этом еще Resig писал в далеком 2008 году. При таком подходе прижатые к низу табики налазят на текст на 1-2PX. Это совершенно не волнует пример в мануале, потому что текст там не имеет бордера и заранее короче на несколько пикселей, так что между ним и прижатыми табами есть зазор. Ради красоты пришлось пожертвовать первоначальной разметкой, перенеся табики под текст. Хотя по моему вообще это не принципиально, потому что я сделал это скриптом, да и вернуть их тоже не проблема.

Вторая проблема это !important. ежупанятна что универсальность в таком большом CSS framework требует перекрывать что-то, что было написано позже, тем что было написано раньше. Тут кроется проблема всего framework. Я свято уверен что классы типа ui-state-[default|hover|active] не должны определять толщину и тип бордера, а только цвет, потому что потом надо городить огороды. В своем маленьком примере я это поправил.

Ну и последние, надо открывать таб по урлу. Как бы самое обычное дело, но предусмотрено в документации только через куки, а если руками указывать то надо знать индекс таба а не скажем его ID. С этой маленькой гадкой проблемой я тоже очень элегантно справился двумя строками кода.

1

2

3

4

5

7 Комментарии “jQuery UI: Tabs below content

  1. либо ты слишком рано посмотрел, либо что-то не догрузилось. Я проверял во всех браузерах — работает

  2. я честное слово заебался воевать с автоформатингом WP, перехожу на Blogger после того как его обновят

  3. пофиксил, оказалось это плагин Google Analytics for WordPress. он мне уже второй раз работы на 2 часа подкидывает

  4. На блоггер разработчику переходить не стоит,будет много секаса с попытками вставить какой-либо пример реализации-)

Комментарии закрыты