Slyweb
На разработку сайта! Скидки 50%!

jQuery Cookie и UI Sortable!

jQuery Cookie и UI Sortable!

Оглавление статьи "jQuery Cookie и UI Sortable!"

Интересная статья - ключ к успеху, а статья, объясняющая не только основы в двойне выгодна! Что для Вас будет интересного в этой статье? Вы научитесь работать с jQuery Cookie, для тех кто не знает что такое cookie - это текстовые файлы на компьютере пользователя зашедшего на сайт, хранящие определенную информацию. Пример записи информации содержащейся в cookie:

  • Код
  • Чистый код
  1.id=Alex;expires=Tue, 22 Dec 2012 00:00:00;path=/;

        

В данной строчке содержаться данные сформированные по шаблону "имя=значение;expires=дата истечения срока действия cookie;path=директория для которой cookie действительны".

Хотя этих данных вполне достаточно для работы с cookie, на самом деле данная строка может содержать параметры domain и secure. Часть domain определяет будут ли доступны cookie на субдоменах данного домена. Например, если вы сперва открыли адрес вашего сайта "myosubdomain.mysait.com", а затем перешли на myothersubdomain.mysait.com, то cooikiie указанные на одном домене не будут доступны на другом, для этого специально предназначен параметр domain, указав в нём название домена, Вы разрешите использовать cookie одного домена на другом. Параметр secure определяет будет ли отправлен cookie по безопасному каналу, для этого Вам нужен SSL.

Указанные параметры, полностью поддерживаются плагином "jQuery Cookie", о возможностях чуть позже, а пока подключаем js библиотеки.

Подключаем нужные нам js библиотеки!

Итак, начнём, подключите библиотеку jquery и библиотеку jquery.cookie.js:

  • Код
  • Чистый код
  1.<script src="http: //ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
  2. <script src="cookie/jquery.cookie.js" type="text/javascript"></script>

        

Возможности плагина "jQuery Cookie"

  • Установка значений cookie
  • Удаление значений cookie
  • Установка cookie с определенным временем их существования
  • Установка параметров secure и domain
  • Установка cookie с определенным параметром path, если, например нужно установить cookie для определенного каталога

Примеры установки cookie!

Устанавливаем cookie:

  • Код
  • Чистый код
  1.$.cookie('the_cookie', 'the_value');

        

Устанавливаем cookie с определенным сроком действия, доступные для всего домена slyweb.ru, срок истечения - через 7 дней:

  • Код
  • Чистый код
  1.$.cookie('the_cookie', 'the_value', { expires: 7, path: '/', domain: 'slyweb.com', secure: true });

        

При передаче в качестве значения опции expires отрицательного значения, cookie с данным именем будет удалены. Если значение не будет указано вовсе, cookie с данным именем будут сохранены от прежнего сеанса.

Если значение path не будет указано, cookie будут действительны по адресу текущей страницы. Если опция domain отсутствует, домен будет определён по домену текущей страницы. Если secure имеет значение true, будет установлена передача данных cookie по HTTPS.

Пример удаления cookie, если опции path и domain те же, что и при установке:

  • Код
  • Чистый код
  1.$.cookie('the_cookie', null);


        

Примеры получения cookie!

Получить cookie с определённым значением просто, для этого укажете название cookie:

  • Код
  • Чистый код
  1.$.cookie('the_cookie');


        

Шаг 3. jQuery UI Sortable и jQuery Cookie - эффективное взаимодействие!

Интересно знать как работает плагин jQuery Cookie, хранить определенные данные, например чтоб просто приветствовать человека по его имени, сохранённому в cookie при регистрации, но можно использовать cookie для сохранения определённых состояний при взаимодействии пользователя с элементами на странице, например при перемещении определенных элементов меню. Давайте подробнее рассмотрим пример, когда пользователь меняет расположение элементов списка местами и в дальнейшем, при новом посещении той же страницы, данное расположение сохраняется, так как нужно пользователю. Для этого возьмём плагин jQUery UI Sortable. Подключим js файлы и создадим структуру HTML.

Для нормальной работы плагина UI sortable необходимы следующие js и css файлы:

  • jquery-1.5.min.js
  • jquery-ui-1.7.2.custom.css
  • ui.core.js
  • ui.sortable.js

Не переживайте, если Вам что-то непонятно, я собрал рабочий пример в архив, в котором вам нужно только запустить файл "index.html".

Структура HTML у Вас должна быть примерно такая:

  • Код
  • Чистый код
  1.<ul id="sortable">
  2. <li id="one" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
  3. <li id="two" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
  4. <li id="three" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
  5. <li id="four" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
  6. <li id="five" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
  7. <li id="six" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
  8. <li id="seven" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
  9.</ul>

        

