-
Notifications
You must be signed in to change notification settings - Fork 33
/
index.html
88 lines (76 loc) · 5.25 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!DOCTYPE HTML>
<html id="ng-app" ng-app="app"> <!-- id="ng-app" IE<8 -->
<head>
<link rel="stylesheet" href="/css/bootstrap.min.css" />
<link rel="stylesheet" href="/css/animate.min.css" />
<link rel="stylesheet" href="/css/angular.css" />
<script src="/js/angular/angular-1.2.0rc1.min.js"></script>
<script src="/js/angular/modules/tabs.js"></script>
<script src="/js/angular/controllers.js"></script>
</head>
<body ng-controller="TestController">
<div class="container">
<h1>Angular: simple tabs with animation</h1>
<div ng-tabs class="tabbable">
<div class="control-group">
<button class="btn btn-danger" ng-click="tabs.index = 1">Select first tab</button>
<button class="btn btn-warning" ng-click="tabs.index = 2">Select second tab</button>
</div>
<div class="control-group">
<button class="btn btn-primary" ng-click="tabs.index = tabs.index - 1" ng-disabled="tabs.index == 1">Prev tab</button>
<button class="btn btn-primary" ng-click="tabs.index = tabs.index + 1" ng-disabled="tabs.index == tabs.count" >Next tab</button>
</div>
<ul class="nav nav-tabs">
<li ng-tab-head>
<a href="#" ng-click="$event.preventDefault()">Tab 1</a>
</li>
<li ng-tab-head>
<a href="#" ng-click="$event.preventDefault()">Tab 2</a>
</li>
<li ng-tab-head="active">
<a href="#" ng-click="$event.preventDefault()">Tab 3</a>
</li>
<li ng-tab-head>
<a href="#" ng-click="$event.preventDefault()">Tab 4</a>
</li>
</ul>
<div class="tab-content" style="overflow: hidden">
<div ng-tab-body="animated bounceInLeft" class="tab-pane">
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ul>
</div>
<div ng-tab-body="animated fadeInUpBig" class="tab-pane">
<p>Feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
<div ng-tab-body="animated fadeInRightBig" class="tab-pane">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
<div ng-tab-body="animated bounceInDown" class="tab-pane">
<h2>These tabs without animation</h2>
<div ng-tabs class="tabbable">
<ul class="nav nav-tabs">
<li ng-tab-head>
<a href="#" ng-click="$event.preventDefault()">Tab 1</a>
</li>
<li ng-tab-head="on">
<a href="#" ng-click="$event.preventDefault()">Tab 2</a>
</li>
</ul>
<div class="tab-content">
<div ng-tab-body class="tab-pane">
<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
</div>
<div ng-tab-body class="tab-pane">
<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>