SiteIS

jQuery - безграничные возможности в дизайне Вашего сайта!

- Один из самых популярных на сегодня среди веб разработчиков фреймворк

- Позволяет быстро и легко создать потрясающие веб-приложения

- Удивительно красивые анимационные эффекты

- Улучшение пользовательского интерфейса

Текст в несколько колонок с помощью 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. Такой код немного режет глаз, но как ни странно валидатор не ругается. Если все же хочется сделать все тип-топ, то, как вариант, вместо списков можно использовать абзацы.

Комментарии  

 
0 # MDani 09.06.2012 15:00
Спасибо за подробное разъяснение. А еще подскажите пожалуйста, как к списку добавить маркер?
Спасибо.
Ответить | Ответить с цитатой | Цитировать
 
 
+1 # Admin 09.06.2012 20:10
Приятно, что этот материал Вам помог.
Маркер к списку добавляется при помощи css свойства list-style. Подробнее об этом свойстве вы можете почитать в css справочниках, или обратиться к статье на этом сайте "Свойство list-style" (ссылка на статью: /css-svojstva/svojstvo-list-style).
Ответить | Ответить с цитатой | Цитировать
 
 
+2 # Сергей 25.01.2013 15:38
Скрипт очень помог, только вот в примере у вас код с ошибками — часть тегов вырезалась. Поэтому лучше сделайте ссылку на готовый js-файл.
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Admin 25.01.2013 22:36
Огромное спс за комментарий. Пересмотрел еще раз код и, к своему сожалению, откопал ошибки - и не одну. Все поправил, теперь можно пользоваться предоставленным в статье листингом. Еще раз огромное спс.
Ответить | Ответить с цитатой | Цитировать
 
 
0 # tatyana 05.03.2013 15:34
Спасибо огромное! очень удобная штука. :-)
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Рома 05.01.2014 08:35
Приетствую! Требуется на главной странице блога на wordpress сделать текст под картинками в 3 колонки. Вобшем в точности как тут. Имеется обычный редактор записей в котором я работаю в режиме html. Не могу разобраться, что нужно сделать чтоб текст отображался также как тут у вас. Я копирую все что тут есть для дальнейшего редактирования, но текст отображается одной колонкой во всю ширину страницы.
Пожалуйста, скинте полный код исходя из вашего примера который нужно вставить в редактор
Ответить | Ответить с цитатой | Цитировать
 
 
0 # admin 08.01.2014 10:32
Если я вас правильно понимаю, то вставлять в редактор в админ панели нужно только html разметку с текстом. Стили и скрипт требуется поместить в существующие для них файлы (которые уже подключены к движку), либо же создать отдельные файлы, поместить их на сервер и подключить к CMS.
Если у вас нет доступа к серверу, увы, к сожалению, сделать вы ничего не сможете.
Впрочем, я могу и ошибаться. Возможно для Wordpres существуют (даже наверняка есть) плагины, с помощью которых можно внедрить стили и скрипты из админки.
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Денис 22.05.2014 14:15
Дамс, вот подробное бы разьяснение в последнем скрипте, а то про стили рассказано,а про самое сложное нет, так не интересно,люблю разбирать скрипт хоть и чужой полностью, что б понятно было,а тут ни слова...
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Сервер 23.06.2014 16:49
Как сделать чтобы данный плагин начал работать с последней версией js? Т.к. он работает только с версией 1.4.4.
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Damian 04.10.2014 08:36
А как аналогично разбить на колонки просто текст по N строк?
Ответить | Ответить с цитатой | Цитировать