Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit bae7763

Browse filesBrowse files
tipiiraitipiirai
committed
jQuery Tools Accordion v0.10
1 parent e13262e commit bae7763
Copy full SHA for bae7763

File tree

Expand file treeCollapse file tree

5 files changed

+203
-200
lines changed
Filter options
Expand file treeCollapse file tree

5 files changed

+203
-200
lines changed

‎src/accordion/accordion.js

Copy file name to clipboard
+109-85Lines changed: 109 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -1,91 +1,115 @@
11

2+
/* ACCORDION */
23
(function($) {
3-
$.fn.accordion = function(options) {
4-
var DEFAULTS = {
5-
orientation: "vertical",
6-
min: 0,
7-
max: 200,
8-
sticky: false,
9-
event: "mouseenter",
10-
duration: 500,
11-
pane: ".pane",
12-
defaultPane: 0
13-
};
14-
15-
options = $.extend(DEFAULTS, options);
16-
17-
this.each(function() {
18-
var panes = $(options.pane, this);
19-
var currentPane;
20-
var dummy = document.createElement("span");
21-
22-
if (panes.length) {
23-
if (options.orientation == "vertical") {
24-
var STYLE_PROPERTY = "height";
25-
var OFFSET_PROPERTY = "offsetHeight";
26-
} else {
27-
STYLE_PROPERTY = "width";
28-
OFFSET_PROPERTY = "offsetWidth";
29-
30-
$(this).next().css({clear: "left"});
31-
var lastPane = panes.get(panes.length - 1);
32-
$(this).css({
33-
width: lastPane.offsetLeft + lastPane.offsetWidth - panes[0].offsetLeft,
34-
height: lastPane.offsetHeight,
35-
overflow: "hidden"
36-
});
37-
}
4+
5+
var CONF = {
6+
easing: 'swing',
7+
event: 'click', // mouseenter
8+
initialIndex: -1,
9+
small: 0,
10+
large: 300,
11+
panes: null,
12+
speed: 400,
13+
sticky: false,
14+
vertical: false
15+
};
3816

39-
var size = panes[0][OFFSET_PROPERTY];
17+
function Accordion(root, conf) {
18+
19+
var panes = root.children(conf.panes),
20+
currentIndex = conf.initialIndex,
21+
self = this,
22+
totalSize,
23+
vertical,
24+
prop,
25+
size;
26+
27+
$.extend(self, {
28+
29+
select: function(index, evt) {
30+
31+
// calculate dimensions
32+
if (!size) {
33+
vertical = conf.vertical || root.height() > root.width();
34+
prop = vertical ? 'height' : 'width';
35+
size = panes.eq(0)[prop]();
36+
totalSize = size * panes.length;
37+
}
38+
39+
var large = conf.large,
40+
small = conf.small || (totalSize - large) / (panes.length - 1);
41+
42+
// same element clicked
43+
if (index === currentIndex && self.isOpened()) {
44+
large = small = size;
45+
}
46+
47+
var sizes = $.map(panes, function(el) {
48+
return $(el)[prop]();
49+
});
50+
51+
$("<span/>").stop().animate({step: 1}, {
52+
duration: conf.speed,
53+
easing: conf.easing,
54+
55+
step: function(step) {
56+
var large = totalSize;
57+
panes.each(function(i) {
58+
if (i !== index) {
59+
var value = sizes[i] + Math.round(step * (small - sizes[i]));
60+
if (value < 0) { value = 0; }
61+
$(this)[prop](value);
62+
large -= value;
63+
}
64+
});
65+
panes.eq(index)[prop](large);
66+
}
67+
});
68+
69+
currentIndex = index;
70+
},
71+
72+
getPanes: function() {
73+
return panes;
74+
},
75+
76+
getCurrentPane: function() {
77+
return panes.eq(index);
78+
},
79+
80+
getIndex: function() {
81+
return index;
82+
},
83+
84+
isOpened: function() {
85+
return panes.eq(currentIndex)[prop]() > size;
86+
},
87+
88+
next: function() {
89+
return self.select(index + 1);
90+
},
91+
92+
prev: function() {
93+
return self.select(index - 1);
94+
}
95+
96+
});
4097

41-
panes.bind(options.event, function() {
42-
currentPane = this;
43-
animatePanes(options.max, options.min);
44-
});
98+
panes.bind(conf.event, function(e) {
99+
self.select($(this).index(), e);
100+
});
101+
102+
if (!conf.sticky) {
103+
root.bind("mouseleave", function(e) {
104+
if (self.isOpened()) {
105+
self.select(currentIndex);
106+
}
107+
});
108+
}
109+
}
110+
111+
$.fn.accordion = function(conf) {
112+
return $.tools.create(this, Accordion, CONF, conf);
113+
};
45114

46-
if (options.sticky) {
47-
currentPane = panes.get(options.defaultPane);
48-
animatePanes(options.max, options.min, 1);
49-
} else {
50-
$(this).mouseleave(function() {
51-
animatePanes(size);
52-
});
53-
}
54-
}
55-
56-
function animatePanes(max, min, duration) {
57-
if (!currentPane) return;
58-
59-
if (duration == null) duration = options.duration;
60-
61-
var totalSize = size * panes.length;
62-
63-
var sizes = [];
64-
panes.each(function(i) {
65-
sizes[i] = this[OFFSET_PROPERTY];
66-
});
67-
68-
var collapsedSize = min || Math.round((totalSize - max) / (panes.length - 1));
69-
70-
$(dummy).stop();
71-
dummy.style.step = 0;
72-
$(dummy).animate({step: 1}, {
73-
duration: duration,
74-
easing: options.easing,
75-
step: function(step) {
76-
var expandedSize = totalSize;
77-
for (var i = 0, pane; pane = panes[i]; i++) {
78-
if (pane != currentPane) {
79-
var value = sizes[i] + Math.round(step * (collapsedSize - sizes[i]));
80-
if (value < 0) value = 0;
81-
pane.style[STYLE_PROPERTY] = value + "px";
82-
expandedSize -= value;
83-
}
84-
}
85-
currentPane.style[STYLE_PROPERTY] = expandedSize + "px";
86-
}
87-
});
88-
};
89-
});
90-
};
91115
})(jQuery);

