Итак, что мы можем получить подключив несколько javascript-файлов, задав соответствующее стилевое оформление и написав вот такой небольшой кусочек кода.

$("#example").dialog();

Мы получаем диалоговое окно, которое можно перемещать по экрану в любом направлении. Мы можем менять размеры этого окна. И конечно, содержимое этого окна может быть вполне функциональным. Испытайте все это на примере.

Принимайте во внимание, что пример демонстрируется во фрейме.

Вы можете скачать исходный код примера, и при наличии библиотеки jQuery воспроизвести это пример на своем сайте.

В раздел HEAD понадобится подключить довольно много файлов: кроме самой библиотеки jQuery – jquery-1.2.1.js, файлы jquery.dimensions.js, ui.resizable.js, ui.draggable.js, ui.mouse.js и конечно ui.dialog.js

<script type="text/javascript" src="js/jquery-1.2.1.js"></script>
<script type="text/javascript" src="js/jquery.dimensions.js"></script>
<script type="text/javascript" src="js/ui.dialog.js"></script>
<script type="text/javascript" src="js/ui.resizable.js"></script>
<script type="text/javascript" src="js/ui.mouse.js"></script>
<script type="text/javascript" src="js/ui.draggable.js"></script>

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

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

И наконец приведу полностью тот код, который отвечает за диалоговое окно.

<script type="text/javascript">
$(document).ready(function(){
  $("#example").dialog({
    title: "Пример диалогового окна",
    width: 250,
    height: 150,
    resizable: true,
    draggable: true,
    position: "center",
    buttons: {
      "Отправить": function() {
        alert("Вы нажали кнопку Отправить");
      },
      "Закрыть": function() {
        $(this).dialog("close");
        alert("Вы нажали кнопку Закрыть");
      }
    }
  });
});
</script>

Элемент с идентификатором #example будет служить диалоговым окном. В файле ui.dialog.js большинство опций заданы по умолчанию, мы же для примера попробуем переопределить большинство из них.
title: ‘Пример диалогового окна’ – задаем название диалогового окна.
width: 250 – ширина окна в px.
height: 150 – высота окна в px.
resizable: true – диалоговое окно может (или false – не может) изменять свои размеры.
draggable: true – диалоговое окно может (или false – не может) перемещаться по экрану.
position: center – начальное положение окна на экране. Доступны значения center, left, top.
buttons – об этом несколько подробнее. Эта опция определяет кнопки, которые понадобится отображать в диалоге. Определяются они парами ключ/значение, где ключ – это текст, который необходимо отобразить на кнопке, а в качестве значения может выступать функция, которая должна быть вызвана при клике на соответствующую кнопку.

Вот собственно и все. А внутри диалогового окна можно предусмотреть то, что угодно Вам. Будь то авторизационная форма или форма для отправки e-mail с сайта, или еще что-то…

Для начала небольшой пример, который продемонстрирует, как такие подсказки могут выглядеть. Для примера выбраны обычная ссылка – элемент а и элемент input.

Пожалуйста, примите во внимание, что пример мне приходится демонстрировать во фрейме.

Вы можете скачать исходный код примера, и при наличии библиотеки jQuery воспроизвести это пример на своем сайте.

Файлы необходимые для реализации подключаем в раздел HEAD, их всего три – это сама библиотека jQuery, файл jquery.dimensions.js и файл для работы с подсказками jquery.tooltip.js

<script type="text/javascript" src="js/jquery-1.2.1.js"></script>
<script type="text/javascript" src="js/jquery.dimensions.js"></script>
<script type="text/javascript" src="js/jquery.tooltip.js"></script>

Дальше немного посмотрим на таблицу стилей, вернее на ту ее часть, где мы можем оформить нашу всплывающую подсказку.

#tooltip {
  position: absolute;
  z-index: 3000;
  width:250px;
  border: 1px solid #269;
  background-color: #48b;
  padding: 0;
  opacity: 0.85;
  color:#fff;
}
#tooltip h3 {
  background-color: #269;
  padding-left:5px;
  font-weight:bold;
  font-size:1.4em;
}
#tooltip div {
  padding-left:5px;
  padding-right:5px;
}