Всё казалось бы просто при работе с jQUery UI sortable, но как запомнить положение элементов в следующий раз когда пользователь зайдёт на данную страницу? Для этого нужно использовать плагин jQuery Cookie и немного импровизации. В опциях плагина sortable есть такой метод .sortable('toArray'), с помощью которого возможно объединять в строку значения id элементов li, который мы будем использовать при кадом обновлении списка пользователем, то есть когда пользователь переменит позицию элементов в объект cookie будет сохранён обновлённый результат cookie, а затем при перезагрузке мы возьмём данный результат и разобьём его на массив, который обойдём с помощью jQuery each. В методе jQuery.each мы сформируем элементы в том порядке, в каком они сохранены в cookie и присоединим к ul контейнеру. Посмотрите пример ниже:

  • Код
  • Чистый код
  1.<script type="text/javascript">
  2.$(function() {
  3.
  4. $.fn.mysort = function(){ this.sortable({update: function() {
  5.
  6. var ser = $(this).sortable('toArray');
  7. $.cookie('sortsave', ser);
  8.
  9. }
10. }).show();
11. }
12.
13. if($.cookie('sortsave')){
14.
15. var pos = $.cookie('sortsave').split(',');
16. $(pos).each(function(i){
17. $("#sortable").append($('ul#sortable li#'+pos[i]+'')).mysort();
18.
19. });
20.
21. }
22. else {
23.
24. $("#sortable").mysort();
25.
26. }
27.
28.});
29.</script>

        

В начале мы создали новый метод jQuery mysort, сделано это для того чтобы не дублировать и не засорять страницу излишними кусками кода, - зачем повторять два раза когда можно написать один? Далее в 13 строке мы проверяем есть ли cookie с таким именем, если есть то выводим в том порядке в каком они сохранены в cookie. Второе условие (строка 22) выполянется в то случае если cookie отсутвуют.

Единственное что здесь можно объяснить, так это использование show(), вам станет ясно, почему я использую show(), потому что в css контейнер ul скрываю(dispaly:none; - см. листинг ниже), сделано это специально что бы пользователь сразу видел уже пересортированные элементы, а не их перемещение в хаотичном порядке.

  • Код
  • Чистый код
  1. #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; display:none;}
  2. #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
  3. #sortable li span { position: absolute; margin-left: -1.3em; }

        

Практический пример, пересортируйте элементы, а затем перезагрузите страницу:

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6
  • Item 7

Если необходимо удалить элементы и сохранить состояние, то пригодится следующий код:

  • Код
  • Чистый код
  1.<!doctype html>
  2.<html lang="en">
  3.<head>
  4. <title>jQuery UI Sortable и jQuery Cookie </title>
  5. <link type="text/css" href="themes/jquery-ui-1.7.2.custom.css" rel="stylesheet" />
  6. <script type="text/javascript" src="jquery-1.5.min.js"></script>
  7. <script type="text/javascript" src="ui.core.js"></script>
  8. <script type="text/javascript" src="ui.sortable.js"></script>
  9. <script type="text/javascript" src="jquery.cookie.js"></script>
10. <style type="text/css">
11. #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; display:none;}
12. #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
13. #sortable li span { position: absolute; margin-left: -1.3em; }
14. </style>
15.<script type="text/javascript">
16.$(function() {
17.
18. $.fn.mysort = function(){ this.sortable({update: function() {
19.
20. var ser = $(this).sortable('toArray');
21.
22. $.cookie('sortsave', ser);
23.
24. }
25. }).show();
26. }
27.
28.
29.
30. if($.cookie('sortsave') || $.cookie('sortdelete')){
31.
32. if($.cookie('sortdelete')){
33. var posdelete = $.cookie('sortdelete').split(',');
34.
35. $(posdelete).each(function(i){
36. $('#sortable li#'+posdelete[i]+'').remove();
37.
38. });
39. }
40. if($.cookie('sortsave')){
41. var pos = $.cookie('sortsave').split(',');
42.
43. $(pos).each(function(i){
44.
45. $("#sortable").append($('ul#sortable li#'+pos[i]+'')).mysort();
46.
47. });
48. }
49.
50. }
51. else {
52.
53. $("#sortable").mysort();
54.
55. }
56. var delid = [];
57.
58. $("#sortable .delete").click(function() {
59. if($.cookie('sortdelete')) delid= $.cookie('sortdelete').split(',');
60.
61.
62. delid.push($(this).parent().attr('id'));
63. $(this).parent().remove();
64. var ser = $('#sortable').sortable('toArray');
65.
66. $.cookie('sortsave', ser);
67. $.cookie('sortdelete', delid);
68.});
69.
70.});
71.</script>
72.</head>
73.<body>
74.
75.<ul id="sortable">
76. <li id="one" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1 <button class="delete">Delete</button></li>
77. <li id="two" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2 <button class="delete">Delete</button>
78.</li>
79. <li id="three" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3 <button class="delete">Delete</button></li>
80. <li id="four" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4 <button class="delete">Delete</button></li>
81. <li id="five" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5 <button class="delete">Delete</button></li>
82. <li id="six" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6<button class="delete">Delete</button></li>
83. <li id="seven" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7 <button class="delete">Delete</button></li>
84.</ul>
85.
86.</div><!-- End demo -->
87.
88.
89.
90.
91.</body>
92.</html>
93.

        

В заключение

На этом всё дорогие читатели, успехов и до встреч, как я и обещал рабочий архив - jQuery Cookie и UI Sortable. Или Вы можете посмотреть пример на отдельной странице - jQuery Cookie и UI Sortable.


Александр Ермаков