1. Index.jsp
2. button.jsp
3. button.js
4. Menu.css
The original project is written on JSP with back-end database as Oracle 12c. All the dynamic page design is done with AngularJS and Ajax. Just check out the code below.
Index.jsp
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" charset=utf-8" />
<link rel="stylesheet" type="text/css" href="stylesheet/menu.css">
<link rel="stylesheet" type="text/css" href="stylesheet/main.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js">
</script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-route.min.js">
</script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-animate.js">
</script>
<script src="src/menu.js"></script> <!-- Menu.js contains the JSON data to build the toolbar -->
<title>ABC Industries Limited</title>
</head>
<body>
<div class="mainDiv" id="mainDiv">
<div width=80% id="divHeader" ng-controller="RouteController">
<jsp:include page="button.jsp" /> <!-- This is the section where button.jsp is included -->
<jsp:include page="menu.jsp" />
</div>
<div id="ngviewDiv" ng-view=""> <!-- This is where the invoked templated are embedded -->
</div>
<!--<img width=84% class="image1" src="Images/BACK.jpg" />-->
</div>
</body>
</html>
Button.jsp
<div class="mnuContainer">
<table id="btntable" width=40% height=20% border=1>
<tr id="mnuButton">
<td width=10% ng-repeat="bmenu in buttonMenu"><center><a href="" ng-click="buttonOption('{{bmenu.funcLink}}')"><img width=30% height=30% ng-src="{{bmenu.Link}}" class="btnsubmnu" /></a></center></td>
</tr></table>
</div>
Menu.js
myApp=angular.module('myApp',['ngRoute']);
myApp.controller('RouteController',function($scope,$http) {
/* I have not defined the linked function (funcLink) newRecord, deleteRecord, etc. for it will make the code to lengthy to understand. Button images is the directory where all the button images are located.*/
$scope.buttonMenu=[
{'Name':'New','Link':'Images/new.ico','funcLink':'newRecord'},
{'Name':'Delete','Link':'Images/delete.ico','funcLink':'deleteRecord'},
{'Name':'Query','Link':'Images/query.ICO','funcLink':'queryRecord'},
{'Name':'Execute','Link':'Images/execute.ico','funcLink':'executeRecord'},
{'Name':'First','Link':'Images/First.ICO','funcLink':'firstRecord'},
{'Name':'Previous','Link':'Images/Prev.ICO','funcLink':'prevRecord'},
{'Name':'Next','Link':'Images/Next.ICO','funcLink':'nextRecord'},
{'Name':'Last','Link':'Images/Last.ICO','funcLink':'lastRecord'},
{'Name':'Print','Link':'Images/print.ico','funcLink':'printRecord'}
];
});
Menu.css
div.btnDiv
{
padding:5px;
opacity:0.8;
box-shadow: 2px 2px 1px 2px #999;
background:white;
cursor:pointer;
cursor:hand;
border-radius: 5px;
width:60%;
height:60%;
}
img.imgsubmnu
{
width:100%;
height:100%;
}
No comments:
Post a Comment