Introduction:
This article explain you to design the tab menu using CSS and AngularJS
Description:
In the Previous post i explained about ng-include directive. Below code is used to design the dynamic tabs menu using CSS and AngularJS ,and display the pages in ng-include directive when user clicks on tab menu.
To implement this we need to write the code like as shown below
Java Script:
<script src="../scripts-angular/angular.js"></script>
<script type="text/javascript">
var myApp = angular.module("myApp", []);
myApp.controller('tabsctrl', ['$scope', function ($scope) {
$scope.tabs = [
{ title: 'Home', url: 'Home.html', },
{ title: 'About', url: 'About.html', },
{ title: 'Contact', url: 'Contact.html', }
];
$scope.currentTab = 'Home.html'
$scope.onClickTab = function (tab) {
$scope.currentTab = tab.url;
}
$scope.isActiveTab = function (tabUrl) {
return tabUrl == $scope.currentTab;
}
}]);
</script>CSS
<style type="text/css">
/* Tab Content - menucool.com */
ul.tabs {
padding: 7px;
font-size: 0;
margin: 0;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the tabs as desired*/
}
ul.tabs li {
display: inline;
margin: 0;
margin-right: 3px; /*distance between tabs*/
}
ul.tabs li a {
text-decoration: none;
position: relative;
padding: 8px 16px 8px 16px;
border: 1px solid #c2d6e6;
border-bottom-color: #c2d6e6;
outline: none;
color: #4D5569;
font-size: 14px;
font-weight: bold;
text-align: center;
/*background-image:url(images/textbg.gif);*/
background-repeat: repeat-x;
background-position: center top;
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-radius: 3px 3px 0px 0px;
border-radius: 3px 3px 0px 0px;
cursor: pointer;
}
ul.tabs li a:visited {
color: #000;
}
ul.tabs li a:hover {
color: #298CAD;
border: 1px solid #c2d6e6;
}
ul.tabs li.selected a {
position: relative;
top: 0px;
font-weight: bold;
background: white;
border: 1px solid #c2d6e6;
border-bottom: 1px solid #fff;
color: #2A6598;
}
ul.tabs li.selected a:hover {
text-decoration: none;
color: #298CAD;
}
div.tabcontents {
border: 1px solid #c2d6e6;
padding: 7px;
background-color: #FFF;
border-radius: 3px 3px 3px 3px;
margin-top: 1px;
}
.active {
background-color: #FFF;
color: #000;
}
</style>HTML
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Tabs uisng AngularJS and Ng-include</title>
<script src="../scripts-angular/angular.js"></script>
</head>
<body>
<form id="frmTabs">
<div ng-app="myApp">
<div class="row margin_5">
<div class="col-lg-12 col-sm-12 col-md-12">
<div ng-controller="tabsctrl">
<div id="tabs">
<ul class="tabs">
<li ng-repeat="tab in tabs" ng-class="{selected:isActiveTab(tab.url)}"><a ng-click="onClickTab(tab)">{{tab.title}}</a> </li>
</ul>
</div>
<div id="mainView" class="tabcontents">
<div ng-include="currentTab"></div>
</div>
</div>
</div>
</div>
</div>
<div style="border: 1px solid #000;margin-top:10px;">
<div style="text-align: center;"><b>www.logicspark.in</b></div>
</div>
</form>
</body>
</html>
DEMO
 |
| Add caption |
No comments:
Post a Comment