Автоматическая "газетная" верстка (верстка в несколько колонок)
Ромка — Пт, 09/05/2008 - 14:35
Выглядит это так:
Lorem ipsum ne justo
Bonorum has. His ut cibo quas tantas, vis ut probo adhuc definiebas, has at meis debet vulputate. No sed velit essent suavitate, in pro decore ceteros temporibus, usu in odio offendit theophrastus. Mel labore indoctum cu, ad soleat admodum delicatissimi sed, mei viris tritani ullamcorper eu. Ut vim simul aperiam.
Eu eleifend repudiandae has. Mea eu ridens aliquam. Nisl aeque sit ut, posse dolor utinam cum in. Ad timeam sapientem eos, et eripuit inermis nam. Eos integre voluptaria ne, iriure concludaturque ut eum.
Vis erant intellegat in. Soleat legere no ius, usu ex laoreet molestie. Sit eu sint inermis. Ea zzril scribentur pro.
Tempor essent appetere
Ius mutat commune expetendis in. Nam et quas sensibus reprimique, vix no erat soluta suavitate. At mel eius dictas latine. Corrumpit inciderint reformidans sed no, no usu omnis utinam noluisse.
Sit et, an ius nihil apeirian. Eu posse tempor iuvaret cum. No diam dolor sea, postea mnesarchum ne ius, vel no utinam ignota dolores. Malis suscipit accusamus his ne, utinam assentior prodesset ea eam, facer partem antiopam et cum.
Probo debet quaestio an eos, no mel assum iracundia delicatissimi, rebum facete utroque sed ex. Eu melius invidunt repudiandae vix, eu paulo reformidans deterruisset duo, solum voluptaria efficiantur ea mel. Qui summo zzril alienum et. Eu est ferri iuvaret, mazim epicurei sententiae ut cum, modo reque intellegat ex vix. Vim eu tibique accusamus, quot electram at qui.
Ex iisque eleifend periculis has. Sit aeterno virtute partiendo ei, eam nonumy bonorum adolescens ad. Ut nec suas vocent ornatus, cetero legendos constituam mea ea, pri cu delenit iracundia. Mundi decore nec te.
Soleat civibus in pri
In petentium erroribus percipitur per. Takimata accommodare ius ut, eam no postulant urbanitas. Qui ei tantas consectetuer, quis dictas euripidis duo ei. Quaeque democritum concludaturque has ne.
Blandit insolens constituto vix an. Has diam wisi in, eum unum repudiare no. Sit at virtute rationibus, qui vitae explicari cu. Vim ne singulis voluptatum, sed puto accusata salutandi ei. Ad mel civibus adversarium.
Per ne solum vivendo, fabulas dolorem vivendo in pro. Nec duis ignota cotidieque no, an per possit nostrum. Pro detraxit definitionem eu. Vivendo officiis no nam, eu has reque maiestatis percipitur, dolore reprimique accommodare cum ad. No utinam voluptua oportere pri, augue sonet dicant ei sea.
Sit et, an ius nihil apeirian. Eu posse tempor iuvaret cum. No diam dolor sea, postea mnesarchum ne ius, vel no utinam ignota dolores. Malis suscipit accusamus his ne, utinam assentior prodesset ea eam, facer partem antiopam et cum.
Для того чтобы добиться такого эффекта, необходимо скачать и подключить библиотеку jQuery и плагин Columnizer, а также файл с настройками:
<?php
<script src="jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="autocolumn.min.js" type="text/javascript" charset="utf-8"></script>
<script src="autocolumn.settings.js" type="text/javascript" charset="utf-8"></script>
?>Затем обернуть необходимый текст в слой (или параграф) с определенным классом, например "column":
<?php
<div class="column">
<h1>Lorem ipsum ne justo</h1>
<p>Bonorum has. His ut cibo quas tantas, vis ut probo adhuc definiebas, has at meis debet vulputate. No sed velit essent suavitate, in pro decore <a href='javascript;'>ceteros temporibus</a>, usu in odio offendit theophrastus. Mel labore indoctum cu, ad soleat admodum delicatissimi sed, mei viris tritani ullamcorper eu. Ut vim simul aperiam.</p>
<p>Eu eleifend repudiandae has. Mea eu ridens aliquam. Nisl aeque sit ut, posse dolor utinam cum in. Ad timeam sapientem eos, et eripuit inermis nam. Eos integre voluptaria ne, iriure concludaturque ut eum.</p>
</div>
?>В файле autocolumn.settings.js необходимо прописать на сколько колонок должен быть разбит текст в контейнере с классом "column":
<?php
$(function(){
$('.column').columnize({columns:2});
});
?>Всё, теперь весь текст, который находится внутри слоя "column" будет разбит на 2 колонки. Таких контейнеров на странице может быть несколько.
Для того чтобы при маленьких размерах окна строка с текстом не была слишком короткой (оптимальной длиной строки считается размер в 45-76 символов) можно указать минимальную ширину для колонки:
<?php
$(function(){
$('.column').columnize({columns:2, width: 300});
});
?>Если в разных местах страницы нужно бить текст на разное количество колонок, то в файле autocolumn.settings.js достаточно добавить необходимые настройки, например:
<?php
$(function(){
$('.column-2').columnize({columns:2});
$('.column-3').columnize({columns:3});
});
?>Теперь в слоях с классом column-2 текст будет автоматически разбиваться на 2 колонки, а в слоях с классом column-3 — на 3.
Всем привет!
красиво, но буду разбираться
Виктор (не проверено) → Втр, 12/30/2008 - 18:24красиво, но буду разбираться с кодом. имхо сильно тяжело -нужно таких столбцов 3-5 и текста побольше!
Подключение jQuery
Виталий (не проверено) → Втр, 01/13/2009 - 06:03Довольно-таки интересный эффект, только вот не могу понять как все это подключить, чтобы работало.
Не пойму в чем проблема?
Ромка → Втр, 01/13/2009 - 11:54Не пойму в чем проблема? В тексте описана полная последовательность действий для достижения нужного эффекта:
Подключение jQuery
Виталий (не проверено) → Ср, 01/14/2009 - 06:28Вы меня извините, я может быть не много туплю (а может и много), но как подключить все это дело к странице?
Никак
Аноним (не проверено) → Чт, 01/15/2009 - 16:48лучше и не пытайтесь, моск сломаете)))
А по-делу: почитайте сначала ичебники по HTML, Java-script.
И только потом читайте статьи такой тематики...
PS каптча ужасна, раза с пятого ввел
Слушайте, очень круто! А есть
Freakachoo (не проверено) → Сб, 04/04/2009 - 14:28Слушайте, очень круто!
А есть ли какой способ еще плюс к разбиению на колонки, разбить на страницы, с переключением между ними посредством Ajax-а?
(это у меня такая задача под Drupal-ом стоит)
Я похожее делал для с этим
dimasikov (не проверено) → Вс, 01/29/2012 - 17:42Я похожее делал для с этим плагином для модуля онлайн чтения книг. Вот ссылка.
Модуль разбивает текст сначала на колонки, потом на страницы. Правда для перелистывания использовал слайдер а не AJAX.
Отличный плагин
Максим (не проверено) → Ср, 08/12/2009 - 15:54Отличный плагин, но есть существенный недостаток: колонкам нельзя явно задавать отступ друг от друга. Как бы это обойти?
Там все отлично продуманно,
Филипп (не проверено) → Ср, 12/08/2010 - 14:10Там все отлично продуманно, плагин же присваивает каждой колонке класс "column", а первой и последней соответственно "first" и "last". Используйте это в css...
подскажите, пожалуйста
Alena (не проверено) → Ср, 03/17/2010 - 18:20Плагин нужный, спасибо!
Вот только хотела спросить, в моем случае нужно что бы было 2-е колонки, это получилось.
Вы написали "можно указать минимальную ширину для колонки" это, я так поняла, для случая если не указано на какое кол-во столбцов нужно делить?
Но вопрос чуток в другом. Смотрю в код и вижу, что плагин разделил текст на две колонки и у каждой width:48%, вопрос, мне нужно, что бы было width:50%, подскажите пожалуйста как этого добиться?
в ие не пашет (а жаль)
bahuzz (не проверено) → Чт, 05/27/2010 - 21:47кто бы его еще под ие заточил?
p.s. каптча и правда не фонтан
аспекти лікування медичні
Anonymous (не проверено) → Пт, 06/04/2010 - 15:24аспекти лікування медичні статті география индии климат индии космонавтика астрономія советы путешественникам размещение, гостиницы seropol5
с
Артемий «delete... → Пт, 07/16/2010 - 19:36с
Подскажите пожалуйста, а нет
Anonymous (не проверено) → Ср, 07/21/2010 - 14:16Подскажите пожалуйста, а нет ли модуля с поддержкой этого скрипта для views
установка
Вася Пупкин → Втр, 12/21/2010 - 11:38что-то я так и не понял куда в друпале можно подключить jquery.js если в папке misc, просто заменить этот файл на новую версию с имеющейся 1,2 то потом проблем с виевс не обобраться если обновлять модулем jquery_update та он не воспринимает новых версий. А куда еще положить байткод jquery.js непонятно.
О! все разобрался тут друпал вообще не причем. А вот теперь интересная идея появилась - как бы эту всю красоту загнать в блок созданный views и потом чтобы views раскидывал на страницы.
Re: Информации, думаю, итак
Меховщиков Руслана → Пт, 06/10/2011 - 02:18Информации, думаю, итак достаточно, чтобы сделать вывод, как не надо делать.
Автоматическая "газетная" верстка (верстка в несколько колонок)
Franky (не проверено) → Чт, 08/04/2011 - 03:45Большое спасибо Роман! Скрипт подключился за пару секунд, работает отлично! Успехов Вам в работе!!! =)
Отправить комментарий