mirror of
https://github.com/jquery/jquery-ui.git
synced 2024-11-21 11:04:24 +00:00
added, cleaned up, and renamed some accordion visual tests
This commit is contained in:
Richard Worth
parent
473e7e8e8a
commit
5b000cb2c0
@ -1,46 +1,34 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>jQuery UI Accordion Visual Test</title>
|
||||
<link rel="stylesheet" href="../all.css" type="text/css">
|
||||
<title>Accordion Visual Test : Accordion</title>
|
||||
<link rel="stylesheet" href="../visual.css" type="text/css" />
|
||||
<link rel="stylesheet" href="../../../themes/base/ui.all.css" type="text/css">
|
||||
<script type="text/javascript" src="../../../jquery-1.3.2.js"></script>
|
||||
<script type="text/javascript" src="../../../ui/ui.core.js"></script>
|
||||
<script type="text/javascript" src="../../../ui/ui.accordion.js"></script>
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
function on() {
|
||||
$("#accordion").accordion();
|
||||
}
|
||||
function off() {
|
||||
$("#accordion").accordion("destroy");
|
||||
}
|
||||
$("#toggle").toggle(on, off).click();
|
||||
});
|
||||
})
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<ul class="plugins">
|
||||
<li class="plugin">
|
||||
Accordion
|
||||
<div id="accordion">
|
||||
<h3><a href="#">First</a></h3>
|
||||
<h3><a href="#">Accordion Header 1</a></h3>
|
||||
<div>
|
||||
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
|
||||
Accordion Content 1
|
||||
</div>
|
||||
<h3><a href="#">Second</a></h3>
|
||||
<h3><a href="#">Accordion Header 2</a></h3>
|
||||
<div>
|
||||
Phasellus mattis tincidunt nibh.
|
||||
Accordion Content 2
|
||||
</div>
|
||||
<h3><a href="#">Third</a></h3>
|
||||
<h3><a href="#">Accordion Header 3</a></h3>
|
||||
<div>
|
||||
Nam dui erat, auctor a, dignissim quis.
|
||||
Accordion Content 3
|
||||
</div>
|
||||
</div>
|
||||
<button id="toggle">Toggle</button>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Accordion Static Test : DL</title>
|
||||
<title>Accordion Static Test : Accordion dl</title>
|
||||
<link rel="stylesheet" href="../../static/static.css" type="text/css" />
|
||||
<link rel="stylesheet" href="../../../themes/base/ui.base.css" type="text/css" />
|
||||
<link rel="stylesheet" href="../../../themes/base/ui.theme.css" type="text/css" title="ui-theme" />
|
||||
@ -17,21 +17,21 @@
|
||||
<body>
|
||||
|
||||
<dl>
|
||||
<dt>
|
||||
<a href="#">Accordion Header 1</a>
|
||||
</dt>
|
||||
<dt><a href="#">Accordion Header 1</a></dt>
|
||||
<dd>
|
||||
Accordion Content 1
|
||||
<dl>
|
||||
<dt>Term 1</dt>
|
||||
<dt>Definition 1</dt>
|
||||
<dt>Term 2</dt>
|
||||
<dt>Definition 2</dt>
|
||||
</dl>
|
||||
</dd>
|
||||
<dt>
|
||||
<a href="#">Accordion Header 2</a>
|
||||
</dt>
|
||||
<dt><a href="#">Accordion Header 2</a></dt>
|
||||
<dd>
|
||||
Accordion Content 2
|
||||
</dd>
|
||||
<dt>
|
||||
<a href="#">Accordion Header 3</a>
|
||||
</dt>
|
||||
<dt><a href="#">Accordion Header 3</a></dt>
|
||||
<dd>
|
||||
Accordion Content 2
|
||||
</dd>
|
||||
34
tests/visual/accordion/accordion_method_destroy.html
Normal file
34
tests/visual/accordion/accordion_method_destroy.html
Normal file
@ -0,0 +1,34 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Accordion Visual Test : Accordion method destroy</title>
|
||||
<link rel="stylesheet" href="../visual.css" type="text/css" />
|
||||
<link rel="stylesheet" href="../../../themes/base/ui.all.css" type="text/css">
|
||||
<script type="text/javascript" src="../../../jquery-1.3.2.js"></script>
|
||||
<script type="text/javascript" src="../../../ui/ui.core.js"></script>
|
||||
<script type="text/javascript" src="../../../ui/ui.accordion.js"></script>
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
$("#accordion").accordion().accordion("destroy");
|
||||
})
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="accordion">
|
||||
<h3><a href="#">Accordion Header 1</a></h3>
|
||||
<div>
|
||||
Accordion Content 1
|
||||
</div>
|
||||
<h3><a href="#">Accordion Header 2</a></h3>
|
||||
<div>
|
||||
Accordion Content 2
|
||||
</div>
|
||||
<h3><a href="#">Accordion Header 3</a></h3>
|
||||
<div>
|
||||
Accordion Content 3
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
34
tests/visual/accordion/accordion_method_disable.html
Normal file
34
tests/visual/accordion/accordion_method_disable.html
Normal file
@ -0,0 +1,34 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Accordion Visual Test : Accordion method disable</title>
|
||||
<link rel="stylesheet" href="../visual.css" type="text/css" />
|
||||
<link rel="stylesheet" href="../../../themes/base/ui.all.css" type="text/css">
|
||||
<script type="text/javascript" src="../../../jquery-1.3.2.js"></script>
|
||||
<script type="text/javascript" src="../../../ui/ui.core.js"></script>
|
||||
<script type="text/javascript" src="../../../ui/ui.accordion.js"></script>
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
$("#accordion").accordion().accordion("disable");
|
||||
})
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="accordion">
|
||||
<h3><a href="#">Accordion Header 1</a></h3>
|
||||
<div>
|
||||
Accordion Content 1
|
||||
</div>
|
||||
<h3><a href="#">Accordion Header 2</a></h3>
|
||||
<div>
|
||||
Accordion Content 2
|
||||
</div>
|
||||
<h3><a href="#">Accordion Header 3</a></h3>
|
||||
<div>
|
||||
Accordion Content 3
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,37 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Accordion Visual Test : Accordion option animated 'bounceslide'</title>
|
||||
<link rel="stylesheet" href="../visual.css" type="text/css" />
|
||||
<link rel="stylesheet" href="../../../themes/base/ui.all.css" type="text/css">
|
||||
<script type="text/javascript" src="../../../jquery-1.3.2.js"></script>
|
||||
<script type="text/javascript" src="../../../ui/ui.core.js"></script>
|
||||
<script type="text/javascript" src="../../../ui/ui.accordion.js"></script>
|
||||
<script type="text/javascript" src="../../../ui/effects.core.js"></script>
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
$("#accordion").accordion({
|
||||
animated: 'bounceslide'
|
||||
});
|
||||
})
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="accordion">
|
||||
<h3><a href="#">Accordion Header 1</a></h3>
|
||||
<div>
|
||||
Accordion Content 1
|
||||
</div>
|
||||
<h3><a href="#">Accordion Header 2</a></h3>
|
||||
<div>
|
||||
Accordion Content 2
|
||||
</div>
|
||||
<h3><a href="#">Accordion Header 3</a></h3>
|
||||
<div>
|
||||
Accordion Content 3
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,37 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Accordion Visual Test : Accordion option animated easeslide</title>
|
||||
<link rel="stylesheet" href="../visual.css" type="text/css" />
|
||||
<link rel="stylesheet" href="../../../themes/base/ui.all.css" type="text/css">
|
||||
<script type="text/javascript" src="../../../jquery-1.3.2.js"></script>
|
||||
<script type="text/javascript" src="../../../ui/ui.core.js"></script>
|
||||
<script type="text/javascript" src="../../../ui/ui.accordion.js"></script>
|
||||
<script type="text/javascript" src="../../../ui/effects.core.js"></script>
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
$("#accordion").accordion({
|
||||
animated: 'easeslide'
|
||||
});
|
||||
})
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="accordion">
|
||||
<h3><a href="#">Accordion Header 1</a></h3>
|
||||
<div>
|
||||
Accordion Content 1
|
||||
</div>
|
||||
<h3><a href="#">Accordion Header 2</a></h3>
|
||||
<div>
|
||||
Accordion Content 2
|
||||
</div>
|
||||
<h3><a href="#">Accordion Header 3</a></h3>
|
||||
<div>
|
||||
Accordion Content 3
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
36
tests/visual/accordion/accordion_option_animated_false.html
Normal file
36
tests/visual/accordion/accordion_option_animated_false.html
Normal file
@ -0,0 +1,36 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Accordion Visual Test : Accordion option animated false</title>
|
||||
<link rel="stylesheet" href="../visual.css" type="text/css" />
|
||||
<link rel="stylesheet" href="../../../themes/base/ui.all.css" type="text/css">
|
||||
<script type="text/javascript" src="../../../jquery-1.3.2.js"></script>
|
||||
<script type="text/javascript" src="../../../ui/ui.core.js"></script>
|
||||
<script type="text/javascript" src="../../../ui/ui.accordion.js"></script>
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
$("#accordion").accordion({
|
||||
animated: false
|
||||
});
|
||||
})
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="accordion">
|
||||
<h3><a href="#">Accordion Header 1</a></h3>
|
||||
<div>
|
||||
Accordion Content 1
|
||||
</div>
|
||||
<h3><a href="#">Accordion Header 2</a></h3>
|
||||
<div>
|
||||
Accordion Content 2
|
||||
</div>
|
||||
<h3><a href="#">Accordion Header 3</a></h3>
|
||||
<div>
|
||||
Accordion Content 3
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
36
tests/visual/accordion/accordion_option_animated_slide.html
Normal file
36
tests/visual/accordion/accordion_option_animated_slide.html
Normal file
@ -0,0 +1,36 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Accordion Visual Test : Accordion option animated slide</title>
|
||||
<link rel="stylesheet" href="../visual.css" type="text/css" />
|
||||
<link rel="stylesheet" href="../../../themes/base/ui.all.css" type="text/css">
|
||||
<script type="text/javascript" src="../../../jquery-1.3.2.js"></script>
|
||||
<script type="text/javascript" src="../../../ui/ui.core.js"></script>
|
||||
<script type="text/javascript" src="../../../ui/ui.accordion.js"></script>
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
$("#accordion").accordion({
|
||||
animated: 'slide'
|
||||
});
|
||||
})
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="accordion">
|
||||
<h3><a href="#">Accordion Header 1</a></h3>
|
||||
<div>
|
||||
Accordion Content 1
|
||||
</div>
|
||||
<h3><a href="#">Accordion Header 2</a></h3>
|
||||
<div>
|
||||
Accordion Content 2
|
||||
</div>
|
||||
<h3><a href="#">Accordion Header 3</a></h3>
|
||||
<div>
|
||||
Accordion Content 3
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
36
tests/visual/accordion/accordion_option_animated_true.html
Normal file
36
tests/visual/accordion/accordion_option_animated_true.html
Normal file
@ -0,0 +1,36 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Accordion Visual Test : Accordion option animated true</title>
|
||||
<link rel="stylesheet" href="../visual.css" type="text/css" />
|
||||
<link rel="stylesheet" href="../../../themes/base/ui.all.css" type="text/css">
|
||||
<script type="text/javascript" src="../../../jquery-1.3.2.js"></script>
|
||||
<script type="text/javascript" src="../../../ui/ui.core.js"></script>
|
||||
<script type="text/javascript" src="../../../ui/ui.accordion.js"></script>
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
$("#accordion").accordion({
|
||||
animated: true
|
||||
});
|
||||
})
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="accordion">
|
||||
<h3><a href="#">Accordion Header 1</a></h3>
|
||||
<div>
|
||||
Accordion Content 1
|
||||
</div>
|
||||
<h3><a href="#">Accordion Header 2</a></h3>
|
||||
<div>
|
||||
Accordion Content 2
|
||||
</div>
|
||||
<h3><a href="#">Accordion Header 3</a></h3>
|
||||
<div>
|
||||
Accordion Content 3
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,48 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Accordion Visual Test : Accordion option autoHeight false</title>
|
||||
<link rel="stylesheet" href="../visual.css" type="text/css" />
|
||||
<link rel="stylesheet" href="../../../themes/base/ui.all.css" type="text/css">
|
||||
<script type="text/javascript" src="../../../jquery-1.3.2.js"></script>
|
||||
<script type="text/javascript" src="../../../ui/ui.core.js"></script>
|
||||
<script type="text/javascript" src="../../../ui/ui.accordion.js"></script>
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
$("#accordion").accordion({
|
||||
autoHeight: false
|
||||
});
|
||||
})
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="accordion">
|
||||
<h3><a href="#">Accordion Header 1</a></h3>
|
||||
<div>
|
||||
Accordion Content 1
|
||||
</div>
|
||||
<h3><a href="#">Accordion Header 2</a></h3>
|
||||
<div>
|
||||
Accordion Content 2
|
||||
<p>paragraph</p>
|
||||
<p>paragraph</p>
|
||||
<p>paragraph</p>
|
||||
<p>paragraph</p>
|
||||
<p>paragraph</p>
|
||||
<p>paragraph</p>
|
||||
<p>paragraph</p>
|
||||
</div>
|
||||
<h3><a href="#">Accordion Header 3</a></h3>
|
||||
<div>
|
||||
Accordion Content 3
|
||||
<ul>
|
||||
<li>list item</li>
|
||||
<li>list item</li>
|
||||
<li>list item</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,7 +1,7 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Accordion Visual Test : UL</title>
|
||||
<title>Accordion Visual Test : Accordion ul</title>
|
||||
<link rel="stylesheet" href="../../static/static.css" type="text/css" />
|
||||
<link rel="stylesheet" href="../../../themes/base/ui.base.css" type="text/css" />
|
||||
<link rel="stylesheet" href="../../../themes/base/ui.theme.css" type="text/css" title="ui-theme" />
|
||||
@ -1,57 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>jQuery UI Accordion - No Auto Height Test</title>
|
||||
<link rel="stylesheet" href="../../static/static.css" type="text/css" />
|
||||
<link type="text/css" href="../../../themes/base/ui.all.css" rel="stylesheet" />
|
||||
<script type="text/javascript" src="../../../jquery-1.3.2.js"></script>
|
||||
<script type="text/javascript" src="../../../ui/ui.core.js"></script>
|
||||
<script type="text/javascript" src="../../../ui/ui.accordion.js"></script>
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
$("#accordion").accordion({
|
||||
autoHeight: false
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo" style="width:300px">
|
||||
|
||||
<div id="accordion">
|
||||
<h3><a href="#">Section 1</a></h3>
|
||||
<div>
|
||||
<p>Mauris mauris ante, blandit et, ultrices a, susceros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
|
||||
</div>
|
||||
<h3><a href="#">Section 2</a></h3>
|
||||
<div>
|
||||
<p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p>
|
||||
</div>
|
||||
<h3><a href="#">Section 3</a></h3>
|
||||
<div>
|
||||
<p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p>
|
||||
<ul>
|
||||
<li>List item</li>
|
||||
<li>List item</li>
|
||||
<li>List item</li>
|
||||
<li>List item</li>
|
||||
<li>List item</li>
|
||||
<li>List item</li>
|
||||
<li>List item</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
|
||||
<p>Setting <code>autoHeight: false</code> allows to accordion panels to keep their native height.</p>
|
||||
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user