Как построить страницу портала с сохраняемым состоянием в jquery UI?

Question

Я знаю, что должен потратить больше времени на изучение этого вопроса и попробовать, прежде чем задавать вопрос, но у меня есть всего 2 недели, чтобы создать сайт с домашней страницей в стиле портала (очень похоже на http://www.bbc.co.uk).

Я неплохо справляюсь с jQuery и в прошлом играл с перетаскиваемыми элементами пользовательского интерфейса jQuery, но мне было интересно, есть ли какие-нибудь учебные пособия или лучшие примеры того, как построить портал с несколькими зонами отбрасывания и возможность запомнить, какие " портлеты "были перетащены в какие дропзоны в каком-либо объекте состояния.

Мне нужно было бы иметь возможность сохранить объект состояния в серверной части с помощью вызова $ ajax () и каким-то образом реорганизовать портлеты при повторном входе пользователя на сайт, предположительно путем отправки объекта состояния JSON из фоны.

Просто некоторые идеи о том, с чего начать, были бы полезны. Спасибо

Answer 1

Я недавно думал о чем-то похожем. Лучший способ, который я мог придумать, - это иметь несколько «зон» на странице, где будут размещаться элементы. В моем случае это были 3 колонки. Я дал каждому идентификатор и использовал вызов Ajax каждый раз, когда блок перемещался в другую позицию, чтобы обновить новую позицию этого блока.

Например, пример таблицы базы данных:

tbl.blocks:
  userid | blockid | column | placement
     1   |    2    |   1    |     3

Где столбец - это простой идентификатор столбца, а размещение - это размещение в этом столбце. Я использовал запрос при загрузке страницы, который загружал блоки в порядке размещения, а затем записывал их в. blockid относится к таблице блоков.

Вот урок, который я нашел, который выглядит актуально: http://aymanh.com/drag-drop-portal-interface-with-scriptaculous

Answer 2

Проверьте плагин jQuery.portal : он имеет встроенную поддержку для сохранения состояния.

Answer 3

Это очень хорошее место для начала - http://www.shopdev.co.uk/blog/sortable-lists-using-jquery-ui/. Также посмотрите эту ссылку здесь - http://docs.jquery.com/UI/Sortable. Используя информацию с обоих сайтов, вы можете попробовать что-то вроде:

<div id='#left_sidebar'>
  <div id='box1'>somestuff</div>
  <div id='box2'>otherstuff</div>
</div>

$(#left_sidebar).sortable({
  update: function() {
     alert($("#left_sidebar").sortable("toArray"));
  }
});

И вы можете использовать 'serialize' вместо 'toArray'. Затем вам нужно отправить массив (или строку) на сервер с помощью jquery / ajax - попробуйте что-то вроде:

$.post(
  "backend_script.php", 
  $("#left_sidebar").sortable("toArray"), 
  onready_function()
);

Эта строка должна заменить предупреждение в верхнем коде - когда вы уверены, что предупреждение показывает вам, что вы хотите увидеть (и сохранить).

Answer 4

Одно из предложений, которое у меня есть, - это использовать сгенерированную информацию о заказе на бэкенде для создания страницы с элементами в правильных местоположениях изначально, а не полагаться на javascript для их переупорядочения при загрузке страницы. Это уменьшит шансы на то, что дисплей изменится на глазах у пользователя, по умолчанию на выбранный им порядок. Это также позволяет странице правильно отображаться даже при отключенном javascript, хотя они, очевидно, утратят способность изменять порядок вещей.

Я думаю, что вы можете использовать AJAX для обратной передачи изменений заказа на сервер. Единственный способ сделать это - использовать режим «редактирования», который позволяет пользователю вносить изменения, а затем «сохранять», чтобы выйти из режима редактирования. Сохранение будет отправлять обратно текущие заказы. Я предпочитаю способ AJAX, так как вам все равно понадобится Javascript для обработки drag-n-drop.

Answer 5

Для создания пользовательских порталов, подобных интерфейсам, вы можете использовать простые HTML-элементы div, размещенные в макете с тремя столбцами. Э.Г.

 <ul id="col1">
    <li><div id="portlet1">...content...</div></li>
    <li><div id="portlet2">...content...</div></li>
</ul>
<ul id="col2">
    <li><div id="portlet3">...content...</div></li>
    <li><div id="portlet4">...content...</div></li>
</ul>
<ul id="col3">
    <li><div id="portlet5">...content...</div></li>
    <li><div id="portlet6">...content...</div></li>
</ul>

Используйте JQuery sortable () API и сделайте все элементы li сортируемыми со значением placeholder , которое фактически показывает, куда отбрасывать элементы. После завершения сортировки используйте API onDrop () , чтобы сохранить местоположения для каждого виджета. В этом случае вы можете сохранить его следующим образом:

portlet1 -- 1,1 (row,column)
portlet2 -- 2,1 
portlet3 -- 1,2 
portlet4 -- 2,2 
portlet3 -- 1,3 
portlet3 -- 2,3 

Эти позиции можно получить, рассчитав позиции сортируемых элементов в DOM. После извлечения этих позиций их можно сохранить в пользовательской базе данных или в автономном режиме в браузере (используя HTML5 localStorage). При следующем посещении портлеты могут быть перерисованы с полученными значениями строки и столбца.

Надеюсь, это поможет. Работоспособный пример можно найти по адресу http://network.nature.com/workbench (вам нужно зарегистрироваться и войти в систему, чтобы сохранить виджеты после их изменения)