Плавающие (перетаскиваемые) окна на JQuery.

Дата: Май 7, 2009

Сегодня я хочу привести простой пример создания плавающего окна с помощью эффекта draggable.
Думаю вы встречались уже не раз с окнами, которые можно перетаскивать по экрану, в них может быть что угодно.
Пример написания такого окна я вам сегодня и покажу.

Для начала пример работы подобной штуки

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

1
2
3
4
5
6

Скачать всё это можно тут
Дальше создадим файл с текстом

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<script type="text/javascript" src="jquery-1.3.1.js"></script>
<script type="text/javascript" src="jquery.dimensions.js"></script>
<script type="text/javascript" src="ui.dialog.js"></script>
<script type="text/javascript" src="ui.resizable.js"></script>
<script type="text/javascript" src="ui.mouse.js"></script>
<script type="text/javascript" src="ui.draggable.js"></script>
</head>
<body>
<div id="drag" class="myDialog">

Текст

</div>

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

Для придания красивости окнам в <head> допишем стили

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123

А теперь разберём вот это участок

1
2
3
4
5
6
7
8
9

$("#drag").dialog({
title: 'Пример диалогового окна',
width: 350, // устанавливаем ширину окна
height: 200, //устанавливаем высоту окна
resizable: true, //говорим, что его пользователь может изменять
draggable: true, //перетаскиваемое окно или нет
position: 'center', //позиционирование
buttons: { //добавляем кнопки на форму
'Отправи

Вот так просто всё настраивается
Выносим благодарности)

Автор: admin

draggable, JQuery

8 комментариев на "Плавающие (перетаскиваемые) окна на JQuery."

Владимир сказал:

15.07.2009

Очень понравилось, но ссылка на архив не работает. Можно ее обновить?

magistr_bender сказал:

15.07.2009

поправил

Владимир сказал:

15.07.2009

Спасибо.
Появилась еще одна проблемка, может подскажите? Не могу изменить содержимое окна по средствам JQ…
$(«#drag»).html(‘InnerText!’);
Содержимое окна не меняется, а если проверить
$(«#drag»).html(‘InnerText!’);
alert ( $(«#drag»).html() );
то на самом деле содержимое сменилось, только почему-то скрипт не выводит.
Должны же быть варианты программно сменить содержимое?

Владимир сказал:

15.07.2009

Ой, извиняюсь, пока химичил со скриптом удалил содержимое ячейки и прописал в стилях display:none. Так что по логике ячейка пустая и в окошке пусто -> текст не заменился, а все из-за display, о котором я вообще забыл. Короче всё как обычно. Еще раз спс =]

magistr_bender сказал:

15.07.2009

та незачто

Иван сказал:

26.07.2009

А как вызывать это окошко. все конечно супер, но вот с вызовом окна проблемы

magistr_bender сказал:

26.07.2009

всё очень посто, если вы почитаете статью по основам работы с JQuery то поймёте.
ну или можно так: участок

1
2
3
4
5
6
7
8
9
10
11

$(document).ready(function(){
$("#drag").dialog({
title: 'Пример диалогового окна',
width: 350,
height: 200,
resizable: true,
draggable: true,
position: 'center',
buttons: {
'Отправить': function() { alert('Вы нажали кнопку \'Отправить\''); },
'Закрыть': function() { $(this).dialog('close'); alert('Вы нажали к�

заменить на

1
2
3
4
5
6
7
8
9
10
11

$("button").click(function(){
$("#drag").dialog({
title: 'Пример диалогового окна',
width: 350,
height: 200,
resizable: true,
draggable: true,
position: 'center',
buttons: {
'Отправить': function() { alert('Вы нажали кнопку \'Отправить\''); },
'Закрыть': function() { $(this).dialog('close'); alert('Вы нажали к�

таким образом при нажатии на объект с ид = button у вас вызовется попап

Евгений сказал:

23.04.2010

Спасибо =)) Очень помогло, давно искал =)))))))

Продолжение дискуссии на форуме: link

Вы можете продолжить обсуждение этой статьи на форуме

Заработай на нашем сайте!

Если вы шарите в программировании и умеете донести свою мысль до масс, то у вас есть замечательный шанс ещё и заработать на своём таланте! Наш сайт платит за интересные и обязательно уникальные публикации! По всем вопросам смотреть раздел контакты.

Имя :
Почта :
Сайт :
Комментарий :

Журнал «Код моё имя»

php, javascript, css, html, web 2.0, литература

Плавающие (перетаскиваемые) окна на JQuery.

8 комментариев на "Плавающие (перетаскиваемые) окна на JQuery."

Заработай на нашем сайте!

Категории

Поиск

Панель пользователя

Архив

Февраль 2012
Пн	Вт	Ср	Чт	Пт	Сб	Вс
« Июл
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29

Журнал «Код моё имя»

php, javascript, css, html, web 2.0, литература

Плавающие (перетаскиваемые) окна на JQuery.

8 комментариев на "Плавающие (перетаскиваемые) окна на JQuery."

Заработай на нашем сайте!

Категории

Календарь

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

Поиск

Панель пользователя

Архив