angular-ui-tab-scroll
Version:
A scrollable tab plugin intended for scrolling UI Bootstrap tabset.
84 lines (73 loc) • 2.95 kB
HTML
<html ng-app="TabScrollDemo" ng-controller="MainCtrl as main">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.0.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.css" />
<script src="app.js"></script>
<!-- links to files of angular-ui-tab-scroll -->
<link rel="stylesheet" href="../angular-ui-tab-scroll.css" />
<script src="../angular-ui-tab-scroll.js"></script>
<style>
.tabContent{
background-color: #FBFBFB;
height: 100%;
text-align: center;
padding-top: 50px
}
.menuHeader{
padding: 5px 0 10px 15px;
}
.menuHeader a{
padding-right: 5px;
font-size: 10px;
}
</style>
</head>
<body>
<div style="padding:30px">
<h1>Demo for angular-ui-tab-scroll</h1>
<a href="https://github.com/VersifitTechnologies/angular-ui-tab-scroll">https://github.com/VersifitTechnologies/angular-ui-tab-scroll</a>
<br/><br/><br/><br/>
<scrollable-tabset api="main.scrlTabsApi" tooltip-left-placement="top"
drop-down-header-template-url="menuHeaderTemplate"
drop-down-header-class="menuHeader">
<uib-tabset style="height: 300px">
<uib-tab>
<uib-tab-heading>First tab</uib-tab-heading>
<div class="tabContent">First tab content</div>
</uib-tab>
<uib-tab ng-repeat="tab in main.tabs">
<uib-tab-heading>{{tab.heading}}</uib-tab-heading>
<div class="tabContent">{{tab.content}}</div>
</uib-tab>
<uib-tab>
<uib-tab-heading>Last tab</uib-tab-heading>
<div class="tabContent">Last tab content</div>
</uib-tab>
</uib-tabset>
</scrollable-tabset>
<script type="text/ng-template" id="menuHeaderTemplate">
<div>
<a href="#">something</a>
<a href="#">nothing</a>
</div>
</script>
<br/><br/><br/><br/><br/><br/>
<button type="button" class="btn btn-default" ng-click="main.addTab()">add tab</button>
<button type="button" class="btn btn-default" ng-click="main.removeTab()">remove tab</button>
<br/><br/><br/>
<h4>usage of api:</h4>
<button type="button" class="btn btn-default" ng-click="main.reCalcScroll()">re-calculate scroll</button>
<div class="btn-group" uib-dropdown>
<button id="single-button" type="button" class="btn btn-default" uib-dropdown-toggle>
Scroll into view <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="single-button">
<li role="menuitem" ng-click="main.scrollIntoView()"><a href="#">Selected tab</a></li>
<li role="menuitem" ng-click="main.scrollIntoView(6)"><a href="#">Tab index 6</a></li>
</ul>
</div>
</div>
</body>
</html>