Создаем красивое всплывающее окно посредством jQuery - ucoz и другое - создаем - Каталог статей - Создай свой сайт
Приветствую Вас ГостьЧетверг, 28.03.2024, 15:26

web-stroytel


Каталог статей

Главная » Статьи » создаем » ucoz и другое

Создаем красивое всплывающее окно посредством 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">&nbsp;</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>



Вот и все. До следующих уроков. Удачного вам времяпровождения.




[ Получить ссылку: ]

Источник: http://www.interface.eyecon.ro/
Категория: ucoz и другое | Добавил: DEVIL009 (01.01.2010) | Автор: Copyright / Автор: Денис Трофимов.
Просмотров: 4434 | Рейтинг: 4.2/6 |
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Регистрация
Категории
Html [1]
Не знание html – это постоянный тормоз, который будет преследовать на протяжении всей работы с сайтом, которая вовсе не ограничивается только его созданием.
CSS [0]
Каскадные таблицы стилей и все, что с ними связано.
CMS системы [3]
Почти самый простой способ создать сайт - воспользоваться CMS.
Дизайн [8]
Учимся на профессиональных web-дизайнеров!
Общее [10]
Все быстро, качественно и с нуля.
ucoz и другое [22]
Все, что может помочь в освоении этой CMS.
flash [11]
photoshop [4]
Поиск
Опрос:
Лучший браузер
Всего ответов: 56
Друзья
Rambler's Top100
партнеры

Внимание!!
Статистика


Онлайн всего: 1
Гостей: 1
Пользователей: 0



 При копировании материалов ссылка на источник обязательна.
 Если какой либо материал нарушает ваше авторское право, то пожалуйста обратитесь к администрации через ЛС.
 Шаблон защищен авторским правом. подробнее