$.jqWindow('example_1.1', {
width : '50%',
height : 300,
top : 'middle',
left : '30%',
title : 'Simple window 1',
content: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.'
}).show();
$.jqWindowManager().addWindow('example_1.2', {
top : 0,
left : 0,
title : 'Simple window 2',
content: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.'
}).show();
Demo:
Show overlay and modal window
Javascript source:
$.jqWindow('example_2.1', {
width : 600,
height : 600,
title : 'I`m overlay window',
content : 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.',
overlayable : true
}).show();
$.jqWindow('example_2.2', {
title : 'I`m modal window',
content: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.',
modal : true
}).show();
Demo:
Get window
Javascript source:
var jqW1 = $.jqWindow('example_3.1', {
title : 'example_3.1'
});
var jqW2 = $.jqWindow('example_3.2', {
top : '10%',
left : '10%',
title : 'example_3.2'
});
$.jqWindowManager().getWindowByName('example_3.1').show();
$.jqWindowManager().getWindow(jqW2.getId()).show();
Demo:
Window event listener usage
Javascript source:
$.jqWindow('example_4', {
title : 'Listener usage',
content: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.',
}).addEventListener('after_show', function(jqWindow) {
jqWindow.setContent('New content set after show');
}).addEventListener('before_close', function(jqWindow) {
return confirm('Are you sure?');
}).addEventListener(function(eventType, jqWindow) {
jqWindow.setTitle('Current event: ' + eventType);
return true;
}).show();
Demo:
Window manager event listener usage
Javascript source:
$.jqWindowManager().addEventListener('after_show', function(jqWindow) {
alert('Window ' + jqWindow.getName() + ' show' );
});
$.jqWindow('jqW_1', {
top : '10%',
left : '20%',
title : 'jqW_1 - Window manager event listener usage',
content: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.',
}).show();
$.jqWindow('jqW_2', {
title : 'jqW_2 - Window manager event listener usage',
content: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.',
}).show();
Demo:
Window manipulations
Javascript source:
var jqW = $.jqWindow('jqW_1', {
top : 0,
left : 0,
title : 'Window manipulations',
content : 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.',
overlayable : true
});
setTimeout(function() {
jqW.show();
}, 1000);
setTimeout(function() {
jqW.resize('80%', '80%');
}, 2000);
setTimeout(function() {
jqW.drag('10%', '10%');
}, 3000);
setTimeout(function() {
jqW.close();
}, 4000);
Demo:
Window container usage
Javascript source:
$('#container_1').jqWindow('example_7.1', {
width : '50%',
height : '50%',
title : 'example_7.1 - Inner window',
content : 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.',
}).show();
$('#container_2').jqWindowManager().addWindow('example_7.2', {
width : '50%',
height : '50%',
title : 'example_7.2 - Inner window',
content : 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.',
}).show();