Today I think to post something related to JQuery
Our Goal
To create a JQX Window using jquery with minimize and maximize options and show the loader inside jqx window when the page loads.
Here is Your Code.
Step 1:
Add the following JS and css files in your project.
Our Goal
To create a JQX Window using jquery with minimize and maximize options and show the loader inside jqx window when the page loads.
Here is Your Code.
Step 1:
Add the following JS and css files in your project.
- jquery-1.10.2.min.js
- gettheme.js
- jqxcore.js
- jqxwindow.js
- jqxbuttons.js
- jqx.base.css
http://www.jqwidgets.com/download/ - Download the required files from this link.
Step 2:
Create index.jsp page and add the below code.
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>JQx Window</title>
<link rel="stylesheet" href="css/jqx.base.css" type="text/css" />
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/gettheme.js"></script>
<script type="text/javascript" src="js/jqxcore.js"></script>
<script type="text/javascript" src="js/jqxwindow.js"></script>
<script type="text/javascript" src="js/jqxbuttons.js"></script>
<script>
(function( $ ) {
$(function () {
var theme = getDemoTheme();
$("#jqxwindow").jqxWindow({
showCollapseButton: true, height:600, width: 1000, theme:theme, title:'JQX Window', resizable: false , autoOpen: false, zIndex: 0, isModal : true
});
$('#openWindow').jqxButton({ theme:theme, width: '80px' });
$("#jqxwindow").on("open", function () {
loadPage('jsp/welcome.jsp'); //Load welcome.jsp inside jqx window
});
$("#jqxwindow").on("close", function () {
clearPage();
});
$('#jqxwindow').jqxWindow('focus');
var loadPage = function (url) {
$.get(url, function (data) {
$('#content').html(data); //load the page inside content div
});
};
var clearPage = function () {
$('#content').html('<div>' + "<img src='images/loader.gif' style='margin-top: 50px;'>" +" <h4 style='color:gray;''>Loading please wait..</h4>"+ '</div>');
};
$("#openWindow").click(function() {
$("#jqxwindow").jqxWindow('open'); // open jqx window on button click
});
});
})(jQuery);
</script>
</head>
<body class='default'>
<div align="center">
<button id="openWindow">Show</button>
</div>
<div id='jqxwindow'>
<div>
<div id="content">
<img src='images/loader.gif' style="margin-top: 50px;"/>
<h4 style="color:gray;">Loading please wait..</h4>
</div>
</div>
</div>
</body>
</html>
Add the loader.gif file in to your project under WEB-INF/images folder.
Step 3:
Create welcome.jsp file under Webcontent/jsp folder.
<%@ page isErrorPage="true" %>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Welcome Page</title>
</head>
<body>
<div align="center" style="margin-top: 200px;">
<h3>Welcome You are done with JQX window Loader.</h3>
</div>
</body>
That's All Folk's
No comments:
Post a Comment