Skip to content

Commit df534ee

Browse files
jzaeffererjzaefferer
committed
Adding visual test for panel and a base implementation; duplicated accordion.css content with panel-classes, to be merged later
1 parent b5db1be commit df534ee

File tree

3 files changed

+70
-3
lines changed

3 files changed

+70
-3
lines changed

‎tests/visual/panel/panel.html

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>Panel Visual Test : Default</title>
6+
<link rel="stylesheet" href="../visual.css" type="text/css" />
7+
<link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css">
8+
<script type="text/javascript" src="../../../jquery-1.4.2.js"></script>
9+
<script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script>
10+
<script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script>
11+
<script type="text/javascript" src="../../../ui/jquery.ui.panel.js"></script>
12+
<script type="text/javascript">
13+
$(function() {
14+
$("#panel1").panel();
15+
})
16+
</script>
17+
</head>
18+
<body>
19+
20+
<div id="panel1">
21+
<h3><a href="#">Panel Header 1</a></h3>
22+
<div>
23+
Panel Content 1
24+
</div>
25+
<h3><a href="#">Panel Header 2</a></h3>
26+
<div>
27+
Panel Content 2
28+
</div>
29+
<h3><a href="#">Panel Header 3</a></h3>
30+
<div>
31+
Panel Content 3
32+
</div>
33+
</div>
34+
35+
</body>
36+
</html>

‎themes/base/jquery.ui.accordion.css

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
/* Accordion
1+
/* Accordion/Panel
22
----------------------------------*/
33
.ui-accordion .ui-accordion-header { cursor: pointer; position: relative; margin-top: 1px; zoom: 1; }
44
.ui-accordion .ui-accordion-li-fix { display: inline; }
@@ -7,4 +7,13 @@
77
.ui-accordion-icons .ui-accordion-header a { padding-left: 2.2em; }
88
.ui-accordion .ui-accordion-header .ui-icon { position: absolute; left: .5em; top: 50%; margin-top: -8px; }
99
.ui-accordion .ui-accordion-content { padding: 1em 2.2em; border-top: 0; margin-top: -2px; position: relative; top: 1px; margin-bottom: 2px; overflow: auto; display: none; zoom: 1; }
10-
.ui-accordion .ui-accordion-content-active { display: block; }
10+
.ui-accordion .ui-accordion-content-active { display: block; }
11+
12+
.ui-panel .ui-panel-header { cursor: pointer; position: relative; margin-top: 1px; zoom: 1; }
13+
.ui-panel .ui-panel-li-fix { display: inline; }
14+
.ui-panel .ui-panel-header-active { border-bottom: 0 !important; }
15+
.ui-panel .ui-panel-header a { display: block; font-size: 1em; padding: .5em .5em .5em .7em; }
16+
.ui-panel-icons .ui-panel-header a { padding-left: 2.2em; }
17+
.ui-panel .ui-panel-header .ui-icon { position: absolute; left: .5em; top: 50%; margin-top: -8px; }
18+
.ui-panel .ui-panel-content { padding: 1em 2.2em; border-top: 0; margin-top: -2px; position: relative; top: 1px; margin-bottom: 2px; overflow: auto; display: none; zoom: 1; }
19+
.ui-panel .ui-panel-content-active { display: block; }

‎ui/jquery.ui.panel.js

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,29 @@
1414
(function($) {
1515

1616
$.widget("ui.panel", {
17+
_create: function() {
18+
this.element.addClass("ui-panel ui-widget ui-helper-reset");
19+
20+
var self = this;
21+
this.headers = this.element.find("> li > :first-child,> :not(li):even").addClass("ui-panel-header ui-helper-reset ui-state-default ui-corner-all")
22+
.bind("mouseenter.panel", function() { $(this).addClass('ui-state-hover'); })
23+
.bind("mouseleave.panel", function() { $(this).removeClass('ui-state-hover'); })
24+
.bind("focus.panel", function() { $(this).addClass('ui-state-focus'); })
25+
.bind("blur.panel", function() { $(this).removeClass('ui-state-focus'); })
26+
.bind("click.panel", function(e) { self.click($(this), e); return false; });
1727

28+
this.headers
29+
.next()
30+
.addClass("ui-panel-content ui-helper-reset ui-widget-content ui-corner-bottom")
31+
.hide();
32+
},
33+
destroy: function() {
34+
$.widget.prototype.destroy.call(this);
35+
},
36+
click: function(header, event) {
37+
header.toggleClass("ui-state-active ui-corner-top ui-corner-all");
38+
header.next().toggleClass("ui-panel-content-active").slideToggle("fast");
39+
}
1840
});
1941

20-
});
42+
}(jQuery));

0 commit comments

Comments
 (0)