Ромка!eu

  • Отдых
  • Работа
Главная — Блоги — Ромка's blog

Это старая (Drupal 6) версия сайта romka.eu. Она больше не обновляется, комментирование материалов отключено. Обновленная версия сайта доступна по адресу http://romka.eu.

Автоматическая "газетная" верстка (верстка в несколько колонок)

Ромка — Пт, 09/05/2008 - 14:35

Наткнулся на еще один очень интересный плагин Columnizer для библиотеки jQuery, который позволяет автоматически форматировать текст в "газетном" стиле, то есть разбивать его на несколько колонок.

Выглядит это так:

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.
  • jquery
  • верстка в несколько колонок
  • газетная верстка
  • журнальная верстка
  • Штуки-дрюки
  • Ромка's blog

красиво, но буду разбираться

Виктор (не проверено) → Втр, 12/30/2008 - 18:24

красиво, но буду разбираться с кодом. имхо сильно тяжело -нужно таких столбцов 3-5 и текста побольше!

Подключение jQuery

Виталий (не проверено) → Втр, 01/13/2009 - 06:03

Довольно-таки интересный эффект, только вот не могу понять как все это подключить, чтобы работало.

Не пойму в чем проблема?

Ромка → Втр, 01/13/2009 - 11:54

Не пойму в чем проблема? В тексте описана полная последовательность действий для достижения нужного эффекта:

  • скачиваете jQuery и плагин autocolumn;
  • подключаете эти файлы к странице;
  • создаете файл с настройками из примера и тоже подключаете его к странице;
  • нужный текст оборачиваете дивом с классом, указанном в настройках;

Подключение 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

Большое спасибо Роман! Скрипт подключился за пару секунд, работает отлично! Успехов Вам в работе!!! =)

Обо мне

Всем привет!
Меня зовут
Роман Архаров, я профессиональный веб-разработчик, программирую на языках PHP, Python и Action-Script, в работе использую фреймворки Drupal и Django. В этом блоге я размещаю заметки и статьи, связанные с моей работой, отдыхом и другими интересными мне темами.

Похожие заметки

  • Перетаскивание строк таблицы. Table drag and drop — плагин для jQuery
  • Вращение изображений при помощи Javascript
  • Получение заголовков (HTTP-headers) страницы при помощи Java-script
  • Tagnetic — холодильник тэгов
  • Баг jQuery в Firefox 3 и WebKit

Популярные заметки

  • Авторизация на Drupal-сайте с помощью аккаунта ВКонтакте
  • Перетаскивание строк таблицы. Table drag and drop — плагин для jQuery
  • Темизация Drupal. Часть 3. Основы Drupal Forms API и темизация форм
  • Темизация Drupal. Часть 4. Темизация Views
  • AJAX. Обмен данными между клиентом и сервером, закачка на сервер файлов без перезагрузки страницы при помощи библиотеки jQuery.
  • Кеширование на Drupal-сайте. Сравнение встроенного в Drupal кеша, статического файлового кеша (модуль Boost) и Varnish
  • Тестирование модуля "Inner poll"
  • Несколько панорам из путешествия по Перу и Боливии
  • Arduino + bluetooth, небольшая проблема
  • Пример разработки плагина для модуля CCK

Подписка


Последние комментарии

  • drupal-admin → Кеширование на Drupal-сайте. Сравнение эффективности встроенного в Drupal кеша, статического файлового кеша (модуль Boost) и Var → Отличная статья
  • Меховщиков Руслана → Проверка имени пользователя на наличие букв из разных алфавитов → Re: Читал про это уже на
  • Вероника → Куба. Лето 2008. Часть 3 → По поводу "приветливых жителей" Тринидада
  • Sfero → Статья в PC Magazine/RE. Drupal: разработка модуля → Немного о контенте
  • RemaGe → Статья в PC Magazine/RE. Drupal: разработка модуля → -)
  • Ромка → Статья в PC Magazine/RE. Drupal: разработка модуля → Да, будет сборка, та которую
  • RemaGe → Статья в PC Magazine/RE. Drupal: разработка модуля → -)
  • anatinge → Поездка в Киев → спасибо :)
  • Ромка → Поездка в Киев → Да, в общем-то, ничего
  • GogA → Поездка в Киев → Заинтриговал, что там за

Новые заметки

  • Кеширование на Drupal-сайте. Сравнение встроенного в Drupal кеша, статического файлового кеша (модуль Boost) и Varnish
  • Любопытное поведение модуля syslog в шестом Друпале (баг?)
  • Arduino + bluetooth, небольшая проблема
  • Гугл 1 марта прекратил поддержку сервиса Google Friend Connect
  • Проба пера в HTML5 + canvas. Эффект ластика
  • Шесть рукопожатий
  • Доклад на DrupalConfMoscow 2011
  • Статусы разных сущностей в Друпале 6
  • Футер, прибитый к низу страницы
  • Путешествие по Перу и Боливии. Часть 2

Тэги

Drupal jquery Куба Лето 2007 Лето 2008 Отдых Работа Штуки-дрюки лето модуль статья цитата
еще тэги

Навигация

  • Exchange rate
  • Переход по внешней ссылке
  • Последние сообщения
  • Фотогалереи

Курсы валют

  • 100 Казахстанских тенге — 21,3687 (-0.43)
  • 10 Украинских гривен — 27,2852 (-13.04)
  • 1 Китайский юань — 10,2706 (-40.98)
  • 100 Японских иен — 53,5332 (+12.67)
  • 1 Доллар США — 65,6210 (+33)
  • 1 Евро — 69,8076 (+29.42)
  • 10000 Белорусских рублей — 36,3310 (-2.51)
  • 1 Турецкая лира — 22,9540 (+4.99)

10 случайных заметок

  • Небольшой отчет о прошедшем первом Российском семинаре по CMS Drupal
  • Швабрашвабр.ру — пример коллективного блога с элементами соц сети, построенный на CMS Drupal
  • Home sheep home
  • Второе имя, middle name
  • Семинар по хапкидо в Днепропетровске
  • Кеширование на Drupal-сайте. Сравнение встроенного в Drupal кеша, статического файлового кеша (модуль Boost) и Varnish
  • У быдла есть особенность
  • Куба, остров Святой Марии.
  • Проба пера в HTML5 + canvas. Эффект ластика
  • Любопытное поведение модуля syslog в шестом Друпале (баг?)

Случайные фото

Это я по дороге из Буканеро в Баракоа
Красная поляна
Вид на Мраморную церковь с площади Амалиенборг
Еще одно фото резиденции короля
Оригинальная дорожная разметка в Гаване
Еще одно фото замка
Я, какой-то дед и местные детишки
Вид на Осло из замка Акерхус
Гонщик
А это уже полуостров Крым, на пути в Керчь.
Осло, Карл Юхан Гате
Я и кокос... Где то я это уже видел...
В аэропорту
Насыпь между Кайо Санта Мария и Кубой
Бронзовое море
Типичная местная женщина
  • Отдых
  • Работа

При использовании материалов с сайта, пожалуйста, ставьте ссылку на источник. E-mail для связи: mne@romka.eu.