Advanced User Interface Controls and Components
In this sample you can create and/or modify a TabStrip using several different methods:
<!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" events="ctrlEvents" show-close-button="false">
<iui-tab ng-repeat="tab in tabs" name="{{tab.name}}" heading="{{tab.text}}">
<div class="tab-content">
{{tab.name}} Content
</div>
</iui-tab>
</iui-tabstrip>
<div>
<button ng-click="add()">Add</button><br />
<button ng-click="insertAfter()" ng-disabled="disableButtons">Insert After</button><br />
<button ng-click="insertBefore()" ng-disabled="disableButtons">Insert Before</button><br />
<div class="inline-block">
<button class="inline-button" ng-click="insertAt()">Insert At</button><input ng-model="insertPos" type="number" min="0" max="100" style="width:35px" />
</div>
<button ng-click="remove()" ng-disabled="disableButtons">Remove</button><br />
<div class="inline-block">
<button class="inline-button" ng-click="removeAt()" ng-disabled="disableButtons">Remove At</button><input ng-model="removePos" type="number" min="0" max="100" style="width:35px" /><br />
</div>
<button ng-click="clear()" ng-disabled="disableButtons">Clear</button>
</div>
</div>
</body>
</html>
angular
.module("appModule", ["integralui"])
.controller("appCtrl", ["$scope", "IntegralUITabStripService", "$timeout", function($scope, $ctrlService, $timeout){
$scope.ctrlName = "ctrlSample";
$scope.insertPos = 0;
$scope.removePos = 0;
$scope.disableButtons = false;
$scope.tabs = [
{ id: 1, name: 'Tab1', text: 'Tab 1' },
{ id: 2, name: 'Tab2', text: 'Tab 2' },
{ id: 3, name: 'Tab3', text: 'Tab 3' }
];
var tabCount = $scope.tabs.length;
var getCurrentSelection = function(){
return $ctrlService.selectedTab($scope.ctrlName);
}
var createNewTab = function(){
tabCount++;
return { id: tabCount, name: "Tab" + tabCount, text: "Tab " + tabCount };
}
$scope.add = function(){
$ctrlService.addTab($scope.ctrlName, createNewTab());
}
$scope.insertAfter = function(){
$ctrlService.insertTabAfter($scope.ctrlName, createNewTab(), getCurrentSelection());
}
$scope.insertAt = function(){
$ctrlService.insertTabAt($scope.ctrlName, createNewTab(), $scope.insertPos);
}
$scope.insertBefore = function(){
$ctrlService.insertTabBefore($scope.ctrlName, createNewTab(), getCurrentSelection());
}
$scope.remove = function(){
$ctrlService.removeTab($scope.ctrlName, getCurrentSelection());
}
$scope.removeAt = function(){
$ctrlService.removeTabAt($scope.ctrlName, $scope.removePos);
}
$scope.clear = function(){
$ctrlService.clearTabs($scope.ctrlName);
tabCount = 0;
}
$scope.onClear = function(e){
updateTabStripAppearance();
}
$scope.onTabAdded = function(e){
}
$scope.onTabRemoved = function(e){
updateTabStripAppearance();
}
var updateTabStripAppearance = function(){
var updateTimer = $timeout(function(){
if ($scope.tabs.length == 0){
$scope.ctrlBackground = 'white';
$scope.ctrlBorder = 'thin solid gray';
}
else {
$scope.ctrlBackground = 'transparent';
$scope.ctrlBorder = 'thin solid transparent';
}
$scope.disableButtons = $scope.tabs.length > 0 ? false : true;
$timeout.cancel(updateTimer);
}, 1);
}
$scope.ctrlEvents = {
clear: function(){
return $scope.onClear();
},
tabAdded: function(e){
return $scope.onTabAdded(e);
},
tabRemoved: function(e){
return $scope.onTabRemoved(e);
}
}
}]);
.directive
{
height: 300px;
}
button
{
margin: 5px 0;
width: 125px;
}
.inline-block
{
display: inline-block;
margin: 3px 0;
}
.inline-button
{
width: 85px;
margin-right: 3px;
}
.tab-content
{
padding: 30% 10px;
text-align: center;
}