angular-bootstrap-scrolling-tabs
Version:
Angular directive for scrollable Bootstrap Tabs
49 lines (37 loc) • 1.83 kB
HTML
<html>
<head>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="../../dist/scrolling-tabs.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="scrolling-tabs-header">Angular Bootstrap Scrolling Tabs</div>
<div ng-app="myapp">
<div class="scrolling-tabs-container" ng-controller="MainController as main">
<div class="scrolling-tabs-subheader">
<div>scrolling-tabs-wrapper</div>
<div>Attribute Directive Wrapping AngularUI Tabs <button type="button" ng-click="main.addTab()">Add Tab</button></div>
</div>
<div scrolling-tabs-wrapper watch-tabs="main.tabs">
<uib-tabset>
<uib-tab ng-repeat="tab in main.tabs" heading="{{tab.title}}" active="tab.active" disabled="tab.disabled">
{{tab.content}}
<button ng-click="main.clickInside()">Click Me!</button>
<div>testCount: <span ng-bind="main.testCount"></span></div>
<div ng-repeat="testString in main.testStrings" ng-bind="testString"></div>
</uib-tab>
</uib-tabset>
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.2.js"></script>
<script src="../../dist/scrolling-tabs.js"></script>
<script src="app.js"></script>
<script src="MainService.js"></script>
<script src="MainController.js"></script>
</body>
</html>