‎src/core.js

Copy file name to clipboard
+37Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
(function($) {
2+
3+
$.tools = {
4+
version: '@VERSION',
5+
6+
create: function(root, fn, globals, conf) {
7+
8+
var args = arguments,
9+
name = fn.name.toLowerCase(),
10+
api = root.data(name);
11+
12+
if (api) {
13+
api.destroy();
14+
15+
} else {
16+
17+
if (!globals.conf) { globals = { conf: globals }; }
18+
19+
$.tools[name] = globals;
20+
21+
conf = $.extend(true, {}, globals.conf, conf);
22+
23+
$.extend(fn.prototype, {
24+
getConf: function() {
25+
return conf;
26+
}
27+
});
28+
}
29+
30+
return root.each(function() {
31+
api = new fn($(this), conf);
32+
$(this).data(name, api);
33+
});
34+
}
35+
};
36+
37+
})(jQuery);

‎src/tabs/tabs.js

Copy file name to clipboardExpand all lines: src/tabs/tabs.js
+1-1Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -118,7 +118,7 @@
118118

119119

120120
// public methods
121-
$.extend(this, {
121+
$.extend(this, {
122122
click: function(i, e) {
123123

124124
var tab = tabs.eq(i);

‎test/accordion/accordion.html

Copy file name to clipboard
+24-114Lines changed: 24 additions & 114 deletions
Original file line numberDiff line numberDiff line change
@@ -1,119 +1,29 @@
1-
<!doctype html>
2-
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
3-
<head>
4-
<title>Accordion Test Page</title>
5-
<script src="jquery.js"></script>
6-
<script src="jquery.easing.1.3.js"></script>
7-
<script src="accordion.js"></script>
8-
<script>
9-
$(function() {
10-
$('#accordion1').accordion({
11-
orientation: "horizontal"
12-
});
13-
$('#accordion2').accordion({
14-
orientation: "vertical",
15-
sticky: true,
16-
event: "click",
17-
min: 30,
18-
max: 300,
19-
duration: 1500,
20-
easing: "easeOutBounce"
21-
});
22-
});
23-
</script>
241

25-
<style>
26-
.accordion {
27-
list-style: none;
28-
display: block;
29-
}
30-
.accordion + * {
31-
clear: left;
32-
}
33-
.accordion .pane {
34-
display: block;
35-
overflow: hidden;
36-
margin: 0;
37-
padding: 0;
38-
}
39-
.accordion.horizontal .pane {
40-
height: 100px;
41-
width: 125px;
42-
float: left;
43-
margin-left: 5px;
44-
}
45-
.accordion.vertical .pane {
46-
height: 125px;
47-
margin-top: 5px;
48-
}
49-
.accordion.horizontal .pane:first-child {
50-
margin-left: 0;
51-
}
52-
</style>
2+
<script src="../../lib/jquery-1.4.2.js"></script>
3+
<script src="../../src/core.js"></script>
4+
<script src="../../src/accordion/accordion.js"></script>
5+
<link rel="stylesheet" type="text/css" href="style.css"/>
536

54-
<style>
55-
body {
56-
background-color: #1D1E21;
57-
}
58-
#accordion1 .pane {
59-
height: 100px;
60-
width: 125px;
61-
margin-left: 5px;
62-
}
63-
#accordion2 {
64-
margin-top: 20px;
65-
width: 125px;
66-
}
67-
#accordion2 .pane {
68-
height: 100px;
69-
margin-top: 5px;
70-
}
71-
#accordion1 .pane1 {
72-
margin-left: 0;
73-
}
74-
.pane1 {
75-
background-color: #53b388;
76-
}
77-
.pane2 {
78-
background-color: #5a69a9;
79-
}
80-
.pane3 {
81-
background-color: #c26468;
82-
}
83-
.pane4 {
84-
background-color: #bf7cc7;
85-
}
867

87-
#accordion2 .pane1 {
88-
background-color: #4D9AA8;
89-
}
90-
#accordion2 .pane2 {
91-
background-color: #82A616;
92-
}
93-
#accordion2 .pane3 {
94-
background-color: #F29A1F;
95-
}
96-
#accordion2 .pane4 {
97-
background-color: #A66A16;
98-
}
99-
</style>
100-
</head>
8+
<div class="accordion">
9+
<div class="pane1"></div>
10+
<div class="pane2"></div>
11+
<div class="pane3"></div>
12+
<div class="pane4"></div>
13+
</div>
10114

102-
<body lang="en">
103-
<h1>Accordion Test Page</h1>
15+
<div style="clear:both"></div>
10416

105-
<ul id="accordion1" class="accordion horizontal">
106-
<li class="pane pane1"></li>
107-
<li class="pane pane2"></li>
108-
<li class="pane pane3"></li>
109-
<li class="pane pane4"></li>
110-
</ul>
111-
112-
<ul id="accordion2" class="accordion vertical">
113-
<li class="pane pane1"></li>
114-
<li class="pane pane2"></li>
115-
<li class="pane pane3"></li>
116-
<li class="pane pane4"></li>
117-
</ul>
118-
</body>
119-
</html>
17+
<div class="accordion vertical">
18+
<div class="pane1"></div>
19+
<div class="pane2"></div>
20+
<div class="pane3"></div>
21+
<div class="pane4"></div>
22+
</div>
23+
24+
25+
<script>
26+
$(function() {
27+
$('.accordion').accordion({sticky: false, event: 'mouseenter'});
28+
});
29+
</script>

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.