Skip to content

Commit 99322a2

Browse files
kuldeepkeshwarkuldeepkeshwar
committed
added example
1 parent 91694e1 commit 99322a2

9 files changed

+382
-70
lines changed

‎.idea/workspace.xml‎

Lines changed: 112 additions & 38 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/nested-accordion.html‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Example of Accordion</title>
6+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
7+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
8+
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
9+
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
10+
<script src="../app/scripts/app.js"></script>
11+
<script src="./nested-accordion.js"></script>
12+
<style type="text/css">
13+
.bs-example{
14+
margin: 20px;
15+
}
16+
</style>
17+
</head>
18+
<body ng-app="myApp">
19+
<div class="bs-example">
20+
21+
<h2>Nested Accordion</h2>
22+
<div class="panel-group" ng-accordion>
23+
<div class="panel panel-default" ng-accordion-group>
24+
<div class="panel-heading" ng-accordion-heading>
25+
<h4 class="panel-title">
26+
<a>Heading 1</a>
27+
</h4>
28+
</div>
29+
<div class="panel-collapse collapse in" ng-accordion-body>
30+
<div class="panel-body">
31+
<p>Body 1</p>
32+
<h3>Nested Accordion</h3>
33+
<div class="panel-group" ng-accordion>
34+
<div class="panel panel-default" ng-accordion-group>
35+
<div class="panel-heading" ng-accordion-heading>
36+
<h4 class="panel-title">
37+
<a>Heading 11</a>
38+
</h4>
39+
</div>
40+
<div class="panel-collapse collapse in" ng-accordion-body>
41+
<div class="panel-body">
42+
<p>Body 11</p>
43+
</div>
44+
</div>
45+
</div>
46+
<div class="panel panel-default" ng-accordion-group>
47+
<div class="panel-heading" ng-accordion-heading>
48+
<h4 class="panel-title">
49+
<a>Heading 12</a>
50+
</h4>
51+
</div>
52+
<div class="panel-collapse collapse in" ng-accordion-body>
53+
<div class="panel-body">
54+
<p>Body 12</p>
55+
</div>
56+
</div>
57+
</div>
58+
<div class="panel panel-default" ng-accordion-group>
59+
<div class="panel-heading" ng-accordion-heading>
60+
<h4 class="panel-title">
61+
<a>Heading 13</a>
62+
</h4>
63+
</div>
64+
<div class="panel-collapse collapse in" ng-accordion-body>
65+
<div class="panel-body">
66+
<p>Body 13</p>
67+
</div>
68+
</div>
69+
</div>
70+
</div>
71+
</div>
72+
</div>
73+
</div>
74+
<div class="panel panel-default" ng-accordion-group>
75+
<div class="panel-heading" ng-accordion-heading>
76+
<h4 class="panel-title">
77+
<a>Heading 2</a>
78+
</h4>
79+
</div>
80+
<div class="panel-collapse collapse in" ng-accordion-body>
81+
<div class="panel-body">
82+
<p>Body 2</p>
83+
</div>
84+
</div>
85+
</div>
86+
<div class="panel panel-default" ng-accordion-group>
87+
<div class="panel-heading" ng-accordion-heading>
88+
<h4 class="panel-title">
89+
<a>Heading 3</a>
90+
</h4>
91+
</div>
92+
<div class="panel-collapse collapse in" ng-accordion-body>
93+
<div class="panel-body">
94+
<p>Body 3</p>
95+
</div>
96+
</div>
97+
</div>
98+
</div>
99+
</div>
100+
</body>
101+
</html>

‎examples/nested-accordion.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
angular.module('myApp',['uiAccordion']);

