Текст в несколько колонок с помощью jQuery
Предположим, у нас есть ненумерованный список, содержание которого нам нужно вывести на страницу тремя колонками. Первое, что приходит на ум - разбить содержимое на три списка, с равным количеством пунктов и с помощью css свойства float, или dispaly:inline-block выстроить их друг за другом.
Создадим html разметку:
<div class="ul_block">
<ul>
<li>Первый пункт первой колонки.</li>
<li>Второй пункт первой колонки.</li>
<li>Третий пункт первой колонки.</li>
<li>Четвертый пункт первой колонки.</li>
<li>Пятый пункт первой колонки.</li>
</ul>
<ul>
<li>Первый пункт второй колонки.</li>
<li>Второй пункт второй колонки.</li>
<li>Третий пункт второй колонки.</li>
<li>Четвертый пункт второй колонки.</li>
<li>Пятый пункт второй колонки.</li>
</ul>
<ul>
<li>Первый пункт третьей колонки.</li>
<li>Второй пункт третьей колонки.</li>
<li>Третий пункт третьей колонки.</li>
<li>Четвертый пункт третьей колонки.</li>
<li>Пятый пункт третьей колонки.</li>
</ul>
</div>
Теперь придадим нашим спискам должный вид при помощи стилей:
.ul_block {
padding-bottom:20px; /*отступ снизу*/
width:100%; /*указываем общую ширину блока с колонками*/
float:left; /*что бы блок охватывал свое содержимое*/
}
.ul_block ul {
paddinf:0 10px 0 0; /*отступ между колонками*/
width:200px; /*ширина колонок*/
float:left; /*выстраиваем колонки друг за другом*/
}
.ul_block li {
line-height:1.8em; /*расстояние между пунктами*/
}
Смотрим на результат:
Демо пример приведенного выше кода
- Первый пункт первой колонки.
- Второй пункт первой колонки.
- Третий пункт первой колонки.
- Четвертый пункт первой колонки.
- Пятый пункт первой колонки.
- Первый пункт второй колонки.
- Второй пункт второй колонки.
- Третий пункт второй колонки.
- Четвертый пункт второй колонки.
- Пятый пункт второй колонки.
- Первый пункт третьей колонки.
- Второй пункт третьей колонки.
- Третий пункт третьей колонки.
- Четвертый пункт третьей колонки.
- Пятый пункт третьей колонки.
Вроде все красиво, но что делать если списки должны постоянно пополняться, причем, пункты могут добавляться хаотично в любую из колонок? Можно, конечно, вносить каждый раз правки вручную, но на мой взгляд такой подход неоправданно трудоемкий и неудобный. На одном из сайтов я наткнулся на вариант, который заслуживает внимания. Автор, спасибо ему за труд, предлагает решить проблему за счет небольшого jQuery скрипта.
Разметку изменим, загнав все данные вместо трех списков в один и добавим этому списку класс:
<div class="ul_block">
<ul>
<li>Первый пункт первой колонки.</li>
<li>Второй пункт первой колонки.</li>
<li>Третий пункт первой колонки.</li>
<li>Четвертый пункт первой колонки.</li>
<li>Пятый пункт первой колонки.</li>
<li>Первый пункт второй колонки.</li>
<li>Второй пункт второй колонки.</li>
<li>Третий пункт второй колонки.</li>
<li>Четвертый пункт второй колонки.</li>
<li>Пятый пункт второй колонки.</li>
<li>Первый пункт третьей колонки.</li>
<li>Второй пункт третьей колонки.</li>
<li>Третий пункт третьей колонки.</li>
<li>Четвертый пункт третьей колонки.</li>
<li>Пятый пункт третьей колонки.</li>
</ul>
</div>
В head страницы подключим библиотеку jQuery и активируем скрипт:
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
(function($) {
$(function() {
$('.ul_block').autocolumnlist({
columns: 3, /*устанавливаем количество колонок*/
min: 5 /*устанавливаем количество строк в каждой колонке*/
});
})
})(jQuery)
</script>
</head>
Создадим файл с расширением js, например multicolum.js и пропишем туда следующие строки:
(function($) {
var defaults = { /*значения по умолчанию (если при вызове скрипта не указывалось никаких параметров)*/
columns: 4,
classname: 'column', /*класс для обертки колонок*/
min: 1
};
$.fn.autocolumnlist = function(params){
var options = $.extend({}, defaults, params);
return this.each(function() {
var els = $(this).find('li, p');
var dimension = els.size();
if (dimension > 0) {
var elCol = Math.ceil(dimension/options.columns);
if (elCol < options.min) {
elCol = options.min;
}
var start = 0;
var end = elCol;
for (i=0; i<options.columns; i++) {
// Add "last" class for last column
if ((i + 1) == options.columns) {
els.slice(start, end).wrapAll('<div class="'+options.classname+' last" />');
} else {
els.slice(start, end).wrapAll('<div class="'+options.classname+'" />');
}
start = start+elCol;
end = end+elCol;
}
}
});
};
})(jQuery);
Не забываем прописать путь к созданному js файлу в секции head.
Поскольку скрипт вносит изменения в разметку, CSS тоже нужно слегка изменить.
.ul_block {
padding:20px 0;
width:100%;
float:left;
}
.ul_block ul {
margin:0;
padding:0;
width:100%;
float:left;
list-style:none;
}
.ul_block .column { /*класс, добавляемый в результате работы скрипта*/
padding-left:15px;
width:200px;
float:left;
}
.ul_block li {
line-height:1.8em;
}
Результат работы скрипта радует, но не долго.
Демо пример приведенного выше кода
- Первый пункт первой колонки.
- Второй пункт первой колонки.
- Третий пункт первой колонки.
- Четвертый пункт первой колонки.
- Пятый пункт первой колонки.
- Первый пункт второй колонки.
- Второй пункт второй колонки.
- Третий пункт второй колонки.
- Четвертый пункт второй колонки.
- Пятый пункт второй колонки.
- Первый пункт третьей колонки.
- Второй пункт третьей колонки.
- Третий пункт третьей колонки.
- Четвертый пункт третьей колонки.
- Пятый пункт третьей колонки.
Если посмотреть на исходный код, то обнаружится следующая проблема. Скрипт отсчитывает указанное в настройке количество строк и оборачивает их в div. Такой код немного режет глаз, но как ни странно валидатор не ругается. Если все же хочется сделать все тип-топ, то, как вариант, вместо списков можно использовать абзацы.