Author: | TosiHyper |
---|---|
Views Total: | 475 views |
Official Page: | Go to website |
Last Update: | February 1, 2020 |
License: | MIT |
Preview:

Description:
jsWindow is a feature-rich popup library to create draggable, minimizable/maximizable, resizable popup windows for alert/confirm dialogs and message boxes on the screen.
How to use it:
1. Load the required JavaScript and CSS files in the document.
<!-- Core Stylesheet --> <link rel="stylesheet" href="/path/to/window.css" /> <!-- Icons --> <link rel="stylesheet" href="/path/to/icons.css" /> <!-- Core JavaScript --> <script src="/path/toScripts/windows.js"></script>
2. Create a basic dialog window.
var wnd = new jsWindow(); wnd.title = "jsWindow " wnd.container.setPosition(250, 50); wnd.container.setSize(400, 150); wnd.content = '<label>A dynamically created window.</label>'; wnd.show();
3. Create an alert dialog box.
jsMessager.alert("A dynamically created messagebox.", "messagebox");
4. Create a confirm dialog box.
var messager = jsMessager.confirm("A dynamically created confirm. Press {" + jsMessager.texts.yes + "} to execute callback.", "confirm", function () { jsMessager.alert("callback executed!", "confirmed"); }); messager.addEventListener("js.return", function(ev) { appendLogText("returned value of confirm: " + ev.parameter); });
5. Create a login form displayed in the dialog box.
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();