Friday, June 11, 2010

Test code for my previous post Telerik RadWindow Client-Side Content Container.  Sorry, the formatting is a little off.
CSS:
ul#actionList, ul#actionList li {margin: 0; padding: 0; list-style: none; line-height: 20px;}
ul#actionList { margin: 5px 10px; } ul#actionList li { margin-bottom: 5px; }
div#echoConsole { margin: 20px; border: 1px solid #ababab; background-color: #fbfec2; padding: 5px; }
p { padding: 5px; margin: 0; font-family: Arial; font-size: 12px; }
.mar-b-10 {margin-bottom: 10px;}
   
JavaScript:
$(document).ready(function() {
      // attach the click event to the buttons - button will open the new RadWindow dialog
      $('ul#actionList button').click(function(e) {
         e.preventDefault();
         var btnID = $(this).get(0).id;
         switch (parseInt(btnID.substring(btnID.length - 1))) {
            case 0:
               radWindowExtensions.openDialog({ width: 400, height: 400, title: 'This is the Dialog Title', content: $('div#hiddenDiv'), resizable: false, onOpen: dialogHandlers.onOpen, onClosing: dialogHandlers.onClosing, onClosed: dialogHandlers.onClosed });
               break;
            case 1:
               radWindowExtensions.openDialog({ width: 500, height: 600, title: 'This is the Dialog Title', content: $('div#hiddenDiv').html(), resizable: true, onOpen: dialogHandlers.onOpen, onClosing: dialogHandlers.onClosing, onClosed: dialogHandlers.onClosed });
               break;
            case 2:
               radWindowExtensions.openDialog({ xPos: '100', yPos: 10, onOpen: dialogHandlers.onOpen, onClosing: dialogHandlers.onClosing, onClosed: dialogHandlers.onClosed });
               break;
            case 3:
               radWindowExtensions.openDialog();
               break;
         }
      });
   });

   // test handlers object - will echo event handler messages to a div tag
   var dialogHandlers = {
      _getConsole: function() { if (!dialogHandlers._console) { dialogHandlers._console = $('div#echoConsole').show(); } return dialogHandlers._console; },
      _echo: function(msg) { var c = dialogHandlers._getConsole(); c.append($('<div/>').addClass('mar-b-10').html(msg)); },
      onOpen: function(content) {
         // use onOpen event handler to modify the content - e.g. add event handlers to buttons, etc...
         dialogHandlers._echo('onOpen event fired on RadWindow with ID of ' + this.get_name());
         $(content).find('p:first').css('color', 'red');
      },         
      onClosing: function(content) {
         // use onClosing event handler to clean up content - e.g. unbind event handlers.
         dialogHandlers._echo('onClosing event fired on RadWindow with ID of ' + this.get_name());            
         dialogHandlers._echo('number of paragraphs: ' + $(content).find('p').size());
      },
      onClosed: function(content) {
         dialogHandlers._echo('onClosed event fired on RadWindow with ID of ' + this.get_name());
         dialogHandlers._echo('number of paragraphs: ' + $(content).find('p').size());
      }
   };
HTML:
  • Content set to a jQuery wrapped object, non-resizable
  • Content set to HTML
  • No Content, positioned dialog
  • No Content, no options (default) dialog
Morbi scelerisque urna aliquam sapien dictum eget lacinia justo eleifend. Morbi eu nibh nibh? Morbi non justo id magna fermentum accumsan. Donec nunc mi, facilisis a venenatis eu, congue in ligula? Praesent nisl turpis, aliquet vitae eleifend non, auctor id erat. Nam a felis ac mauris ornare lacinia. Cras a massa sit amet leo tempor tincidunt. Curabitur pellentesque enim id est porta ornare. Morbi orci leo, sodales et lobortis vel, egestas at magna. Nam a nisi odio, suscipit ullamcorper quam. Pellentesque ullamcorper est vel quam blandit vel laoreet libero euismod. Nam orci sem, condimentum id interdum feugiat, laoreet nec mi. Duis varius cursus dolor id porttitor. Nulla id ligula sit amet leo imperdiet sollicitudin. Donec pulvinar, sem quis condimentum pellentesque, orci nisl placerat tellus, at egestas ante arcu nec lectus. Nullam cursus porta molestie. Sed in auctor metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce volutpat vestibulum erat quis ultrices.

No comments: