Today, we will show you how to create a Login window in a few steps using the jqxWindow plugin.
1. Create a new html page and reference the jQWidgets scripts and styles.
<link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="jqwidgets/styles/jqx.shinyblack.css" type="text/css" />
<script type="text/javascript" src="scripts/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="jqwidgets/jqxwindow.js"></script>
<script type="text/javascript" src="jqwidgets/jqxbuttons.js"></script>
2. Add the HTML code for the Login window. We set the window caption by setting the “caption” attribute, but you can also set it by appending an additional DIV before the content of the window. Then we add a simple Form to the window’s content with username and password input fields and a submit button.
<div id="window" caption="Login">
<div>
<form method="post" action="?page=login">
<table>
<tr>
<td>Username:</td>
<td><input style="width: 150px;" type="text" name="user" /></td>
</tr>
<tr>
<td>Password:</td>
<td><input style="width: 150px;" type="password" name="password" /></td>
</tr>
<tr>
<td colspan="2" align="right" valign="bottom">
<input type="submit" id="submit" value="Login" />
</td>
</tr>
</table>
</form>
</div>
</div>
3. Add the initialization script for the window and button plugins. The following code example creates a window and button with ‘shinyblack’ theme and the window’s display mode is modal i.e it requires user interaction and also blocks the UI outside the window until you click the login button.
<script type="text/javascript">
$(document).ready(function () {
$('#window').jqxWindow({ theme: "shinyblack", width: 250, height: 130, isModal: true });
$('#submit').jqxButton({ theme: "shinyblack" });
});
</script>
CodeProject