15. Введение в jQuery

Контрольные задания

1. Модальное окно. Переписать решение задания 1 к заметке 14 на jQuery.

   Решение

   praxis/15/jobs/01/index.htm

   Сначала построим сначала HTML-код модального окна.

   
      <DIV id="modwin">
        <H3 id="modwin-title">Текст заголовка</H3>
        <DIV id="modwin-inner">
          Текст сообщения модального окна
          <P id="modwin-ok"><BUTTON>Ok</BUTTON></P>
        </DIV>
        <BUTTON id="modwin-close">X</BUTTON>
      </DIV>
   

   Кнопка Ok помещена внутрь блока modwin-inner за текстом сообщения модального окна, а кнопка Х -- отдельно, за блоком modwin-inner. Кнопку Ok оставим в потоке, а для кнопки Х зададим абсолютное позиционирование и переместим ее в правый верхний угол модального окна.

   Ну а теперь начнем записывать функцию showModal.

   Сначала создадим код модального окна:

   
     // Показать модальное окно
     function showModal(title, text, width)
     {
       // Создадим модальное окно
       $('<div id="modwin">'+
            '<h3 id="modwin-title">'+ title+ '</h3>'+
            '<div id="modwin-inner">'+
               text+
               '<P id="modwin-ok"><button>Ok</button></P>'+
            '</div>'+
            '<button id="modwin-close">X</button>'+
          '</div>')
       ...   
          
     }
   

   Добавим созданный код к BODY:

   
     // Показать модальное окно
     function showModal(title, text, width)
     {
       // Создадим модальное окно
       $('<div id="modwin">'+
            '<h3 id="modwin-title">'+ title+ '</h3>'+
            '<div id="modwin-inner">'+
               text+
               '<P id="modwin-ok"><button>Ok</button></P>'+
            '</div>'+
            '<button id="modwin-close">X</button>'+
          '</div>').appendTo('body')
       ...   
          
     }
   

   Определим для созданного блока modwin ширину и координаты (высота будет определяться по содержимому):

   
     // Показать модальное окно
     function showModal(title, text, width)
     {
       // Создадим модальное окно
       $('<div id="modwin">'+
            '<h3 id="modwin-title">'+ title+ '</h3>'+
            '<div id="modwin-inner">'+
               text+
               '<P id="modwin-ok"><button>Ok</button></P>'+
            '</div>'+
            '<button id="modwin-close">X</button>'+
          '</div>').appendTo('body')
         .css(
               {
                 'width':width,
                 'left':getScrollLeft()+($(window).width()-width)/2,
                 'top':getScrollTop()+($(window).height()-$('#modwin').height())/2
               }
             );   
       ...   
          
     }
   

   Наконец, припишем обработчики кнопкам Ok и Х:

   
     // Показать модальное окно
     function showModal(title, text, width)
     {
       // Создадим модальное окно
       $('<div id="modwin">'+
            '<h3 id="modwin-title">'+ title+ '</h3>'+
            '<div id="modwin-inner">'+
               text+
               '<P id="modwin-ok"><button>Ok</button></P>'+
            '</div>'+
            '<button id="modwin-close">X</button>'+
          '</div>').appendTo('body')
         .css(
               {
                 'width':width,
                 'left':getScrollLeft()+($(window).width()-width)/2,
                 'top':getScrollTop()+($(window).height()-$('#modwin').height())/2
               }
             );   
       // Назначим обработчики на кнопки закрытия окна
       $('#modwin #modwin-close, #modwin #modwin-ok')
          .click(function() { $('#modwin').remove();} );
          
     }
   

   Все, функция написана. Все остальное зададим в стилевом файле.

   praxis/15/jobs/01/index.htm