#tooltip – это и есть подсказка. Мы задаем абсолютное позиционирование, изымая таким образом подсказку из общего потока, а свойству z-index задаем заведомо большое значение, чтобы расположить подсказку «выше» элементов страницы. Дальше ничего сложного нет вообще нет. #tooltip h3 – это заголовок подсказки, в элементе #tooltip div – текст подсказки. Вообще здесь важно только сохранить название идентификатора #tooltip, все остальное – на Ваш вкус.

Дальше приведу пример кода вызова наших всплывающих подсказок.

<script type="text/javascript">
$(document).ready(function(){
  $("a, input").tooltip({
    track: true,
    delay: 100,
    showBody: "::",
    opacity: 0.85
  });
});
</script>

Указываем элементы a и input в качестве элементов, для которых будут вызываться всплывающие подсказки. Но это еще не все. Необходимо, чтобы эти элементы имели атрибут title. Именно его значение используется для формирования подсказки.

Обратите внимание на опцию showBody. В ней можно указать разделитель. Часть до разделителя будет показана в заголовке подсказки, оставшаяся часть в теле подсказки.
Опция track: если установлена в true – подсказка будет «привязана» к указателю мыши.
delay – отсрочка появления подсказки в миллисекундах, по умолчанию установлено значение 250.
opacity: 0.85 – прозрачность (ну конечно не для IE).

Я как всегда привел лишь несколько из возможных опций, список их несколько шире. Найти полный перечень можно на сайте разработчиков.

Испытайте этот небольшой пример, а затем мы разберем как это сделано.

Вы можете скачать исходный код примера, и при наличии библиотеки jQuery воспроизвести это пример на своем сайте.

В раздел HEAD понадобится подключить всего два файла: библиотеку jQuery – jquery-1.2.1.js и файл ui.tablesorter.js

<script type="text/javascript" src="js/jquery-1.2.1.js"></script>
<script type="text/javascript" src="js/ui.tablesorter.js"></script>

В исходном коде примера Вы сможете посмотреть стилевую таблицу, отвечающую за отображение календаря и при необходимости отредактировать ее под свой дизайн. Эта часть кода выделена комментариями /* Стили для таблицы */.

HTML-код не представляет собой ничего интересного – это обычная таблица. Обращу внимание разве что на необходимость использования тэгов thead и tbody.

И наконец приведу очень простой код, который будет вызывать UI Tablesorter:

<script type="text/javascript">
$(document).ready(function(){
  $("#example").tablesorter({
	widgets: ["zebra"],
	sortList:[[1,0]]
  });
});
</script>

Таблица с идентификатором #example будет сортируемой. Большинство опций сортировки задано по умолчанию в самом файле ui.tablesorter.js, но мы легко можем их переопределить.
widgets: ["zebra"] – используем «фирменный» виджет, чтобы чередовать цвет строк в таблице.
sortList:[[1,0]] – задаем сортировку по умолчанию (при загрузке). В этом примере – сортировка второго столбца по возрастанию (первая цифра – порядковый номер столбца, вторая порядок сортировки, где 0 – по возрастанию, 1 – по убыванию). Здесь можно задавать сортировку и по нескольким столбцам сразу. Например: sortList:[[1,0], [0,1]] – сначала второй столбец сортируется по возрастанию, а затем первый – по убыванию…

Приведу еще пару полезных опций.
sortMultisortKey – по умолчанию задано значение shiftKey, т.е. щелкая мышью по заголовку столбца при нажатой клавише Shift можно выполнять сортировку по нескольким столбцам. Естественно клавишу можно переопределить. Например так: sortMultiSortKey: «ctrlKey». Теперь можно работать через клавишу Ctrl.
headers – с помощью этой опции можно запретить сортировку по отдельным столбцам. Например: headers: { 4: { sorter: false} } запретит сортировку пятого столбца.

Весь список опций есть на сайте разработчиков библиотеки, а я буду благодарен, если найдете возможность оставить свои отзывы…

Как всегда для начала демонстрация примеров, а затем разберемся, как это использовать у себя. Клик по текстовому полю слева заставит работать календарь с выбором одной даты. Справа – календарь с выбором диапазона дат.

Вы можете скачать исходный код примера, и при наличии библиотеки jQuery воспроизвести это пример на своем сайте.

