JQuery UI пример - сортировка (Сортируемый)
Используйте мышь, чтобы отрегулировать отсортированного списка или сетки элементов.
Для получения более подробной информации о взаимодействии сортируемого см API документации сортируемых виджетов (Сортируемый виджет) .
По умолчанию функция
Сортируемый функция включена по любому элементу DOM. Нажмите и перетащите указатель мыши в список элементов на новое место, то другие элементы будут автоматически скорректированы. По умолчанию сортируется каждая запись общий draggable атрибут.
<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
<Meta Charset = "UTF-8">
<Title> JQuery UI сортировки (Сортируемый) - функция по умолчанию </ title>
<Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
<Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
<Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
<Style>
#sortable {список стиле типа: нет; маржа: 0; обивка: 0; ширина: 60%;}
#sortable Li {маржа: 0 3px 3px 3px; обивка: 0.4em; обивка налево: 1.5em; размер шрифта: 1.4em; высота: 18px;}
#sortable пролет Li {позицию: абсолютная; маржа налево: -1.3em;}
</ Style>
<Script>
$ (Function () {
$ ( "#sortable") .sortable ();
$ ( "#sortable") .disableSelection ();
});
</ Script>
</ Head>
<Body>
<Ul ID = "сортировкой">
<Li класс = "Пользовательский интерфейс состояния по умолчанию"> <класс пролет = "UI-значок UI-значок-arrowthick-2-нс"> </ SPAN> Пункт 1 </ li>
<Li класс = "Пользовательский интерфейс состояния по умолчанию"> <класс пролет = "UI-значок UI-значок-arrowthick-2-нс"> </ SPAN> Пункт 2 </ li>
<Li класс = "Пользовательский интерфейс состояния по умолчанию"> <класс пролет = "UI-значок UI-значок-arrowthick-2-нс"> </ SPAN> Пункт 3 </ li>
<Li класс = "Пользовательский интерфейс состояния по умолчанию"> <класс пролет = "UI-значок UI-значок-arrowthick-2-нс"> </ SPAN> Пункт 4 </ li>
<Li класс = "Пользовательский интерфейс состояния по умолчанию"> <класс пролет = "UI-значок UI-значок-arrowthick-2-нс"> </ SPAN> Пункт 5 </ li>
<Li класс = "Пользовательский интерфейс состояния по умолчанию"> <класс пролет = "UI-значок UI-значок-arrowthick-2-нс"> </ SPAN> Пункт 6 </ li>
<Li класс = "Пользовательский интерфейс состояния по умолчанию"> <класс пролет = "UI-значок UI-значок-arrowthick-2-нс"> </ SPAN> Пункт 7 </ li>
</ UL>
</ Body>
</ HTML>
Список подключений
К connectWith пропускании вариант выбора , чтобы поместить список элементов в отсортированном списке к другой, и наоборот. Самый простой способ со списком всех соответствующих групп класса CSS, а затем передать класс к сортируемого функции (например, connectWith: '.myclass' ).
<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
<Meta Charset = "UTF-8">
<Title> JQuery UI сортировки (Сортируемый) - список соединение </ title>
<Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
<Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
<Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
<Style>
# Sortable1, # sortable2 {список стиле типа: нет; маржа: 0; обивка: 0 0 2.5em; флоат: слева; Правое поле: 10px;}
# Sortable1 Ли, # sortable2 Li {маржа: 0 5px 5px 5px; обивка: 5px; размер шрифта: 1.2em; ширина: 120px;}
</ Style>
<Script>
$ (Function () {
$ ( "# Sortable1, # sortable2") .sortable ({
connectWith: ".connectedSortable"
.}) DisableSelection ();
});
</ Script>
</ Head>
<Body>
<Ul ID = класс "sortable1" = "connectedSortable">
<Li класс = "UI-состоянии по умолчанию"> Пункт 1 </ li>
<Li класс = "UI-состоянии по умолчанию"> Пункт 2 </ li>
<Li класс = "UI-состоянии по умолчанию"> Пункт 3 </ li>
<Li класс = "UI-состоянии по умолчанию"> Пункт 4 </ li>
<Li класс = "UI-состоянии по умолчанию"> Пункт 5 </ li>
</ UL>
<Ul ID = класс "sortable2" = "connectedSortable">
<Li класс = "Пользовательский интерфейс-состояние-изюминка"> Пункт 1 </ li>
<Li класс = "Пользовательский интерфейс-состояние-изюминка"> Пункт 2 </ li>
<Li класс = "Пользовательский интерфейс-состояние-изюминка"> Пункт 3 </ li>
<Li класс = "Пользовательский интерфейс-состояние-изюминка"> Пункт 4 </ li>
<Li класс = "Пользовательский интерфейс-состояние-изюминка"> Пункт 5 </ li>
</ UL>
</ Body>
</ HTML>
Вкладка Список подключений
Размещая в верхней части элементов списка на соответствующей закладке, чтобы поместить список элементов в отсортированном списке к другой, и наоборот.
<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
<Meta Charset = "UTF-8">
<Title> JQuery UI сортировки (Сортируемый) - список подключения вкладка </ title>
<Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
<Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
<Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
<Style>
# Sortable1 Ли, # sortable2 Li {маржа: 0 5px 5px 5px; обивка: 5px; размер шрифта: 1.2em; ширина: 120px;}
</ Style>
<Script>
$ (Function () {
$ ( "# Sortable1, # sortable2") .sortable () disableSelection () .;
вар $ Вкладки = $ ( "#tabs") .tabs ();
переменная $ tab_items = $ ( "уль: первый ли", $ Вкладки) .droppable ({
принимаем: ".connectedSortable Ли",
hoverClass: "Пользовательский интерфейс состояния при наведении курсора",
падение: функцию (событие, Ui) {
переменная $ пункт = $ (это);
переменная $ список = $ ($ item.find ( "а") .attr ( "HREF"))
.find ( ".connectedSortable");
ui.draggable.hide ( "медленный", функция () {
$ Tabs.tabs ( "вариант", "активный", $ tab_items.index ($ пункт));
$ (Это) .appendTo ($ список) .show ( "медленные");
});
}
});
});
</ Script>
</ Head>
<Body>
<DIV ID = "Вкладки">
<Ul>
<Li> <a href="#tabs-1"> Nunc tincidunt </a> </ li>
<Li> <a href="#tabs-2"> Proin Dolor </a> </ li>
</ UL>
<DIV ID = "Вкладки-1">
<Ul ID = "sortable1" класс = "connectedSortable пользовательский интерфейс-хелперов-сброс">
<Li класс = "UI-состоянии по умолчанию"> Пункт 1 </ li>
<Li класс = "UI-состоянии по умолчанию"> Пункт 2 </ li>
<Li класс = "UI-состоянии по умолчанию"> Пункт 3 </ li>
<Li класс = "UI-состоянии по умолчанию"> Пункт 4 </ li>
<Li класс = "UI-состоянии по умолчанию"> Пункт 5 </ li>
</ UL>
</ Div>
<DIV ID = "Вкладки-2">
<Ul ID = "sortable2" класс = "connectedSortable пользовательский интерфейс-хелперов-сброс">
<Li класс = "Пользовательский интерфейс-состояние-изюминка"> Пункт 1 </ li>
<Li класс = "Пользовательский интерфейс-состояние-изюминка"> Пункт 2 </ li>
<Li класс = "Пользовательский интерфейс-состояние-изюминка"> Пункт 3 </ li>
<Li класс = "Пользовательский интерфейс-состояние-изюминка"> Пункт 4 </ li>
<Li класс = "Пользовательский интерфейс-состояние-изюминка"> Пункт 5 </ li>
</ UL>
</ Div>
</ Div>
</ Body>
</ HTML>
Отложенный старт
Задержка по времени задержки и расстояния для предотвращения случайного рода. При delay миллисекунд опция должна быть установлена перед началом сопротивления сортировки. По distance пикселей параметр должен быть установлен перед началом сопротивления сортировки.
<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
<Meta Charset = "UTF-8">
<Title> JQuery UI сортировки (Сортируемый) - отложенный старт </ title>
<Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
<Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
<Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
<Style>
# Sortable1, # sortable2 {список стиле типа: нет; маржа: 0; утеплитель: 0; краю дна: 15px; увеличение: 1;}
# Sortable1 Ли, # sortable2 Li {маржа: 0 5px 5px 5px; обивка: 5px; размер шрифта: 1.2em; ширина: 95%;}
</ Style>
<Script>
$ (Function () {
$ ( "# Sortable1") .sortable ({
Задержка: 300
});
$ ( "# Sortable2") .sortable ({
Расстояние: 15
});
$ ( "Ли") .disableSelection ();
});
</ Script>
</ Head>
<Body>
<H3 класс = "Docs"> Время задержки 300ms: </ h3>
<Ul ID = "sortable1">
<Li класс = "UI-состоянии по умолчанию"> Пункт 1 </ li>
<Li класс = "UI-состоянии по умолчанию"> Пункт 2 </ li>
<Li класс = "UI-состоянии по умолчанию"> Пункт 3 </ li>
<Li класс = "UI-состоянии по умолчанию"> Пункт 4 </ li>
</ UL>
<H3 класс = "Docs"> Задержка расстояние 15px: </ h3>
<Ul ID = "sortable2">
<Li класс = "UI-состоянии по умолчанию"> Пункт 1 </ li>
<Li класс = "UI-состоянии по умолчанию"> Пункт 2 </ li>
<Li класс = "UI-состоянии по умолчанию"> Пункт 3 </ li>
<Li класс = "UI-состоянии по умолчанию"> Пункт 4 </ li>
</ UL>
</ Body>
</ HTML>
Оно отображается в виде сетки
Пусть Сортируемые записи отображаются в виде сетки, таким образом, чтобы они используют CSS с теми же размерами и плавучей дисплея.
<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
<Meta Charset = "UTF-8">
<Title> JQuery UI сортировки (Сортируемый) - отображение сетки </ title>
<Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
<Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
<Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
<Style>
#sortable {список стиле типа: нет; маржа: 0; обивка: 0; ширина: 450px;}
#sortable Li {маржа: 3px 3px 3px 0; отступы: 1px; поплавком: слева; ширина: 100px; высота: 90 пикселей; размер шрифта: 4em; выравнивания текста: центр;}
</ Style>
<Script>
$ (Function () {
$ ( "#sortable") .sortable ();
$ ( "#sortable") .disableSelection ();
});
</ Script>
</ Head>
<Body>
<Ul ID = "сортировкой">
<Li класс = "пользовательский интерфейс состояния по умолчанию"> 1 </ li>
<Li класс = "пользовательский интерфейс состояния по умолчанию"> 2 </ li>
<Li класс = "пользовательский интерфейс состояния по умолчанию"> 3 </ li>
<Li класс = "пользовательский интерфейс состояния по умолчанию"> 4 </ li>
<Li класс = "Пользовательский интерфейс состояния по умолчанию"> 5 </ li>
<Li класс = "пользовательский интерфейс состояния по умолчанию"> 6 </ li>
<Li класс = "пользовательский интерфейс состояния по умолчанию"> 7 </ li>
<Li класс = "Пользовательский интерфейс состояния по умолчанию"> 8 </ li>
<Li класс = "Пользовательский интерфейс состояния по умолчанию"> 9 </ li>
<Li класс = "пользовательский интерфейс состояния по умолчанию"> 10 </ li>
<Li класс = "пользовательский интерфейс состояния по умолчанию"> 11 </ li>
<Li класс = "пользовательский интерфейс состояния по умолчанию"> 12 </ li>
</ UL>
</ Body>
</ HTML>
Поместите заполнитель
При перетаскивании Сортируемый вход в новое место, остальные записи будут освободить место для записи. Задать placeholder вариант передачи , чтобы определить класс пустой визуального стиля. Булевы значения forcePlaceholderSize возможность установить размер заполнителя.
<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
<Meta Charset = "UTF-8">
<Title> JQuery UI сортировки (Сортируемый) - помещается заполнитель </ title>
<Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
<Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
<Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
<Style>
#sortable {список стиле типа: нет; маржа: 0; обивка: 0; ширина: 60%;}
#sortable Li {Маржа: 0 5px 5px 5px; обивка: 5px; размер шрифта: 1.2em; высота: 1.5em;}
HTML> Тело #sortable Li {высота: 1.5em; высота строки: 1.2em;}
.ui-состояние-изюминкой {высота: 1.5em; высота строки: 1.2em;}
</ Style>
<Script>
$ (Function () {
$ ( "#sortable") .sortable ({
заполнитель: "Пользовательский интерфейс-состояние-изюминка"
});
$ ( "#sortable") .disableSelection ();
});
</ Script>
</ Head>
<Body>
<Ul ID = "сортировкой">
<Li класс = "UI-состоянии по умолчанию"> Пункт 1 </ li>
<Li класс = "UI-состоянии по умолчанию"> Пункт 2 </ li>
<Li класс = "UI-состоянии по умолчанию"> Пункт 3 </ li>
<Li класс = "UI-состоянии по умолчанию"> Пункт 4 </ li>
<Li класс = "UI-состоянии по умолчанию"> Пункт 5 </ li>
<Li класс = "UI-состоянии по умолчанию"> Пункт 6 </ li>
<Li класс = "UI-состоянии по умолчанию"> Пункт 7 </ li>
</ UL>
</ Body>
</ HTML>
Обработка пустой список
по Опция устанавливается false , чтобы предотвратить список всех записей помещаются в отдельный пустой список. По умолчанию Сортируемые записи могут быть помещены в пустой список.
<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
<Meta Charset = "UTF-8">
<Title> JQuery UI сортировки (Сортируемый) - обработка пустой список </ title>
<Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
<Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
<Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
<Style>
# Sortable1, # sortable2, # sortable3 {список стиле типа: нет; маржа: 0; утеплитель: 0; с плавающей точкой: слева; Правое поле: 10px; фон: #eee; обивка: 5px; ширина: 143px;}
# Sortable1 Ли, # sortable2 Ли, # sortable3 Li {поле: 5px; обивка: 5px; размер шрифта: 1.2em; ширина: 120px;}
</ Style>
<Script>
$ (Function () {
$ ( "Ul.droptrue") .sortable ({
connectWith: "уль"
});
$ ( "Ul.dropfalse") .sortable ({
connectWith: "уль",
dropOnEmpty: ложная
});
$ ( "# Sortable1, # sortable2, # sortable3") .disableSelection ();
});
</ Script>
</ Head>
<Body>
<Ul ID = класс "sortable1" = "droptrue">
<Класс Li = "UI-состоянии по умолчанию"> можно поместить .. </ li>
<Li класс = "Пользовательский интерфейс-состояние по умолчанию"> .. пустой список </ li>
<Li класс = "UI-состоянии по умолчанию"> Пункт 3 </ li>
<Li класс = "UI-состоянии по умолчанию"> Пункт 4 </ li>
<Li класс = "UI-состоянии по умолчанию"> Пункт 5 </ li>
</ UL>
<Ul ID = класс "sortable2" = "dropfalse">
<Класс Li = "Пользовательский интерфейс-состояние-изюминка"> не может быть помещен .. </ li>
<Li класс = "Пользовательский интерфейс-состояние-изюминка"> .. пустой список </ li>
<Li класс = "Пользовательский интерфейс-состояние-изюминка"> Пункт 3 </ li>
<Li класс = "Пользовательский интерфейс-состояние-изюминка"> Пункт 4 </ li>
<Li класс = "Пользовательский интерфейс-состояние-изюминка"> Пункт 5 </ li>
</ UL>
<Ul ID = класс "sortable3" = "droptrue">
</ UL>
<br style="clear:both">
</ Body>
</ HTML>
Включить / Исключить запись
Места по items сдать экзамен опции селектора JQuery , какие элементы могут быть отсортированы. Этот параметр находится за пределами проекта не могут быть заказаны, но они не действительны целевой сортируемым запись.
Если вы хотите , чтобы предотвратить определенные записи , отсортированные, чтобы cancel возможность передать селектор JQuery. Отменено запись по-прежнему действительны сортировки целевые другие записи.
<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
<Meta Charset = "UTF-8">
<Title> JQuery UI сортировки (Сортируемый) - Включить / Исключить запись </ title>
<Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
<Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
<Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
<Style>
# Sortable1, # sortable2 {список стиле типа: нет; маржа: 0; утеплитель: 0; увеличение: 1;}
# Sortable1 Ли, # sortable2 Li {маржа: 0 5px 5px 5px; обивка: 3px; ширина: 90%;}
</ Style>
<Script>
$ (Function () {
$ ( "# Sortable1") .sortable ({
пункты: "Ли: нет (.ui-состояние-инвалидов)"
});
$ ( "# Sortable2") .sortable ({
отменить: ".ui-состояние-инвалидов"
});
$ ( "# Sortable1 Ли, # sortable2 Ли") .disableSelection ();
});
</ Script>
</ Head>
<Body>
<H3 класс = "Docs"> Укажите, какие элементы являются сортируемым: </ h3>
<Ul ID = "sortable1">
<Li класс = "UI-состоянии по умолчанию"> Пункт 1 </ li>
<Li класс = "UI-состоянии по умолчанию пользовательский интерфейс-состояние-инвалидов"> (я не сортируется или целевой капли) </ li>
<Li класс = "UI-состоянии по умолчанию пользовательский интерфейс-состояние-инвалидов"> (я не сортируется или целевой капли) </ li>
<Li класс = "UI-состоянии по умолчанию"> Пункт 4 </ li>
</ UL>
<H3 класс = "Docs"> отменить заказ (но как цель перетаскивания): </ h3>
<Ul ID = "sortable2">
<Li класс = "UI-состоянии по умолчанию"> Пункт 1 </ li>
<Li класс = "UI-состоянии по умолчанию пользовательский интерфейс-состояние-инвалидов"> (я не сортируется) </ li>
<Li класс = "UI-состоянии по умолчанию пользовательский интерфейс-состояние-инвалидов"> (я не сортируется) </ li>
<Li класс = "UI-состоянии по умолчанию"> Пункт 4 </ li>
</ UL>
</ Body>
</ HTML>
Компонентов портала (портлетов)
Включение компонентов портала (стиль) , как Див сортируется, и использовать connectWith параметр , чтобы разрешить обмен данными между колоннами сортировки.
<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
<Meta Charset = "UTF-8">
<Title> JQuery UI сортировочные (Сортируемый) - компонентов портала (портлетов) </ title>
<Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
<Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
<Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
<Style>
тело {
мин-ширина: 520px;
}
.column {
ширина: 170 пикселей;
плавать: слева;
обивка-дно: 100px;
}
.portlet {
Запас: 0 1em 1em 0;
обивка: 0.3em;
}
.portlet-заголовок {
обивка: 0.2em 0.3em;
краю дна: 0.5em;
позиция: относительная;
}
.portlet-тумблер {
позицию: абсолютная;
верх: 50%;
справа: 0;
Верхнее поле: -8px;
}
.portlet-контента {
обивка: 0.4em;
}
.portlet-заполнитель {
границы: 1px пунктирная черный;
Запас: 0 1em 1em 0;
высота: 50px;
}
</ Style>
<Script>
$ (Function () {
$ ( ".column") .sortable ({
connectWith: ".column",
ручка: ".portlet-заголовок",
отменить: ".portlet-тумблер",
заполнитель: "портлет-заполнитель UI-угловой-все"
});
$ ( ".portlet")
.addClass ( "UI-виджет UI-виджет-контента UI-хелперов-clearfix пользовательский интерфейс угла всех")
.find ( ".portlet-заголовок")
.addClass ( "UI-виджета-заголовка пользовательский интерфейс угла всех")
.prepend ( "<SPAN класс = 'Пользовательский интерфейс-значок UI-значок-minusthick портлет-тумблер"> </ SPAN> ");
$ ( ".portlet-Переключение") .click (функция () {
Значок переменная = $ (это);
icon.toggleClass ( "UI-значок-minusthick UI-значок-plusthick");
icon.closest ( ".portlet") .find ( ".portlet-контент") .toggle ();
});
});
</ Script>
</ Head>
<Body>
<Div класс = "столбец">
<Div класс = "портлета">
<Div класс = "портлет-заголовок"> Подписка </ DIV>
<Div класс = "портлет-контента"> Lorem Ipsum Dolor сидеть Амет, consectetuer adipiscing Элит </ DIV>
</ Div>
<Div класс = "портлета">
<Div класс = "портлет-заголовка"> Новости </ DIV>
<Div класс = "портлет-контента"> Lorem Ipsum Dolor сидеть Амет, consectetuer adipiscing Элит </ DIV>
</ Div>
</ Div>
<Div класс = "столбец">
<Div класс = "портлета">
<Div класс = "портлет-заголовок"> корзина </ DIV>
<Div класс = "портлет-контента"> Lorem Ipsum Dolor сидеть Амет, consectetuer adipiscing Элит </ DIV>
</ Div>
</ Div>
<Div класс = "столбец">
<Div класс = "портлета">
<Div класс = "портлет-заголовок"> ссылка </ DIV>
<Div класс = "портлет-контента"> Lorem Ipsum Dolor сидеть Амет, consectetuer adipiscing Элит </ DIV>
</ Div>
<Div класс = "портлета">
<Div класс = "портлет-заголовок"> Изображение </ DIV>
<Div класс = "портлет-контента"> Lorem Ipsum Dolor сидеть Амет, consectetuer adipiscing Элит </ DIV>
</ Div>
</ Div>
</ Body>
</ HTML>