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;}
$(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()); } };
- Content set to a jQuery wrapped object, non-resizable
- Content set to HTML
- No Content, positioned dialog
- No Content, no options (default) dialog
No comments:
Post a Comment