library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2024-10-05 01:44:18 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

added, cleaned up, and renamed some accordion visual tests

Browse Source
This commit is contained in:
Richard Worth 2009-03-23 11:41:34 +00:00
parent 473e7e8e8a
commit 5b000cb2c0
12 changed files with 335 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
tests/visual/accordion/accordion.html
View File

@ -1,46 +1,34 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<title>jQuery UI Accordion Visual Test</title> <title>Accordion Visual Test : Accordion</title>
<link rel="stylesheet" href="../all.css" type="text/css"> <link rel="stylesheet" href="../visual.css" type="text/css" />
<link rel="stylesheet" href="../../../themes/base/ui.all.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="../../../jquery-1.3.2.js"></script>
<script type="text/javascript" src="../../../ui/ui.core.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/ui.accordion.js"></script>
<script type="text/javascript"> <script type="text/javascript">
$(function() { $(function() {
function on() { $("#accordion").accordion();
$("#accordion").accordion(); })
}
function off() {
$("#accordion").accordion("destroy");
}
$("#toggle").toggle(on, off).click();
});
</script> </script>
</head> </head>
<body> <body>
<ul class="plugins"> <div id="accordion">
<li class="plugin"> <h3><a href="#">Accordion Header 1</a></h3>
Accordion <div>
<div id="accordion"> Accordion Content 1
<h3><a href="#">First</a></h3>
<div>
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
</div>
<h3><a href="#">Second</a></h3>
<div>
Phasellus mattis tincidunt nibh.
</div>
<h3><a href="#">Third</a></h3>
<div>
Nam dui erat, auctor a, dignissim quis.
</div>
</div> </div>
<button id="toggle">Toggle</button> <h3><a href="#">Accordion Header 2</a></h3>
</li> <div>
</ul> Accordion Content 2
</div>
<h3><a href="#">Accordion Header 3</a></h3>
<div>
Accordion Content 3
</div>
</div>
</body> </body>
</html> </html>

26
tests/visual/accordion/dl.html → tests/visual/accordion/accordion_dl.html
View File

@ -1,7 +1,7 @@
<!doctype html> <!doctype html>
<html> <html>
<head> <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="../../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.base.css" type="text/css" />
<link rel="stylesheet" href="../../../themes/base/ui.theme.css" type="text/css" title="ui-theme" /> <link rel="stylesheet" href="../../../themes/base/ui.theme.css" type="text/css" title="ui-theme" />
@ -17,23 +17,23 @@
<body> <body>
<dl> <dl>
<dt> <dt><a href="#">Accordion Header 1</a></dt>
<a href="#">Accordion Header 1</a>
</dt>
<dd> <dd>
Accordion Content 1 Accordion Content 1
<dl>
<dt>Term 1</dt>
<dt>Definition 1</dt>
<dt>Term 2</dt>
<dt>Definition 2</dt>
</dl>
</dd> </dd>
<dt> <dt><a href="#">Accordion Header 2</a></dt>
<a href="#">Accordion Header 2</a>
</dt>
<dd> <dd>
Accordion Content 2 Accordion Content 2
</dd> </dd>
<dt> <dt><a href="#">Accordion Header 3</a></dt>
<a href="#">Accordion Header 3</a>
</dt>
<dd> <dd>
Accordion Content 2 Accordion Content 2
</dd> </dd>
</dl> </dl>

34
tests/visual/accordion/accordion_method_destroy.html Normal file
View 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
View 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>

37
tests/visual/accordion/accordion_option_animated_bounceslide.html Normal file
View File

@ -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>

37
tests/visual/accordion/accordion_option_animated_easeslide.html Normal file
View File

@ -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
View 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
View 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
View 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>

48
tests/visual/accordion/accordion_option_autoHeight_false.html Normal file
View File

@ -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>

12
tests/visual/accordion/ul.html → tests/visual/accordion/accordion_ul.html
View File

@ -1,7 +1,7 @@
<!doctype html> <!doctype html>
<html> <html>
<head> <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="../../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.base.css" type="text/css" />
<link rel="stylesheet" href="../../../themes/base/ui.theme.css" type="text/css" title="ui-theme" /> <link rel="stylesheet" href="../../../themes/base/ui.theme.css" type="text/css" title="ui-theme" />
@ -22,11 +22,11 @@
</h2> </h2>
<div> <div>
Accordion Content 1 Accordion Content 1
<ul> <ul>
<li>Some list item</li> <li>Some list item</li>
<li>Some list item</li> <li>Some list item</li>
</ul> </ul>
</div> </div>
</li> </li>
<li> <li>
<h2> <h2>

57
tests/visual/accordion/width.html
View File

@ -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>