Каталог статей
Создаем красивое всплывающее окно посредством jQuery
В данном уроке будет говориться о создании красивого всплывающего окна с возможностью изменения размера, перетаскивания, сворачивания и закрытия. Приступим к уроку.Этап 1. Подключаем исходники Давайте для начала загрузим все необходимые исходники в (желательно корневую) папку сайта. Чтобы изменить цвета окна просто измените цвет изображений в архиве.Шаг 1> Далее надо подключить необходимые скрипты. Данные ниже строки вставляем между тегами <head ></head > <script type="text/javascript" src="jQuery.js" ></script > <script type="text/javascript" src="interface.js" > </script >
Шаг 2 > Теперь надо прописать строки кода между теми же тегами <head ></head >. Это будут стили (style) <style type="text/css"> <!--Подключили стили--> #window { position: absolute; left: 200px; top: 100px; width: 400px; height: 300px; overflow: hidden; display: none; } <!--свойства вылетевшего окна закончились--> #windowTop { height: 30px; overflow: 30px; background-image: url(images/window_top_end.png); background-position: right top; background-repeat: no-repeat; position: relative; overflow: hidden; cursor: move; } <!--свойства верхней части окна закончились--> #windowTopContent { margin-right: 13px; background-image:url(images/window_top_start.png); background-position:left top; background-repeat: no-repeat; overflow: hidden; height: 30px; line-height: 30px; text-indent: 10px; font-family:Arial, Helvetica, sans-serif;<!--шрифт заголовка--> font-weight: bold;<!--жирный шрифт заголовка--> font-size: 14px;<!--размер заголовка--> color: #FFFFFF;<!--цвет заголовка--> } <!--свойства заголовка окна закончились--> #windowMin { position: absolute; right: 25px; top: 10px; cursor: pointer; } <!--свойства панели сворачивания окна закончились--> #windowMax { position: absolute; right: 25px; top: 10px; cursor: pointer; display: none; } <!--свойства панели развертывания окна закончились--> #windowClose { position: absolute; right: 10px; top: 10px; cursor: pointer; } <!--свойства панели закрытия окна закончились--> #windowBottom { position: relative; height: 270px; background-image: url(images/window_bottom_end.png); background-position: right bottom; background-repeat: no-repeat; } #windowBottomContent { position: relative; height: 270px; background-image: url(images/window_bottom_start.png); background-position: left bottom; background-repeat: no-repeat; margin-right: 13px; } <!--свойства перегородки окна закончились--> #windowResize { position: absolute; right: 3px; bottom: 5px; cursor: se-resize; } <!--свойства панели изменения размера окна закончились--> #windowContent { position:absolute; top: 30px; left: 10px; width: auto; height: auto; overflow: auto; margin-right: 10px; border: 2px solid #ccc; height: 255px; width: 375px; font-family:Arial, Helvetica, sans-serif; font-size: 11px; background-color: #fff; } #windowContent * { margin: 10px; } <!--свойства текста окна закончились--> .transferer2 { border: 1px solid #6BAF04; background-color: #B4F155; filter:alpha(opacity=20); -moz-opacity: 0.3; opacity: 0.3; } <!--свойства при вылета окна закончились--> </style>
Этап 2. Сейчас мы вставим непосредственно в содержимое страницы между тегами <body></body> нашу ссылку на открытие окна и скрипт.Шаг 1 > Вставим ссылку, которая будет вызывать нужное окно на сайте вместе с кодом блока окна.<a href="" id="windowOpen">Окно </a> <!--не забудьте изменить текст ссылки--> <div id="window"> <div id="windowTop"> <div id="windowTopContent">Пример окна</div> <img src="images/window_min.jpg" id="windowMin" /> <img src="images/window_max.jpg" id="windowMax" /> <img src="images/window_close.jpg" id="windowClose" /> </div> <div id="windowBottom"><div id="windowBottomContent"> </div></div> <div id="windowContent"><p>Окошко и любой текст в нем.<br> Вы можете изменить стили окна и полюбоваться результатом. Не бойтесь экспериментировать.</center> <!-- и не забудьте изменить текст в самом окне-->
Шаг 1 > Вставим код нужного скрипта (script
) в самый конец страницы перед закрывающим тегом </body><script type="text/javascript" > $(document).ready( function() { $('#windowOpen').bind( 'click', function() { if($('#window').css('display') == 'none') { $(this).TransferTo( { to:'window', className:'transferer2', duration: 400, complete: function() { $('#window').show(); } } ); } this.blur(); return false; } ); $('#windowClose').bind( 'click', function() { $('#window').TransferTo( { to:'windowOpen', className:'transferer2', duration: 400 } ).hide(); } ); $('#windowMin').bind( 'click', function() { $('#windowContent').SlideToggleUp(300); $('#windowBottom, #windowBottomContent').animate({height: 10}, 300); $('#window').animate({height:40},300).get(0).isMinimized = true; $(this).hide(); $('#windowResize').hide(); $('#windowMax').show(); } ); $('#windowMax').bind( 'click', function() { var windowSize = $.iUtil.getSize(document.getElementById('windowContent')); $('#windowContent').SlideToggleUp(300); $('#windowBottom, #windowBottomContent').animate({height: windowSize.hb + 13}, 300); $('#window').animate({height:windowSize.hb+43}, 300).get(0).isMinimized = false; $(this).hide(); $('#windowMin, #windowResize').show(); } ); $('#window').Resizable( { minWidth: 200, minHeight: 60, maxWidth: 700, maxHeight: 400, dragHandle: '#windowTop', handlers: { se: '#windowResize' }, onResize : function(size, position) { $('#windowBottom, #windowBottomContent').css('height', size.height-33 + 'px'); var windowContentEl = $('#windowContent').css('width', size.width - 25 + 'px'); if (!document.getElementById('window').isMinimized) { windowContentEl.css('height', size.height - 48 + 'px'); } } } ); } );</script >
Вот и все. До следующих уроков. Удачного вам времяпровождения.
[ Получить ссылку: ] [
Скрыть ссылки
] При копировании материала c web-stroytel.ucoz.com обратная ссылка обязательна!
Источник: http://www.interface.eyecon.ro/
Категория: ucoz и другое | Добавил: DEVIL009 (01.01.2010)
| Автор: Copyright / Автор: Денис Трофимов.
Просмотров: 4434
| Рейтинг: 4.2 /6 |
- Оценить -
Отлично
Хорошо
Неплохо
Плохо
Ужасно
Добавлять комментарии могут только зарегистрированные пользователи.
[
Регистрация |
Вход ]
Категории
Html
[1]
Не знание html – это постоянный тормоз, который будет преследовать на протяжении всей работы с сайтом, которая вовсе не ограничивается только его созданием.
CSS
[0]
Каскадные таблицы стилей и все, что с ними связано.
CMS системы
[3]
Почти самый простой способ создать сайт - воспользоваться CMS.
Дизайн
[8]
Учимся на профессиональных web-дизайнеров!
Общее
[10]
Все быстро, качественно и с нуля.
ucoz и другое
[22]
Все, что может помочь в освоении этой CMS.
flash
[11]
photoshop
[4]
Друзья
партнеры
Внимание!!
Статистика
Онлайн всего: 1
Гостей: 1
Пользователей: 0