angular-bootstrap-scrolling-tabs
Version:
Angular directive for scrollable Bootstrap Tabs
102 lines (75 loc) • 3.99 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">
<!-- **** Use Case #1: Replace Bootstrap nav-tabs tablist <ul> with <scrolling-tabs> element directive **** -->
<div class="scrolling-tabs-subheader">
<div>scrolling-tabs</div>
<div>Element Directive <em>Replacing</em> nav-tabs tablist</div>
</div>
<!-- Replace ul.nav-tabs with scrolling-tabs element directive -->
<scrolling-tabs tabs="{{main.uc1Tabs}}"
prop-pane-id="paneId"
prop-title="title"
prop-active="active"
prop-disabled="disabled"
tab-click="main.handleClickOnTab($event, $index, tab);">
</scrolling-tabs>
<!-- Tab panes -->
<div class="tab-content">
<div id="{{tab.paneId}}" class="tab-pane" ng-class="{ 'active': tab.active }" ng-repeat="tab in main.uc1Tabs">{{tab.content}}</div>
</div>
<!-- **** Use Case #2: Wrap Bootstrap nav-tabs tablist with scrolling-tabs-wrapper attribute directive **** -->
<div class="scrolling-tabs-subheader">
<div>scrolling-tabs-wrapper</div>
<div>Attribute Directive <em>Wrapping</em> nav-tabs tablist</div>
</div>
<!-- wrap nav-tabs ul in a div with scrolling-tabs-wrapper directive on it -->
<div scrolling-tabs-wrapper>
<!-- Standard Bootstrap ul.nav-tabs -->
<ul class="nav nav-tabs" role="tablist">
<li ng-class="{ 'active': tab.active, 'disabled': tab.disabled }" ng-repeat="tab in main.uc2Tabs">
<a ng-href="{{'#' + tab.paneId}}" role="tab" data-toggle="tab">{{tab.title}}</a>
</li>
</ul>
</div>
<!-- Tab panes -->
<div class="tab-content">
<div id="{{tab.paneId}}" class="tab-pane" ng-class="{ 'active': tab.active }" ng-repeat="tab in main.uc2Tabs">{{tab.content}}</div>
</div>
<!-- **** Use Case #2a: Wrap Bootstrap nav-pills with scrolling-tabs-wrapper attribute directive **** -->
<div class="scrolling-tabs-subheader">
<div>scrolling-tabs-wrapper</div>
<div>Attribute Directive <em>Wrapping</em> nav-pills</div>
</div>
<!-- wrap nav-pills ul in a div with scrolling-tabs-wrapper directive on it -->
<div scrolling-tabs-wrapper>
<!-- Standard Bootstrap ul.nav-pills -->
<ul class="nav nav-pills" role="tablist">
<li ng-class="{ 'active': tab.active, 'disabled': tab.disabled }" ng-repeat="tab in main.uc3Pills">
<a ng-href="{{'#' + tab.paneId}}" role="pill" data-toggle="pill">{{tab.title}}</a>
</li>
</ul>
</div>
<!-- Tab panes -->
<div class="tab-content">
<div id="{{tab.paneId}}" class="tab-pane" ng-class="{ 'active': tab.active }" ng-repeat="tab in main.uc3Pills">{{tab.content}}</div>
</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.2.25/angular.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.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>