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)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy