Skip to content

Commit 53a7c33

Browse files
tipiiraitipiirai
committed
Initial commit of the JavaScript files. Here we go.
1 parent 2d608cc commit 53a7c33

26 files changed

+6027
-0
lines changed

‎src/accordion/README‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
2+
These files are done by Dean Edwards. Custom work for jQuery Tools. Accordion will be a separate plugin in JQT 1.3.

‎src/accordion/accordion.html‎

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
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>
24+
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>
53+
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+
}
86+
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>
101+
102+
<body lang="en">
103+
<h1>Accordion Test Page</h1>
104+
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>

‎src/accordion/accordion.js‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
2+
(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+
}
38+
39+
var size = panes[0][OFFSET_PROPERTY];
40+
41+
panes.bind(options.event, function() {
42+
currentPane = this;
43+
animatePanes(options.max, options.min);
44+
});
45+
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+
};
91+
})(jQuery);

0 commit comments

Comments
 (0)