В раздел HEAD понадобится подключить всего два файла: библиотеку jQuery – jquery-1.2.1.js и файл ui.datepicker.js

[/html]

<script type="text/javascript" src="js/jquery-1.2.1.js"></script>
<script type="text/javascript" src="js/ui.datepicker.js"></script>

[html]

В исходном коде примера Вы сможете посмотреть стилевую таблицу, отвечающую за отображение календаря и при необходимости отредактировать ее под свой дизайн. Эта часть кода выделена комментариями /* Стили для jQuery UI Datepicker */.

HTML-код не представляет собой ничего интересного – это простые текстовые поля ввода. Не забудьте только, что наш скрипт будет обращаться к этим элементам по их идентификаторам.

И наконец приведу очень простой код, который будет вызывать UI Datepicker:

<script type="text/javascript">
$(document).ready(function(){
$("#example").attachDatepicker();
$("#exampleRange").attachDatepicker({
rangeSelect: true,
yearRange: "2000:2010",
firstDay: 1
});
});
</script>

Элементу с идентификатором #example назначен простой календарь с выбором только одной даты, т.е. это настройки по умолчанию.
Для элемента #exampleRange заданы опции:
rangeSelect: true – как раз и задает возможность выбора диапазона дат.
yearRange: ‘2000:2010′ – установка диапазона дат календаря.
firstDay: 1 – задает первый день недели, где 1 – это понедельник.
Вообще настроек масса. Это и установка начальной даты, которая будет выбрана при старте календаря, и возможность установки минимальной и максимальной разрешенной для выбора даты, и даже возможность через опции задать название дней и месяцев на родном языке и многое другое. Полный перечень можно найти здесь.

Но, честно говоря мне показалось более уместным задать некоторые настройки непосредственно в самом файле ui.datepicker.js, благо сделать это совсем несложно. Тем более, что оригинальный файл, который можно скачать на сайте разработчиков содержит все названия на английском языке, а мы будем использовать русский. Сделать это довольно просто. Надо открыть файл в текстовом редакторе и сделать совсем небольшой перевод функции Datepicker().
Кому это покажется сложным, может воспользоваться моим переводом. В архив примера включен файл datepicker.translate.js, в котором и содержится перевод.

Если найдете время оставить отзыв – спасибо!

$("#example > ul").tabs();

В общем действительно просто, никаких дополнительных опций не используется. Здесь скорее придется потрудиться над стилевым оформлением навигационной панели. Но стилевое оформление – это другая тема. Давайте испытаем пример и разберемся, как все это работает.

Вы можете скачать исходный код примера, и при наличии библиотеки jQuery воспроизвести это пример на своем сайте.

Файлы необходимые для реализации подключаем в раздел HEAD, их всего два – это сама библиотека jQuery и файл ui.tabs.js

<script type="text/javascript" src="js/jquery-1.2.1.js"></script>
<script type="text/javascript" src="js/ui.tabs.js"></script>

Стилевые таблицы упомяну вскользь, целиком их можно посмотреть в файле примера. Здесь можно творить, что душе угодно, не забывая проверить созданную Вами таблицу на совместимость с различными браузерами. Правда есть одно важное замечание: файл ui.tabs.js использует имена классов стилевой таблицы, поэтому, если Вы захотите использовать другие имена, Вам понадобится исправить и файл ui.tabs.js

Что касается HTML-кода – он тоже довольно прост. Если посмотрите исходные коды примера, то обязательно отметите, как четко он структурирован. Отдельно идет ненумерованный список разделов, отдельно блоки с содержимым разделов. В таком коде удобно разбираться, его удобно править при необходимости.

А вот интересующий нас более всего код, приведу без сокращений:

