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