Разберем еще один пример для библиотеки jQuery – построение диалогового окна. При всей полезности этого плагина не могу не отметить, что по крайней мере в IE и Opera присутствуют небольшие огрехи (их можно увидеть и на сайте разработчиков), но они связаны скорее со стилевым оформлением, чем с работой самой библиотеки. В FireFox же и Netscape Navigator никаких проблем не наблюдалось. Поскольку штука получилась весьма полезная – разберем ее подробнее. Внимание! Эта статья устарела! Новую статью можно почитать здесь.

Итак, что мы можем получить подключив несколько 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 с сайта, или еще что-то…

google.com bobrdobr.ru del.icio.us technorati.com linkstore.ru news2.ru rumarkz.ru memori.ru moemesto.ru