library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2024-11-21 11:04:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

markup updates to support various container element types. accordion-groups are no longer needed. Also content wraps are gone.

Browse Source 
CSS for this is in the head - as it will break the rest of trunk until these markup changes are implemented
This commit is contained in:
Scott Jehl 2009-01-29 20:04:27 +00:00
parent ea2cbb14ba
commit c927c1cd55
5 changed files with 122 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
tests/static/accordion/accordion.html
View File

@ -1,47 +0,0 @@
<!doctype html>
<html>
<head>
<title>jQuery UI Accordion Static Markup Test Page</title>
<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" />
<script type="text/javascript" src="../../../jquery-1.3.1.js"></script>
<script type="text/javascript" src="../static.js"></script>
</head>
<body style="font-size: 62.5%;">
<!-- Accordion -->
<div class="ui-accordion ui-widget ui-helper-reset">
<div class="ui-accordion-group selected">
<h3 class="ui-accordion-header ui-helper-reset ui-state-active ui-corner-top" tabindex="0"><span class="ui-icon ui-icon-triangle-1-s"></span><a href="#">First</a></h3>
<div>
<div class="ui-accordion-content-wrap ui-helper-reset ui-widget-content ui-corner-bottom">
<div class="ui-accordion-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
</div>
<div class="ui-accordion-group">
<h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" tabindex="0"><span class="ui-icon ui-icon-triangle-1-e"></span><a href="#">Second</a></h3>
<div>
<div class="ui-accordion-content-wrap ui-helper-reset ui-widget-content ui-corner-bottom" style="height: 95px; display: none;">
<div class="ui-accordion-content">
<p>Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.</p>
</div>
</div>
</div>
</div>
<div class="ui-accordion-group">
<h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" tabindex="0"><span class="ui-icon ui-icon-triangle-1-e"></span><a href="#">Third</a></h3>
<div>
<div class="ui-accordion-content-wrap ui-helper-reset ui-widget-content ui-corner-bottom" style="height: 95px; display: none;">
<div class="ui-accordion-content">
<p>Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

53
tests/static/accordion/default _nowrappers.html
View File

@ -1,53 +0,0 @@
<!doctype html>
<html>
<head>
<title>Accordion Static Test : Default</title>
<link rel="stylesheet" href="../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" />
<script type="text/javascript" src="../../../jquery-1.3.1.js"></script>
<script type="text/javascript" src="../static.js"></script>
<style type="text/css">
.ui-accordion .ui-accordion-content { border-top: 0; margin-top: -1px; position: relative; top: 1px; margin-bottom: 2px; padding: 1em 2.2em; }
</style>
</head>
<body>
<div class="ui-accordion ui-widget ui-helper-reset">
<div class="ui-accordion-group ui-accordion-selected">
<h3 class="ui-accordion-header ui-helper-reset ui-state-active ui-corner-top" tabindex="0">
<span class="ui-icon ui-icon-triangle-1-s"></span>
<a href="#">Accordion Header 1</a>
</h3>
<div>
<div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom">
Accordion Content 1
</div>
</div>
</div>
<div class="ui-accordion-group">
<h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" tabindex="0">
<span class="ui-icon ui-icon-triangle-1-e"></span>
<a href="#">Accordion Header 2</a>
</h3>
<div>
<div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="height: 95px; display: none;">
Accordion Content 2
</div>
</div>
</div>
<div class="ui-accordion-group">
<h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" tabindex="0">
<span class="ui-icon ui-icon-triangle-1-e"></span>
<a href="#">Accordion Header 3</a>
</h3>
<div>
<div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="height: 95px; display: none;">
Accordion Content 2
</div>
</div>
</div>
</div>
</body>
</html>

43
tests/static/accordion/default.html
View File

@ -7,49 +7,42 @@
<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" />
<script type="text/javascript" src="../../../jquery-1.3.1.js"></script> <script type="text/javascript" src="../../../jquery-1.3.1.js"></script>
<script type="text/javascript" src="../static.js"></script> <script type="text/javascript" src="../static.js"></script>
<style type="text/css">
/* Accordion
----------------------------------*/
.ui-accordion .ui-accordion-header { cursor: pointer; position: relative; margin-top: 1px; zoom: 1; }
.ui-accordion li {display: inline;}
.ui-accordion .ui-accordion-header-active { border-bottom: 0 !important; }
.ui-accordion .ui-accordion-header a { display: block; font-size: 1em; padding: .5em .5em .5em 2.2em; }
.ui-accordion .ui-accordion-header .ui-icon { position: absolute; left: .5em; top: 50%; margin-top: -8px; }
.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; }
.ui-accordion .ui-accordion-content-active { display: block; }
</style>
</head> </head>
<body> <body>
<div class="ui-accordion ui-widget ui-helper-reset"> <div class="ui-accordion ui-widget ui-helper-reset">
<div class="ui-accordion-group ui-accordion-selected"> <h3 class="ui-accordion-header ui-accordion-header-active ui-helper-reset ui-state-active ui-corner-top" tabindex="0">
<h3 class="ui-accordion-header ui-helper-reset ui-state-active ui-corner-top" tabindex="0">
<span class="ui-icon ui-icon-triangle-1-s"></span> <span class="ui-icon ui-icon-triangle-1-s"></span>
<a href="#">Accordion Header 1</a> <a href="#">Accordion Header 1</a>
</h3> </h3>
<div> <div class="ui-accordion-content ui-accordion-content-active ui-helper-reset ui-widget-content ui-corner-bottom">
<div class="ui-accordion-content-wrap ui-helper-reset ui-widget-content ui-corner-bottom"> Accordion Content 1
<div class="ui-accordion-content">
Accordion Content 1
</div>
</div>
</div> </div>
</div>
<div class="ui-accordion-group">
<h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" tabindex="0"> <h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" tabindex="0">
<span class="ui-icon ui-icon-triangle-1-e"></span> <span class="ui-icon ui-icon-triangle-1-e"></span>
<a href="#">Accordion Header 2</a> <a href="#">Accordion Header 2</a>
</h3> </h3>
<div> <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="height: 95px; display: none;">
<div class="ui-accordion-content-wrap ui-helper-reset ui-widget-content ui-corner-bottom" style="height: 95px; display: none;"> Accordion Content 2
<div class="ui-accordion-content">
Accordion Content 2
</div>
</div>
</div> </div>
</div>
<div class="ui-accordion-group">
<h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" tabindex="0"> <h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" tabindex="0">
<span class="ui-icon ui-icon-triangle-1-e"></span> <span class="ui-icon ui-icon-triangle-1-e"></span>
<a href="#">Accordion Header 3</a> <a href="#">Accordion Header 3</a>
</h3> </h3>
<div> <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="height: 95px; display: none;">
<div class="ui-accordion-content-wrap ui-helper-reset ui-widget-content ui-corner-bottom" style="height: 95px; display: none;"> Accordion Content 2
<div class="ui-accordion-content">
Accordion Content 2
</div>
</div>
</div> </div>
</div>
</div> </div>
</body> </body>