‎examples/simple-accordion-with-options-2.html‎

Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,28 +2,23 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8">
5-
<title>Example of Accordion</title>
5+
<title>Example of Accordion</title>
66
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
77
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
8-
<script src="../bower_components/jquery/dist/jquery.min.js"></script>
9-
<script src="../bower_components/angular/angular.min.js"></script>
8+
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
9+
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
1010
<script src="../app/scripts/app.js"></script>
11-
<script src="simple-accordion-with-options-2.js"></script>
11+
<script src="./simple-accordion-with-options-2.js"></script>
1212
<style type="text/css">
13-
.bs-example {
13+
.bs-example{
1414
margin: 20px;
1515
}
1616
</style>
1717
</head>
1818
<body ng-app="myApp">
1919
<div class="bs-example" ng-controller="myCtrl">
2020
<h2>Advance Accordion</h2>
21-
<input type="checkbox" ng-model="simpleAccordionOptions.closeOthers">closeOthers
2221

23-
<input type="checkbox" ng-model="accordionGroupOptions1.open">Toggle 1
24-
<input type="checkbox" ng-model="accordionGroupOptions2.open">Toggle 2
25-
<input type="checkbox" ng-model="accordionGroupOptions3.open">Toggle 3
26-
<input type="checkbox" ng-model="accordionGroupOptions2.disabled">Disable 2
2722
<div class="panel-group" ng-accordion options="simpleAccordionOptions">
2823
<div class="panel panel-default" ng-accordion-group options="accordionGroupOptions1">
2924
<div class="panel-heading" ng-accordion-heading>

‎examples/simple-accordion-with-options-2.js‎

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,32 @@
1-
angular.module('myApp', ['uiAccordion']);
2-
angular.module('myApp').controller("myCtrl", function ($scope, $q) {
1+
angular.module('myApp',['uiAccordion']);
2+
angular.module('myApp').controller("myCtrl",function($scope,$q){
33

4-
$scope.simpleAccordionOptions = {
5-
closeOthers: false //Default: true) - Control whether expanding an item will cause the other items to close.
6-
};
7-
$scope.accordionGroupOptions1 = {
8-
open: true //(Default: false) - Whether accordion group is open or closed.
9-
};
10-
$scope.accordionGroupOptions2 = {
11-
open: false,
12-
disabled: true //(Default: false) - Whether the accordion group is disabled or not.
13-
};
14-
$scope.accordionGroupOptions3 = {
15-
open: true,
16-
beforeOpen: function () { //promise which is resolved before showing accordion body
17-
var def = $q.defer();
4+
$scope.simpleAccordionOptions={
5+
closeOthers:false //Default: true) - Control whether expanding an item will cause the other items to close.
6+
}
7+
$scope.accordionGroupOptions1={
8+
open:true //(Default: false) - Whether accordion group is open or closed.
9+
}
10+
$scope.accordionGroupOptions2={
11+
open:false,
12+
disabled:true //(Default: false) - Whether the accordion group is disabled or not.
13+
}
14+
$scope.accordionGroupOptions3={
15+
open:true,
16+
beforeOpen:function(){ //promise which is resolved before showing accordion body
17+
var def=$q.defer();
1818
// busy doing some stuff
19-
setTimeout(function () {
19+
setTimeout(function(){
2020
def.resolve();
21-
}, 500);
21+
},2000)
2222
return def.promise;
2323
},
24-
beforeHide: function () { //promise which is resolved before hidding accordion body
25-
var def = $q.defer();
24+
beforeHide:function(){ //promise which is resolved before hidding accordion body
25+
var def=$q.defer();
2626
// busy doing some stuff
27-
setTimeout(function () {
27+
setTimeout(function(){
2828
def.resolve();
29-
}, 500);
29+
},1500)
3030
return def.promise;
3131
}
3232
}

‎examples/simple-accordion-with-options.html‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Example of Accordion</title>
6+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
7+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
8+
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
9+
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
10+
<script src="../app/scripts/app.js"></script>
11+
<script src="./simple-accordion-with-options.js"></script>
12+
<style type="text/css">
13+
.bs-example{
14+
margin: 20px;
15+
}
16+
</style>
17+
</head>
18+
<body ng-app="myApp">
19+
<div class="bs-example" ng-controller="myCtrl">
20+
21+
<h2>Simple Accordion with options</h2>
22+
<div class="panel-group" ng-accordion options="simpleAccordionOptions">
23+
<div class="panel panel-default" ng-accordion-group options="accordionGroupOptions1">
24+
<div class="panel-heading" ng-accordion-heading>
25+
<h4 class="panel-title">
26+
<a>Heading 1</a>
27+
</h4>
28+
</div>
29+
<div class="panel-collapse collapse in" ng-accordion-body>
30+
<div class="panel-body">
31+
<p>Body 1</p>
32+
</div>
33+
</div>
34+
</div>
35+
<div class="panel panel-default" ng-accordion-group options="accordionGroupOptions2">
36+
<div class="panel-heading" ng-accordion-heading>
37+
<h4 class="panel-title">
38+
<a>Heading 2</a>
39+
</h4>
40+
</div>
41+
<div class="panel-collapse collapse in" ng-accordion-body>
42+
<div class="panel-body">
43+
<p>Body 2</p>
44+
</div>
45+
</div>
46+
</div>
47+
<div class="panel panel-default" ng-accordion-group options="accordionGroupOptions3">
48+
<div class="panel-heading" ng-accordion-heading>
49+
<h4 class="panel-title">
50+
<a>Heading 3</a>
51+
</h4>
52+
</div>
53+
<div class="panel-collapse collapse in" ng-accordion-body>
54+
<div class="panel-body">
55+
<p>Body 3</p>
56+
</div>
57+
</div>
58+
</div>
59+
</div>
60+
</div>
61+
</body>
62+
</html>

‎examples/simple-accordion-with-options.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
angular.module('myApp',['uiAccordion']);
2+
angular.module('myApp').controller("myCtrl",function($scope){
3+
4+
$scope.simpleAccordionOptions={
5+
closeOthers:false //Default: true) - Control whether expanding an item will cause the other items to close.
6+
}
7+
$scope.accordionGroupOptions1={
8+
open:true // (Default: false) - Whether accordion group is open or closed.
9+
}
10+
$scope.accordionGroupOptions2={
11+
open:false,
12+
disabled:true //(Default: false) - Whether the accordion group is disabled or not.
13+
}
14+
$scope.accordionGroupOptions3={
15+
open:true
16+
}
17+
});

‎examples/simple-accordion.html‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Example of Accordion</title>
6+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
7+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
8+
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
9+
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
10+
<script src="../app/scripts/app.js"></script>
11+
<script src="./simple-accordion.js"></script>
12+
<style type="text/css">
13+
.bs-example{
14+
margin: 20px;
15+
}
16+
</style>
17+
</head>
18+
<body ng-app="myApp">
19+
<div class="bs-example">
20+
<h2>Simple Accordion</h2>
21+
<div class="panel-group" ng-accordion>
22+
<div class="panel panel-default" ng-accordion-group>
23+
<div class="panel-heading" ng-accordion-heading>
24+
<h4 class="panel-title">
25+
<a>Heading 1</a>
26+
</h4>
27+
</div>
28+
<div class="panel-collapse collapse in" ng-accordion-body>
29+
<div class="panel-body">
30+
<p>Body 1</p>
31+
</div>
32+
</div>
33+
</div>
34+
<div class="panel panel-default" ng-accordion-group>
35+
<div class="panel-heading" ng-accordion-heading>
36+
<h4 class="panel-title">
37+
<a>Heading 2</a>
38+
</h4>
39+
</div>
40+
<div class="panel-collapse collapse in" ng-accordion-body>
41+
<div class="panel-body">
42+
<p>Body 2</p>
43+
</div>
44+
</div>
45+
</div>
46+
<div class="panel panel-default" ng-accordion-group>
47+
<div class="panel-heading" ng-accordion-heading>
48+
<h4 class="panel-title">
49+
<a>Heading 3</a>
50+
</h4>
51+
</div>
52+
<div class="panel-collapse collapse in" ng-accordion-body>
53+
<div class="panel-body">
54+
<p>Body 3</p>
55+
</div>
56+
</div>
57+
</div>
58+
</div>
59+
</div>
60+
</body>
61+
</html>

‎examples/simple-accordion.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
angular.module('myApp',['uiAccordion']);

0 commit comments

Comments
 (0)