Advanced User Interface Controls and Components
An example on how to open a new tab by using the last tab as an add button. Whenever the add tab is clicked, a new tab will be created and added at last position.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/integralui.tabstrip.css" />
<link rel="stylesheet" href="css/themes/theme-flat-blue.css" />
<script type="text/javascript" src="external/angular.min.js"></script>
<script type="text/javascript" src="js/angular.integralui.min.js"></script>
<script type="text/javascript" src="js/angular.integralui.tabstrip.min.js"></script>
</head>
<body>
<div ng-app="appModule" ng-controller="appCtrl">
<iui-tabstrip name="{{ctrlName}}" class="directive" tabs="tabs" before-select="onBeforeSelect(e)">
<iui-tab ng-repeat="tab in tabs" name="{{tab.name}}" heading="{{tab.text}}">
<iui-tab-header>
<span class="icons {{tab.icon}}" ng-show="tab.icon != undefined"></span>
<span>{{tab.text}}</span>
</iui-tab-header>
<div class="tab-content">
{{tab.name}} Content
</div>
</iui-tab>
</iui-tabstrip>
</div>
</body>
</html>
angular
.module("appModule", ["integralui"])
.controller("appCtrl", ["$scope", "IntegralUITabStripService", function($scope, $ctrlService){
$scope.ctrlName = "ctrlSample";
$scope.tabs = [
{ id: 1, name: 'Tab1', text: 'Tab 1' },
{ name: 'empty', icon: 'new-tab' }
];
var tabCount = $scope.tabs.length - 1;
var getCurrentSelection = function(){
return $ctrlService.selectedTab($scope.ctrlName);
}
var createNewTab = function(){
tabCount++;
return { id: tabCount, name: "Tab" + tabCount, text: "Tab " + tabCount };
}
$scope.onBeforeSelect = function(e){
if (e.tab && e.tab.name == 'empty'){
var newTab = createNewTab();
$ctrlService.insertTabBefore($scope.ctrlName, newTab, e.tab);
$ctrlService.selectedTab($scope.ctrlName, newTab);
return false;
}
}
}]);
.directive
{
height: 300px;
}
.new-tab
{
background-position: -208px -80px;
margin: 0 0 0 4px;
}
.tab-content
{
padding: 30% 10px;
text-align: center;
}