[html]
<!DOCTYPE html>
<html ng-app="SynApp">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no" />
<meta charset="UTF-8" />
<link href="themes/default/ej.web.all.min.css" rel="stylesheet" type="text/css" />
<title>EJ Navigation Drawer with Angular </title>
<script src="scripts/jquery-2.0.0.min.js" type="text/javascript"></script>
<script src="scripts/ej.web.all.min.js" type="text/javascript"></script>
<script src="scripts/ej.unobtrusive.min.js" type="text/javascript"></script>
<script src="scripts/jsrender.min.js" type="text/javascript"></script>
<script src="scripts/angular.min.js" type="text/javascript"></script>
<script src="scripts/ej.widget.angular.min.js" type="text/javascript"></script>
</head>
<body ng-controller="navPaneCtrl">
<div class="header">
<div id="header">
Home
</div>
</div>
<!--navigation wrapper-->
<div class="navwrapper">
<!--navigation drawer with angular attributes-->
<div ej-navigationdrawer e-enablelistview="true" e-targetid="header" e-position="normal" id="navpane">
<e-items>
<e-item e-text="value1"></e-item>
<e-item e-text="value2"></e-item>
<e-item e-text="value3"></e-item>
<e-item e-text="value4"></e-item>
</e-items>
</div>
</div>
<script>
//angular controller to assign angular variable for all the list items
angular.module('SynApp', ['ejangular'])
.controller('navPaneCtrl', function ($scope) {
$scope.value1 = "Home";
$scope.value2 = "Profile";
$scope.value3 = "Photos";
$scope.value4 = "Location";
});
</script>
<style>
body
{
margin: 0;
}
.header
{
background: none repeat scroll 0 0 blue;
height: 45px;
width: 100%;
}
#header
{
background-image: url("themes/images/drawericon.png");
background-repeat: no-repeat;
height: 38px;
width: 38px;
color: white;
font-size: 32px;
padding-top: 4px;
text-indent: 45px;
}
.navwrapper
{
position:relative;
height:700px;
}
</style>
</body>
</html>
|