вторник, 6 апреля 2010 г.

Application Express: использование всплывающих модальных окон из фреймворка jQuery

Варианты реализации:

Предлагаю два способа:
  • с использованием плагина SimpleModal;
  • с использованием стандартных диалоговых окон входящих в состав jQuery UI.

На мой взгляд второй вариант предпочтительнее, за счёт использования стандартного функционала Apex 4.0 (jQuery UI) и большей функциональности.

С использованием плагина SimpleModal

  1. Загрузить плагин SimpleModal с сайта: http://www.ericmmartin.com/projects/simplemodal
  2. Создаем две страницы в приложении (одна из которой открывается всплывающее модальное окно, вторая - собственно само содержимое всплывающего окна; в нашем случае страницы №1 и №2 соответственно)
  3. На странице №1 в свойствах установить в закладке "HTML Header and Body Attribute" значение "HTML Header":
     <style type="text/css">  
     body {height:100%; margin:0;}  
     h3 {color:#5f87ae; font-size:1.6em; padding:0; margin:0;}  
     #basic-modal-content {display:none;}  
     /* Overlay */  
     #simplemodal-overlay {background-color:#000; cursor:wait;}  
     /* Container */  
     #simplemodal-container {height:320px; width:600px; color:#bbb; background-color:#333; border:4px solid #444; padding:12px;}  
     #simplemodal-container code {background:#141414; border-left:3px solid #65B43D; color:#bbb; display:block; margin-bottom:12px; padding:4px 6px 6px;}  
     #simplemodal-container a {color:#ddd;}  
     #simplemodal-container a.modalCloseImg {background:url(../img/basic/x.png) no-repeat; width:25px; height:29px; display:inline; z-index:3200; position:absolute; top:-15px; right:-16px; cursor:pointer;}  
     #simplemodal-container #basic-modal-content {padding:8px;}  
     </style>  
     <script type="text/javascript" src="http://simplemodal.googlecode.com/files/jquery.simplemodal-1.3.4.js"></script>  
    
    здесь мы импортируем JavaScript-плагин SimpleModal на страницу, а так же CSS-стили для него:
  4. На странице №1 в свойствах установить в закладке "JavaScript" значение "Function and Global Variable Declaration":
     function modalOpen(pageNumber){  
      var newURL = window.location.protocol + "//" + window.location.host + "/apex/f?p=" +$v('pFlowId')+":"+pageNumber+":"+$v('pInstance')+":::::";  
      apex.jQuery.modal('<iframe src="' + newURL + '" height="100%" width="100%" style="border:0">', {  
      closeHTML:'',  
      containerCss:{  
       backgroundColor:"#fff",  
       borderColor:"#BDBDBD",  
       padding:0,  
       height:200,  
       width:200  
      },  
      overlayClose:false  
      });  
     }  
     function modalClose(){  
       apex.jQuery.modal.close();  
     }  
    
  5. На странице №1 создаём регион и добавляем туда кнопку по нажатие на которую будет открываться всплывающее модальное окно. Для этого в свойствах кнопки в закладке "Action When Button Clicked" установить значения полей:
    Action: Redirect to URL
    URL Target: javascript:modalOpen(2)

    ,где параметр функции есть номер страницы открываемой во всплывающем окне.
  6. Запускаем страницу №1 и нажимаем на кнопку:

С использованием стандартных диалоговых окон входящих в состав jQuery UI

  1. Создаем две страницы в приложении (одна из которой открывается всплывающее модальное окно, вторая - собственно само содержимое всплывающего окна; в нашем случае страницы №1 и №2 соответственно)
  2. На странице №1 в свойствах установить в закладке "JavaScript" значение "Function and Global Variable Declaration":
     var modalDialog=null;  
     function modalOpen(pageNumber,windowTitle,windowWidth,windowHeight){  
      var newURL = window.location.protocol + "//" + window.location.host + "/apex/f?p=" +$v('pFlowId')+":"+pageNumber+":"+$v('pInstance')+":::::";  
      modalDialog=apex.jQuery('<div></div>').html('<iframe src="' + newURL + '" height="100%" width="100%" style="border:0" frameborder="0">').dialog({autoOpen: false,modal: true,height: windowHeight,width: windowWidth,title: windowTitle});  
      modalDialog.dialog('open')  
     }  
     function modalClose(){  
      if (modalDialog!=null){  
       modalDialog.dialog('close');  
       modalDialog=null;  
      }  
     }  
    
  3. На странице №1 создаём регион и добавляем туда кнопку по нажатие на которую будет открываться всплывающее модальное окно. Для этого в свойствах кнопки в закладке "Action When Button Clicked" установить значения полей:
    Action: Redirect to URL
    URL Target: javascript:modalOpen(2,'Testing modal windows!!!',220,220)

    ,где первый параметр функции есть номер страницы открываемой во всплывающем окне, второй - наименование окна, третий - ширина окна, четвертый - высота окна.
  4. Запускаем страницу №1 и нажимаем на кнопку:

Дополнительные материалы:



1 комментарий:

  1. Полезная статья. Возможно кому-нибудь пригодится статья в развитие темы "Modal Pop Up with Dynamic Actions":
    http://monkeyonoracle.blogspot.com/2010/07/modal-pop-up-with-dynamic-actions.html

    ОтветитьУдалить

Рейтинг@Mail.ru Рейтинг блогов Protected by Copyscape Web Plagiarism Tool