Skip to content

Commit 0cc17e3

Browse files
kuldeepkeshwarkuldeepkeshwar
committed
updated readme
1 parent 0733158 commit 0cc17e3

File tree

3 files changed

+213
-78
lines changed

3 files changed

+213
-78
lines changed

‎.idea/workspace.xml‎

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

‎README.md‎

Lines changed: 140 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -17,42 +17,157 @@
1717
* https://rawgit.com/kuldeepkeshwar/ui-accordion/master/dist/scripts/ui-accordion.min.js
1818

1919
## Usage :
20+
21+
* Simple Accordion
22+
23+
#### HTML
24+
```html
25+
<ul ng-accordion>
26+
<li ng-accordion-group>
27+
<h3 ng-accordion-heading> Heading1</h3>
28+
<div ng-accordion-body> Body1</div>
29+
</li>
30+
<li ng-accordion-group options="options">
31+
<h3 ng-accordion-heading> Heading2</h3>
32+
<div ng-accordion-body> Body2</div>
33+
</li>
34+
<li ng-accordion-group>
35+
<h3 ng-accordion-heading> Heading3</h3>
36+
<div ng-accordion-body> Body3</div>
37+
</li>
38+
<ul>
39+
```
40+
##### CODE
41+
```javascript
42+
angular.module('myApp',['uiAccordion']);
43+
```
44+
45+
* Simple Accordion with options
46+
47+
#### HTML
48+
```html
49+
<ul ng-accordion options="simpleAccordionOptions">
50+
<li ng-accordion-group options="accordionGroupOptions1">
51+
<h3 ng-accordion-heading> Heading1</h3>
52+
<div ng-accordion-body> Body1</div>
53+
</li>
54+
<li ng-accordion-group options="accordionGroupOptions2">
55+
<h3 ng-accordion-heading> Heading2</h3>
56+
<div ng-accordion-body> Body2</div>
57+
</li>
58+
<li ng-accordion-group options="accordionGroupOptions3">
59+
<h3 ng-accordion-heading> Heading3</h3>
60+
<div ng-accordion-body> Body3</div>
61+
</li>
62+
<ul>
63+
```
64+
65+
##### CODE
66+
```javascript
67+
angular.module('myApp',['uiAccordion']);
68+
angular.module('myApp').controller("myCtrl",function($scope){
69+
70+
$scope.simpleAccordionOptions={
71+
closeOthers:false //Default: true) - Control whether expanding an item will cause the other items to close.
72+
}
73+
$scope.accordionGroupOptions1={
74+
open:true // (Default: false) - Whether accordion group is open or closed.
75+
}
76+
$scope.accordionGroupOptions2={
77+
open:false,
78+
disabled:true //(Default: false) - Whether the accordion group is disabled or not.
79+
}
80+
$scope.accordionGroupOptions3={
81+
open:true
82+
}
83+
});
84+
```
85+
86+
* Advance Accordion
2087

