Skip to content

Commit bae7763

Browse files
tipiiraitipiirai
committed
jQuery Tools Accordion v0.10
1 parent e13262e commit bae7763

File tree

5 files changed

+203
-200
lines changed

5 files changed

+203
-200
lines changed

‎src/accordion/accordion.js‎

Lines 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‎

Lines 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‎

Lines 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‎

Lines 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)