Плагин на jQuery для создания нескольких блоков одной высоты

11 Дек
2011

Работаю я верстальщиком, и в очередной раз попалась верстка интернет магазина.
Основная проблема была в блоках с товарами, тут была задача не столь специфичная сколь специфичный был под нее дизайн. В одну линию стоят три блока, блоков может быть сколь угодное количество, блоки имеют бордер, в каждом блоке содержится информация о товаре, а в самом низу блока его цена, причем все блоки из за разного количества описания имеют разную высоту. Но блоки которые на одной линии должны быть одной высоты.

В общем кто понял, хорошо, кто не понял не столь важно. Суть вот в чем, эту задачу можно реализовать только таблицами, из за того что блоки на одной линии должны иметь одинаковую высоту, а цена всегда должна быть в самом низу. Но таблицами тоже не так все просто, так как цена в самом низу, то просто задать бордер между td не выйдет, он будет двоится, плюс между ячейками нужен отступ. В общем задача с первого взгляда простая, вышла боком из за ограниченности возможностей css, а точней не поддержкой css3 старыми браузерами и ie. И так пришла идея написать простой плагин, с одной настройкой,- количество блоков в строке.

О самом плагине


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

Подключение плагина:

Html:

 Lorem ipsum dolor sit...
...

...magna aliqua.



Необходимый стиль:

 .clear {clear: both;}


Скрипт:

$(function(){
$('.boxes .box').tableDiv({ td:4 //количество блоков на линии });
})


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

Конечно же пример можно посмотреть

тут


Сам плагин скачать

тут



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

PS: я как верстальщик очень надеюсь что данный мини плагин понравится моим коллегам.
По материалам Хабрахабр.



загрузка...

Комментарии:

Наверх