<script type="text/javascript">
$(document).ready(function(){
$("#menu > ul").tabs({
	fxFade: true,
	fxSpeed: slow
});
</script>

Как обычно все «завернуто» в $(document).ready(function(){…}); Дальше все так же просто, как и написано у разработчиков. Просто мы добавили еще пару опций.
fxFade: true – используем функцию «затухания» при переходе на другую вкладку.
fxSpeed: slow – и скорость этого затухания – медленная…
Это конечно далеко не все возможные опции. Наш горизонтальный список может реагировать на события click (щелчок по вкладке), hide (при скрытии вкладки), show (при открытии вкладки) выполнением пользовательских функций. Может переключаться не по клику мышкой, а по event: mouseover, можно задавать открывающуюся по умолчанию вкладку и конечно же во вкладки можно подгружать содержимое используя Ajax. Но о том, как просто работать с Ajax через jQuery я расскажу в отдельной статье.

Буду благодарен, если найдете возможность оставить свои отзывы…

$("#menuList").sortable();

где #menuList – это идентификатор списка.
В меню справа использованы некоторые дополнительно установленные опции. Код конечно немного посложнее, но и в нем нет абсолютно ничего страшного.

Вы можете скачать исходный код примера, и при наличии библиотеки jQuery воспроизвести это пример на своем сайте.

А теперь разберем примеры более подробно. Этот пример для своей корректной работы требует подключения достаточно большого количества различных вспомогательных файлов.

<script src="js/jquery-1.2.1.js" type="text/javascript"></script>
<script src="js/jquery.dimensions.js" type="text/javascript"></script>
<script src="js/ui.mouse.js" type="text/javascript"></script>
<script src="js/ui.draggable.js" type="text/javascript"></script>
<script src="js/ui.draggable.ext.js" type="text/javascript"></script>
<script src="js/ui.droppable.js" type="text/javascript"></script>
<script src="js/ui.droppable.ext.js" type="text/javascript"></script>
<script src="js/ui.sortable.js" type="text/javascript"></script>

Все файлы уже знакомы по предыдущим примерам. Добавился только один файл ui.sortable.js, который (как и все остальные) мы подключаем в разделе HEAD нашей страницы.
Из таблицы стилей остановлюсь только на небольшом моменте, поскольку это по большому счету дело вкуса.

.dragStyle {
  background:#CFD4E6;
  border:1px solid #727EA3;
}

Класс dragStyle используется во втором примере и применяется в момент перемещения элемента, отображая то место, на которое перемещаемый элемент будет «сброшен».

Далее полностью приведен кусок кода, который и отвечает за работу обоих списков.

<script type="text/javascript">
$(document).ready(function(){
  $("#menuList").sortable(); // 1-ый спискок

  $("#menuList2").sortable({ // 2-ой список
	hoverClass: "dragStyle",
	start: function(ev, ui) {
	  var text = $(ui.draggable.element).text();
	  $("#result").text("Перемещаем " + text);
	},
	stop: function(ev, ui) {
	  $("#result").text("Перемещение окончено!");
	}
  });
});
</script>

Вот так просто. За работу первого списка отвечает всего-навсего одна строка кода. Для второго списка мы используем некоторые дополнительные опции.
hoverClass – опция содержит название класса, который будет применен в процессе перемещения одного из пунктов списка, чтобы указать место, куда перемещаемый пункт будет «сброшен».
start – здесь указываем функцию, которая выполнится в момент старта перемещения элемента списка. В этой функции мы обращаемся к перемещаемому элементу, получаем его содержимое в виде текста и записываем в переменную text. Затем отыскиваем элемент #result и вставляем текст туда.
stop – указываем функцию, которая выполнится в момент, когда произошел «сброс» элемента на нужную позицию (независимо от того изменилась ли фактическая позиция элемента). Тут тоже все предельно просто – вставляем текст сообщения в элемент #result.

Я использовал для примера всего несколько опций, а их полный список опций можно найти на сайте разработчиков библиотеки.

Буду рад, если найдете возможность оставить свой комментарий или задать вопросы.

Посмотрите эти два примера. Пример слева срабатывает по щелчку мышью на панельке-заголовке и имеет довольно интересный эффект «прыгающего мячика», когда панелька падает вниз. Пример справа срабатывает при наведении указателя мыши на панель-заголовок. Тут применен эффект по умолчанию – простое скольжение.

Жалко только, что как всегда в браузере названИЕкоторого Вы знаете без меня, все это выглядит не так прилично как в остальных. Ну, если немного помучаться с CSS, наверняка можно привести все к единообразию).

Вы можете сохранить исходный код примера и при наличии у Вас библиотеки jQuery, воспроизвести его на своем сайте.

Как всегда, нам потребуется подключить саму библиотеку и еще пару-тройку небольших файлов в раздел HEAD.

<script src="js/jquery-1.2.1.js" type="text/javascript"></script>
<script src="js/jquery.dimensions.js" type="text/javascript"></script>
<script src="js/ui.accordion.js" type="text/javascript"></script>
<script src="js/jquery.easing.js" type="text/javascript"></script>

Сначала подключаем саму библиотеку, затем файл jquery.dimensions.js (он нам уже знаком – отвечает за работу с размерами элементов). Интересный нам файл ui.accordion.js – именно он обеспечивает работу аккордеона. Файл jquery.easing.js понадобится только в том случае, если Вы решите использовать анимацию, отличную от той, что установлена по умолчанию.

HTML и CSS-код приводить не имеет смысла, поскольку он настолько прост, что пояснений не требует. Посмотреть его Вы всегда сможете в исходном коде примера. Не забывайте только, что тот маленький скрипт, код которого я приведу ниже, обращается к элементам по их идентификаторам.

Итак код:

<script type="text/javascript">
$(document).ready(function(){
  $("#example").accordion({
     animated: "bounceslide"
  });
  $("#example2").accordion({
    event: "mouseover"
  });
});
</script>

И это все! Мы написали оба аккордеона!
Как всегда весь код обернут в $(document).ready(function(){ … }); Для первого аккордеона выбран элемент с id #example, для второго соответственно #example2. В опции animated первого аккордеона мы (пользуясь тем, что подключили файл jquery.easing.js) задали интересный эффект, а в опции event второго аккордеона указали на то, что срабатывать он должен по событию mouseover.

Собственно мы могли поступить еще проще и написать вот так:

$("#example").accordion();

и такой код прекрасно работал бы, потому, что в файле ui.accordion.js задаются опции по умолчанию.
По умолчанию там заданы опции animated: slide и event: click, а также очень интересная опция autoheight: true. В примере, появляющиеся окошки для отображения контента всегда одинаковы и высота определяется по блоку с максимальным содержимым. Если же опцию autoheight установить в false, высота будет разная.

Полный список опций можно отыскать на сайте разработчика. Удачи и юзайте jQuery!

Как всегда сначала попробуем испытать готовый пример, а затем разберемся как работает этот код. Берем мышкой нужный продукт и тащим его в корзину. Над корзиной отпускаем и смотрим, что получилось…

Чтобы не усложнять код примера, не применяются некоторые проверки, которые должны быть использованы в целях безопасности в реальных интернет-магазинах.

Вы можете сохранить исходный код примера и при наличии у Вас библиотеки jQuery, воспроизвести его на своем сайте.

Чтобы все это работало, нам потребуется подключить к нашей странице, в разделе HEAD довольно много файлов (за исключением самой библиотеки эти файлы не очень большие):

<script type="text/javascript" src="js/jquery-1.2.1.js"></script>
<script type="text/javascript" src="js/jquery.dimensions.js"></script>
<script type="text/javascript" src="js/ui.mouse.js"></script>
<script type="text/javascript" src="js/ui.draggable.js"></script>
<script type="text/javascript" src="js/ui.draggable.ext.js"></script>
<script type="text/javascript" src="js/ui.droppable.js"></script>
<script type="text/javascript" src="js/ui.droppable.ext.js"></script>

Большинство их уже знакомы по предыдущим примерам, добавились только ui.droppable.js и ui.droppable.ext.js, которые и обеспечат нам те возможности, которые мы собираемся рассмотреть.

Не будем очень уж внимательно рассматривать таблицу стилей, поскольку здесь в основном это дело вкуса. Остановлюсь только на ее отдельных моментах.

.products {
  float:left;
}
#basket {
  background-color:#e9b96e;
  border:3px double #c17d11;
  width:150px;
  height:120px;
  margin:10px;
  padding:3px;
  position:absolute;
  top:5px;
  right:5px;
}

