jsWindow

Draggable and sizeable window javascript library and css

This library contributes dynamic creation of fully customizeable and event based windows.

• no predefined HTML needed
• custom themes for windows
• custom settings for windows
• free draggable and resizeable (can be disabled)
• window/task bar integrated
• tooltips integrated
• minimize, maximize and close windows (reuseable)
• event based
• class based
• typed properties

window

var wnd = new jsWindow();
	
wnd.title = "my Window"
wnd.container.setPosition(250, 50);
wnd.container.setSize(400, 150);
		
wnd.content = '<label>A dynamically created window.</label>';
		
wnd.show();

messagebox

jsMessager.alert("A dynamically created messagebox.", "messagebox");

confirm

jsMessager.confirm("A dynamically created confirm. Press {Yes} to execute callback.", "confirm", function() {
	jsMessager.alert("callback executed!", "confirmed");
});

Examples

Login - window via jsMessager

var wnd_login = new jsMessager();
			
wnd_login.title = "login";
wnd_login.addButton("login", "login", false);
wnd_login.addButton("cancel", "cancel", true);
wnd_login.textContainer.innerHTML = '<div style="display: block; padding: 10px;"><p style="margin-bottom: 0;">Username</p><input class="form-control" id="inp_user" /><p style="margin-bottom: 0;">Password</p><input class="form-control" type="password" id="inp_password" /></div>'
		
		
wnd_login.addEventListener("js.return", function(ev) {
	var value = ev.parameter;

	if (value === "login") {
		var user = wnd_login.body.container.querySelector("#inp_user").value;
		var password = wnd_login.body.container.querySelector("#inp_password").value;
			
		jsMessager.alert('user: ' + user + " | password: " + password);
			
		if (user === "user1234" && password === "jsWindow") { wnd_login.close(); } else {
			jsMessager.alert("credentials are incorrect!");
		}
	} else { wnd_login.close(); }
});
		
wnd_login.show();