Для текущего проекта понадобился плагин для jQuery, который бы разделял список элементов на колонки. Да, есть несколько плагинов, которые это умеют, однако все они не подошли по тем или иным причинам. В результате, написал свой, заодно узнал как писать плагины для jQuery.
Самый лучший плагин такого типа это, пожалуй, Columnizer. Он предназначен, прежде всего, для разделения контента на колонки. То есть, основным приоритетом в нем является равная высота содержимого. А вот со списками у него получается намного хуже: зачастую данные размещены неравномерно, иногда появляются пустые колонки.
С другими плагинами совсем не сложилось, все они были намного хуже. В общем, написал свой, о чем сейчас и расскажу.
Основная идея: колонки должны быть примерно равные по высоте, т.е. во всех колонках (возможно, кроме последней) должно быть равное количество элементов.
Разметка простая, самое важное — это список:
<div class="list">
<h6>Рекомендуемые статьи:</h6>
<ol id="recommended">
<li><a href="#">Благодарность</a></li>
<li><a href="#">Фестиваль Орловская музыкальная осень</a></li>
<li><a href="#">Открытое письмо</a></li>
<li><a href="#">Виктор Калинников</a></li>
<li><a href="#">Свято-Никольская церковь г.Кромы</a></li>
<li><a href="#">Благодарность</a></li>
<li><a href="#">Фестиваль Орловская музыкальная осень</a></li>
<li><a href="#">Открытое письмо</a></li>
<li><a href="#">Виктор Калинников</a></li>
<li><a href="#">Свято-Никольская церковь г.Кромы</a></li>
</ol>
</div>
Далее, в разделе head страницы нужно подключить стили и скрипты:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script> <script src="jquery.autocolumnlist.js" type="text/javascript"></script>
И ниже вызов обработчика с параметрами:
<script type="text/javascript">
(function($) {
$(function() {
$('#selector').autocolumnlist({
columns: 5
});
})
})(jQuery)
</script>
Плагин принимает 3 параметра:
- columns — количество колонок, на которое нужно разделить список
- classname — класс, который нужно присвоить колонке, возможно указать несколько классов через пробел
- min — минимальное количество элементов в столбце
Если не указывать никаких параметров, то по-умолчанию количество колонок 4, класс — column, min — 1.
Все оформление через стили, так что какими будут списки зависит только от ваших потребностей. Плагин одинаково работает как с OL, так и с UL списками. Тестировался в IE6+ и современных версиях Firefox, Opera, Chrome. Думаю, что и в других версиях проблем быть не должно.
Учитывайте тот факт, что браузеры по-разному обрабатывают нумерованные списки. Например, IE и Opera разделяют нумерацию для каждой колонки, а Firefox и Chrome ведут общую для всего списка.
Changelog
- 29/03/2011 — Версия 1.0.2 Небольшая оптимизация кода, добавлена поддержка нескольких селекторов, для последней колонки добавляется класс last. Спасибо Михаилу Кобзареву за помощь в разработке.
- 28/01/2011 — Версия 1.0.1 Добавлена опция для задания минимального количества элементов в колонке. По-умолчанию, один элемент. Например:
$('#selector').autocolumnlist({ columns: 8, min: 2 }); - 05/01/2011 — Вышла версия 1.0
Смотрите ДЕМО или скачайте архив с примером.
Буду рад узнать ваше мнение и критику.
добрый день! все здорово работает, но что, если нужно разбить на колонки список, являющийся вложением, причем третьего уровня (в другие списки), например, в меню? пыталась и так и эдак, ничего не выходит.
вот пример в исходном виде:
pingmygod.narod.ru/menuTest.html
пункт «Статьи и переводы» --> Ностальгия обелисков --> и дальше.
Спасибо!
Вообще, плагин на такое просто не рассчитан, писалось для выполнения кокретной задачи, поэтому не может претендовать на универсальность.
эх! как жаль. а так чудно работает в принципе. спасибо!
Если заменить: var els = $(this).find ('li');
на: var els = $(« > ul > li», this);
то будет вроде то, что вы хотите.
Если this это # вышестоящего li
То есть раскладываться на колонки будет только один уровень, без следующих дочерних уровней.
PS: Спасибо за скрипт, очень помог!
спасибо! а я в тот же вечер нашла такое решение (возможно, неправильное, я полный ноль пока тут): div class заменить на ul class. По крайней мере, у меня сработало отлично и кроссплатформенно/кроссбраузерно:)
Спасибо, интересное решение.
Для того, чтобы работать с вложенными списками, я использовала вот такую конструкцию:
$('ul.topnav>li>div.sub>ul').each (function (n,element) {
$(element).autocolumnlist ()
});
То есть, для каждого вложенного подменю (sub) навигации (topnav) я применяла функцию autocolumnlist ().
Доработал ваш скрипт, добавив в опции margin, width и самое главное return
this.each(function() {, чтобы использовать плагин с несколькими селекторами, например$('ul.one, ul.two').autocolumnlist()Приятно, что скрипт востребован. А зачем margin и width? Лучше оформление выносить в css.
Я сам сторонник разделения логики и представления данных, но в данном случае пошел на поводу у товарища, который ни черта не соображает в HTML/CSS/JS, влепив все в один файл для простоты подключения. Он тупо не смог разобраться в движке с кэшированием и нашел только место, куда можно подключить JavaScript-файл.
Обновите скрипт для применения к нескольким селекторам:
return this.each(function() {}Вынес определение размерности в переменную для увеличения быстродействия:
var dimension = els.size();так как данная строка в коде встречается более одного раза.
Скиньте мне скрипт на почту neolot@gmail.com
Я посмотрю и выложу с ссылкой на вас.
Есть предложение использовать пользовательские атрибуты для внесения в них конфигурации, например:
А в чем разница? Только замусорится html-код, да и не валидно будет.
По новой спецификации код будет валидным! Если брать обратную совместимость, то вместо этих атрибутов можно использовать rel, перечислив в нем параметры через запятую, например.
Представьте ситуацию, когда вы не можете править JS-код сайта. Вы — редактор. И на одной из страниц вам нужно разместить 2 списка: один в 2 колонки, другой — в 3. Человеку будет достаточно прописать атрибуты для тега и все.
Если вы не против, я немного допилю код, а заодно изменю врапер на ins вместо div, чтобы избавиться от float: left; в пользу display: inline-block;
Во что увидел. Очень похоже
www.madeincima.it/downloa...asyListSplitter/
Спасибо большое! Очень пригодилось!