49
tests/static/accordion/dl.html Normal file
View File

@ -0,0 +1,49 @@
<!doctype html>
<html>
<head>
<title>Accordion Static Test : DL</title>
<link rel="stylesheet" href="../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" />
<script type="text/javascript" src="../../../jquery-1.3.1.js"></script>
<script type="text/javascript" src="../static.js"></script>
<style type="text/css">
/* Accordion
----------------------------------*/
.ui-accordion .ui-accordion-header { cursor: pointer; position: relative; margin-top: 1px; zoom: 1; }
.ui-accordion li {display: inline;}
.ui-accordion .ui-accordion-header-active { border-bottom: 0 !important; }
.ui-accordion .ui-accordion-header a { display: block; font-size: 1em; padding: .5em .5em .5em 2.2em; }
.ui-accordion .ui-accordion-header .ui-icon { position: absolute; left: .5em; top: 50%; margin-top: -8px; }
.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; }
.ui-accordion .ui-accordion-content-active { display: block; }
</style>
</head>
<body>
<dl class="ui-accordion ui-widget ui-helper-reset">
<dt class="ui-accordion-header ui-accordion-header-active ui-helper-reset ui-state-active ui-corner-top" tabindex="0">
<span class="ui-icon ui-icon-triangle-1-s"></span>
<a href="#">Accordion Header 1</a>
</dt>
<dd class="ui-accordion-content ui-accordion-content-active ui-helper-reset ui-widget-content ui-corner-bottom">
Accordion Content 1
</dd>
<dt class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" tabindex="0">
<span class="ui-icon ui-icon-triangle-1-e"></span>
<a href="#">Accordion Header 2</a>
</dt>
<dd class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="height: 95px;">
Accordion Content 2
</dd>
<dt class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" tabindex="0">
<span class="ui-icon ui-icon-triangle-1-e"></span>
<a href="#">Accordion Header 3</a>
</dt>
<dd class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="height: 95px;">
Accordion Content 2
</dd>
</dl>
</body>
</html>

55
tests/static/accordion/ul.html Normal file
View File

@ -0,0 +1,55 @@
<!doctype html>
<html>
<head>
<title>Accordion Static Test : UL</title>
<link rel="stylesheet" href="../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" />
<script type="text/javascript" src="../../../jquery-1.3.1.js"></script>
<script type="text/javascript" src="../static.js"></script>
<style type="text/css">
/* Accordion
----------------------------------*/
.ui-accordion .ui-accordion-header { cursor: pointer; position: relative; margin-top: 1px; zoom: 1; }
.ui-accordion li {display: inline;}
.ui-accordion .ui-accordion-header-active { border-bottom: 0 !important; }
.ui-accordion .ui-accordion-header a { display: block; font-size: 1em; padding: .5em .5em .5em 2.2em; }
.ui-accordion .ui-accordion-header .ui-icon { position: absolute; left: .5em; top: 50%; margin-top: -8px; }
.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; }
.ui-accordion .ui-accordion-content-active { display: block; }
</style>
</head>
<body>
<ul class="ui-accordion ui-widget ui-helper-reset">
<li>
<h2 class="ui-accordion-header ui-accordion-header-active ui-helper-reset ui-state-active ui-corner-top" tabindex="0">
<span class="ui-icon ui-icon-triangle-1-s"></span>
<a href="#">Accordion Header 1</a>
</h2>
<div class="ui-accordion-content ui-accordion-content-active ui-helper-reset ui-widget-content ui-corner-bottom">
Accordion Content 1
</div>
</li>
<li>
<h2 class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" tabindex="0">
<span class="ui-icon ui-icon-triangle-1-e"></span>
<a href="#">Accordion Header 2</a>
</h2>
<div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="height: 95px;">
Accordion Content 2
</div>
</li>
<li>
<h2 class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" tabindex="0">
<span class="ui-icon ui-icon-triangle-1-e"></span>
<a href="#">Accordion Header 3</a>
</h2>
<div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="height: 95px;">
Accordion Content 2
</div>
</li>
</ul>
</body>
</html>