В работе примера используются элементы с классом .products и идентификатором #basket (понятно, что products – это товары интернет-магазина, а basket – корзина). Никаких подводных камней тут нет, можно использовать любой стиль отображения этих элементов. Единственное, что необходимо учитывать – наш скрипт будет обращаться к этим элементам по имени класса и идентификатора.
Можно упомянуть еще два класса из таблицы стилей:

.droppable-active {
	outline:1px dotted #F00;
}
.droppable-hover {
	outline:1px dotted #00F;
}

Класс .droppable-active будет использован скриптом в тот момент, когда процесс перемещения элемента уже начался, но перемещаемый элемент еще не находится «в зоне действия» целевого элемента. А класс .droppable-hover будет применен, когда перемещаемый элемент окажется над целевым.

Сам HTML-код вообще не представляет собой ничего особенного: несколько картинок, целевой блок, блок вывода результатов. Все это Вы сможете посмотреть, если скачаете файл примера. А вот сам JavaScript, который все это обрабатывает, разберем подробнее. Код получился немножко длинноват, но очень хотелось сделать более-менее красивый пример, а не полуфабрикат…

<script type="text/javascript">
$(document).ready(function(){

// ---- DRAGGABLES & DROPPABLES -----
$("div.products").draggable({
  helper: clone,
  opacity: 0.5
});

$("#basket").droppable({
  accept: ".products",
  activeClass: "droppable-active",
  hoverClass: "droppable-hover",
  drop: function(ev, ui) {
    var code = $(ui.draggable.element)
    .find("img").attr("id");
    if($(this).find("div[@id="+ code +"]")
      .html()==null) {
      var name = $(ui.draggable.element)
      .find("img").attr("alt");
      $(this).append("
<div class="basket" id=" + code + ">
<input type="text" class="qnt"/> " + name +
"<img src="droppable-delete.gif" class="delete"
alt="Удалить" /></div>
");
    }
  // *******************
  $(".delete").click(function () {
    $(this).parent().remove();
  });
  // *******************
  // *******************
  $("#buy").click(function () {
    var databox = new Array();
    $("#basket").find("input[@type=text]")
      .each(function(){
      var qnt = $(this).attr("value");
      if(qnt===undefined) { qnt = 0; }
      	var text = $(this).parent().text();
      	databox[databox.length] =  text + " - " + qnt;
      });
      data = databox.join(" кг, ");
      $("#buyResult").html("Вы заказали:" + data +
" кгСпасибо за покупку!");
    });
  // ****************
  }
});
// ------ DRAGGABLES & DROPPABLES ------
});
</script>

Как обычно используем $(document).ready(function(){…}); которая отслеживает момент готовности объектной модели документа (DOM). В нее «завернуто» все, что мы написали. И начнем разбираться дальше.

$("div.products").draggable({
  helper: clone,
  opacity: 0.5
});

Это уже должно быть немножко знакомо: выбираем набор элементов DIV, имеющих класс .products и делаем любой из них свободно перемещаемым, задавая при этом некоторые опции. helper: clone – при перемещении элемента он останется на месте, а перемещать с помошью мыши мы будем его клон, opacity: 0.5 – прозрачность которого во время перемещения будет 0,5.

Дальше буду приводить код небольшими кусочками, чтобы было легче разбираться.

$("#basket").droppable({
  accept: ".products",
  activeClass: "droppable-active",
  hoverClass: "droppable-hover"

Выбираем элемент с идентификатором basket и делаем его droppable – туда будем «сбрасывать» перемещаемые элементы. Далее устанавливаем необходимые опции:
accept: «.products» – «сбросить» мы можем только элементы, имеющие класс products.
activeClass: «droppable-active» – имя класса, который будет применен к #basket во время перемещения любого из элементов с классом .products, но до того, как перемещаемый элемент окажется «в зоне действия» элемента #basket.
hoverClass: «droppable-hover» – все тоже самое, только класс будет применен тогда, когда перемещаемый элемент попадет в «зону действия» элемента #basket.
В опции drop – устанавливается функция, которая должна будет выполниться в момент, когда мы «сбросили» перемещаемый элемент. Простор для фантазии – обрабатывайте данные как угодно. Я кратко немного прокомментирую, что написано дальше.

var code = $(ui.draggable.element)
.find("img").attr("id");

Мы обращаемся к перемещаемому элементу, находим в нем (именно в нем) элемент img и получаем значение его атрибута id. Сохраняем в переменной code.

if($(this).find("div[@id="+ code +"]").html()==null)

Здесь будем проверять, нет ли уже в нашей корзине товара с таким же id. Для этого обратимся к элементу, который представляет собой нашу корзину (this в данном случае тоже самое, что и #basket), найдем элемент div с id равным id перемещаемого элемента (хранится в переменной code) и получим его HTML-код. Сравним с null. Если условие верное, значит такого продукта в корзине еще нет и мы можем выполнять следующие операторы, чтобы добавить товар в корзину.

var name = $(ui.draggable.element)
.find("img").attr("alt");

Обращаемся к перемещаемому элементу (это уже делали, правда?), ищем img, получаем значение атрибута alt, где у нас хранится название товара.
Теперь осталось только сформировать нужный HTML-код и добавить его в корзину, т.е. в элемент #basket.

$(this).append('<p class="basket" id=' + code + '>
<input class="qnt" type="text" /> ' + name +
'<img src="droppable-delete.gif" class="delete" alt="Удалить" />');</p>

Тут вроде бы все достаточно понятно. И осталось написать еще пару вспомогательных функций, чтобы пример был хоть немного действующим. Приводить их еще раз тут не буду (можете посмотреть их в полном коде), просто поясню, что первая обрабатывает клик мышкой на картинке удаления товара из корзины и собственно удаляет выбранный элемент div. А вторая обходит все имеющиеся текстовые поля ввода, собирает их значения в массив, объединяет массив в строку и выводит результат в виде HTML-кода в элемент #buyResult.

$(".block").draggable();

И это почти все! В этом коде сообщается, что перемещаемыми элементами становятся все элементы с классом block. Но опять же, разработчики предлагают большой набор различных опций, с помощью которых можно извлекать какую-либо практическую пользу. Иначе зачем таскать блоки по странице? Только лишь с целью поразить пользователя? Нет конечно.
Давайте сначала посмотрим пример того, как это работает, а затем мы разберем код, который обеспечивает эту возможность. В примере задана опция возврата элемента на исходную позицию после окончания его перемещения.

Вы можете сохранить исходный код примера и при наличии у Вас библиотеки jQuery, воспроизвести его на своем сайте.

Для того, чтобы элементы действительно стали перемещаемыми, нам потребуется подключить к нашей странице, в разделе HEAD четыре файла:

<script src="js/jquery-1.2.1.js" type="text/javascript"></script>
<script src="js/ui.mouse.js" type="text/javascript"></script>
<script src="js/ui.draggable.js" type="text/javascript"></script>
<script src="js/ui.draggable.ext.js" type="text/javascript"></script>

Первым подключается библиотека jQuery, а затем – файл, выполняющий обработку событий мышки. Два следующих файла работают непосредственно над перемещением элементов по странице.
Далее в этом же разделе HEAD следует таблица стилей в которой мы определим класс (это может быть например и идентификатор) для элементов, которые хотим сделать свободно перемещаемыми.
И наконец код… Естественно, в примере используются не все возможные опции, но я думаю, что сами принципы пример может продемонстрировать неплохо.

$(document).ready(function(){
    $(".block").draggable({
        revert: true,
        drag: function(e,ui) {
            $(this).css("background-color","#E2F2E2");
            $("#position").text("Положение перемещаемого
            элемента - слева: " + ui.position.left + "px,
            а сверху: " + ui.position.top + "px");
        },
        stop: function(e,ui) {
            $(this).css("background-color", "#58AEFC");
        }
    });
});

Весь код «обернут» уже немного знакомой нам

$(document).ready(function(){
...
});

которая отслеживает момент готовности объектной модели документа (DOM).

Это чем-то похоже на событие onload, но в отличие от него разрешает выполнение javascript сразу после того, как DOM готова к работе, а не после полной загрузки страницы.

Итак, вначале мы сообщаем, что перемещаемыми элементами будут все элементы с классом block. А затем просто перечисляем те опции, которые мы хотим использовать.

revert: true указывает на то, что после окончания процесса перетаскивания, элемент должен вернуться на прежнее место.
Опция drag содержит функцию, которая будет выполняться во время самого процесса перетаскивания элемента. В этой функции мы сначала задаем свойство background-color для перетаскиваемого элемента (по-русски – меняем его цвет), а затем в элемент с идентификатором #position вставляем строку текста, в которой сообщаем текущее пололжение левого верхнего угла перетаскиваемого элемента относительно окна браузера.
В опции stop мы определяем функцию, которая выполнится в момент остановки процесса перемещения элемента и просто вернет цвет элемента к начальному.

Вот и все. Далее я привожу всего несколько опций. Полный их перечень можно найти на сайте разработчиков библиотеки jQuery.

axis – ограничивает перемещение по горизонтальной (x) или вертикальной (y) осям.
containment – ограничивает перемещение к в пределах границ указанного элемента – может быть элемент DOM, родительский элемент, документ или селектор jQuery.
effect – эффекты от начала перемещения до остановки. Возможно например FadeIn при старте и FadeOut при остановке.
opacity – прозрачность перемещаемого элемента.
revert – если истина, элемент вернется на позицию откуда было начато перемещение.
start(e,ui), drag(e,ui) и stop(e,ui) – функции, которые могут вызываться при начале, окончании или процессе перетаскивания элементов.

$("#example").slider();

Но конечно же далеко не все так просто. Для начала посмотрите пример того, как это работает, а затем мы разберем по шагам весь код, который обеспечивает работу слайдера.

Вы можете сохранить исходный код примера и при наличии у Вас библиотеки jQuery, воспроизвести его на своем сайте.

А теперь давайте разберем код. Я буду приводить только те блоки кода, на которые необходимо обратить внимание и сразу же давать пояснения, опуская незначительные в данном примере детали.
Итак, в разделе HEAD нашей страницы необходимо подключить четыре файла. Вот так:

<script type="text/javascript" src="js/jquery-1.2.1.js"></script>
<script type="text/javascript" src="js/jquery.dimensions.js"></script>
<script type="text/javascript" src="js/ui.mouse.js"></script>
<script type="text/javascript" src="js/ui.slider.js"></script>

Здесь первым подключается собственно библиотека jQuery, затем плагин, который отвечает за работу с размерами элементов, далее – файл, выполняющий обработку событий мышки и наконец тот самый файл, который и позволит нам создать свой слайдер.

Далее в этом же разделе HEAD включена таблица стилей. Здесь Вы можете творить, что душе угодно, но обратите особенное внимание на классы .ui-slider и .ui-slider-handle. Их не стоит переименовывать, так как именно с этими классами работает файл ui.slider.js. Все остальное не так важно – это уже дело вкуса.

Ну и наконец мы добрались до самого интересного места – кода, который создает слайдер и работает с ним. Это особенное место, поэтому здесь я приведу этот код полностью.

<script type="text/javascript">
$(document).ready(function(){
  $("#Slider").slider({
    stepping: 1,
    minValue: 0,
    maxValue: 10,
    slide: function(e,ui) {
      $("#minResult").text( ui.values[0] );
      $("#maxResult").text( ui.values[1] );
    },
    stop: function(e,ui) {
      $("#textResult").text("Выбран диапазон значений от "
      + ui.values[0] + " до " + ui.values[1]);
    }
  });
});
</script>

Код самого слайдера отделен комментариями, а начинается код очень интересной функцией

$(document).ready(function(){
...
});

которая отслеживает момент готовности DOM. С ней мы познакомимся позднее, а пока продолжим разбирать сам слайдер.
В первой строке мы в общем просто сообщаем, что слайдером будет служить некий элемент с идентификатором #Slider. И далее задаем значения шага stepping: 1, минимального и максимального значения шкалы minValue: 0 и maxValue: 10, затем сообщаем, что в момент перемещения движка надо отслеживать его значения и передавать минимальное и максимальное значения в соответственно в элементы с идентификаторами #minResult и #maxResult и в тот момент, когда Вы отпускаете клавишу мыши, в элемент с идентификатором #textResult будет вставлена строка текста, в которую будут включены окончательные минимальное и максимальное значения.
Что делать с этими значениями дальше – решать Вам самим. Можно например передать их с помощью Ajax-запроса какому-либо файлу, который обратится к базе данных, выберет необходимые значения, определенные данными, снятыми со слайдера и вернет результат обратно в браузер пользователя.
Вот так. В общем не очень сложно.