2188
#### HTML
2289
```html
23-
<ul ui-accordion>
24-
<li ui-accordion-group>
25-
<h3 ui-accordion-heading> Heading1</h3>
26-
<div ui-accordion-body> Body1</div>
90+
<ul ng-accordion options="simpleAccordionOptions">
91+
<li ng-accordion-group options="accordionGroupOptions1">
92+
<h3 ng-accordion-heading> Heading1</h3>
93+
<div ng-accordion-body> Body1</div>
2794
</li>
28-
<li ui-accordion-group options="options">
29-
<h3 ui-accordion-heading> Heading2</h3>
30-
<div ui-accordion-body> Body2</div>
95+
<li ng-accordion-group options="accordionGroupOptions2">
96+
<h3 ng-accordion-heading> Heading2</h3>
97+
<div ng-accordion-body> Body2</div>
3198
</li>
32-
<li ui-accordion-group>
33-
<h3 ui-accordion-heading> Heading3</h3>
34-
<div ui-accordion-body> Body3</div>
99+
<li ng-accordion-group options="accordionGroupOptions3">
100+
<h3 ng-accordion-heading> Heading3</h3>
101+
<div ng-accordion-body> Body3</div>
35102
</li>
36103
<ul>
37104
```
105+
38106
##### CODE
39107
```javascript
40108
angular.module('myApp',['uiAccordion']);
41109
angular.module('myApp').controller("myCtrl",function($scope){
42-
//options(optional) for accordion group
43-
$scope.options={
44-
beforeOpen:function(){ // promise which is resolved before showing accordion body
45-
var def=$q.defer();
46-
// busy doing some stuff
47-
def.resolve();
48-
return def.promise;
49-
},
50-
beforeHide:function(){// promise which is resolved before hidding accordion body
51-
var def=$q.defer();
52-
// busy doing some stuff
53-
def.resolve()
54-
return def.promise;
55-
}
56-
}
110+
111+
$scope.simpleAccordionOptions={
112+
closeOthers:false //Default: true) - Control whether expanding an item will cause the other items to close.
113+
}
114+
$scope.accordionGroupOptions1={
115+
open:true //(Default: false) - Whether accordion group is open or closed.
116+
}
117+
$scope.accordionGroupOptions2={
118+
open:false,
119+
disabled:true //(Default: false) - Whether the accordion group is disabled or not.
120+
}
121+
$scope.accordionGroupOptions3={
122+
open:true,
123+
beforeOpen:function(){ //promise which is resolved before showing accordion body
124+
var def=$q.defer();
125+
// busy doing some stuff
126+
def.resolve();
127+
return def.promise;
128+
},
129+
beforeHide:function(){ //promise which is resolved before hidding accordion body
130+
var def=$q.defer();
131+
// busy doing some stuff
132+
def.resolve()
133+
return def.promise;
134+
}
135+
}
57136
});
58137
```
138+
139+
* Nested Accordions
140+
141+
#### HTML
142+
```html
143+
<ul ng-accordion>
144+
<li ng-accordion-group>
145+
<h3 ng-accordion-heading> Heading1</h3>
146+
<div ng-accordion-body>
147+
<h6>Nested Accordion</h6>
148+
<li ng-accordion-group>
149+
<h3 ng-accordion-heading> Heading11</h3>
150+
<div ng-accordion-body> Body11</div>
151+
</li>
152+
<li ng-accordion-group >
153+
<h3 ng-accordion-heading> Heading12</h3>
154+
<div ng-accordion-body> Body12</div>
155+
</li>
156+
<li ng-accordion-group >
157+
<h3 ng-accordion-heading> Heading13</h3>
158+
<div ng-accordion-body> Body13</div>
159+
</li>
160+
</div>
161+
</li>
162+
<li ng-accordion-group >
163+
<h3 ng-accordion-heading> Heading2</h3>
164+
<div ng-accordion-body> Body2</div>
165+
</li>
166+
<li ng-accordion-group >
167+
<h3 ng-accordion-heading> Heading3</h3>
168+
<div ng-accordion-body> Body3</div>
169+
</li>
170+
<ul>
171+
```
172+
173+

‎app/scripts/controllers/main.js‎

Lines changed: 13 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -9,21 +9,17 @@
99
*/
1010
angular.module('uiAccordion')
1111
.controller('MainCtrl', function ($scope) {
12-
$scope.simpleAccordionOptions={
13-
closeOthers:false
14-
}
15-
$scope.accordionGroupOptions1={
16-
open:true
17-
}
18-
$scope.accordionGroupOptions2={
19-
open:false
20-
}
21-
$scope.accordionGroupOptions3={
22-
open:true
23-
}
24-
$scope.$watchCollection('accordionGroupOptions1',function(n,o){
25-
if(n!==o){
26-
console.log(n,o);
27-
}
28-
})
12+
$scope.simpleAccordionOptions={
13+
closeOthers:false
14+
}
15+
$scope.accordionGroupOptions1={
16+
open:true
17+
}
18+
$scope.accordionGroupOptions2={
19+
open:false
20+
}
21+
$scope.accordionGroupOptions3={
22+
open:true
23+
}
24+
2925
});

0 commit comments

Comments
 (0)