]> source.dussan.org Git - jquery-ui.git/commitdiff
projects / jquery-ui.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: ea2cbb1)
markup updates to support various container element types. accordion-groups are no...
authorScott Jehl <scott@scottjehl.com>
Thu, 29 Jan 2009 20:04:27 +0000 (20:04 +0000)
committerScott Jehl <scott@scottjehl.com>
Thu, 29 Jan 2009 20:04:27 +0000 (20:04 +0000)
CSS for this is in the head - as it will break the rest of trunk until these markup changes are implemented

tests/static/accordion/accordion.html [deleted file] patch | blob | history
tests/static/accordion/default _nowrappers.html [deleted file] patch | blob | history
tests/static/accordion/default.html patch | blob | history
tests/static/accordion/dl.html [new file with mode: 0644] patch | blob
tests/static/accordion/ul.html [new file with mode: 0644] patch | blob

diff --git a/tests/static/accordion/accordion.html b/tests/static/accordion/accordion.html
deleted file mode 100644 (file)
index c7512b9..0000000
--- a/tests/static/accordion/accordion.html
+++ /dev/null
@@ -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>
diff --git a/tests/static/accordion/default _nowrappers.html b/tests/static/accordion/default _nowrappers.html
deleted file mode 100644 (file)
index cffbc71..0000000
--- a/tests/static/accordion/default _nowrappers.html
+++ /dev/null
@@ -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>
diff --git a/tests/static/accordion/default.html b/tests/static/accordion/default.html
index 78a766a1cc36a864c4cbe863dbfe1295955d7bf2..64d8e76c0645b324345926d51598947f434a5c94 100644 (file)
--- a/tests/static/accordion/default.html
+++ b/tests/static/accordion/default.html
@@ -7,49 +7,42 @@
        <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>
 
 <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">
+               <h3 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>
                </h3>
-               <div>
-                       <div class="ui-accordion-content-wrap ui-helper-reset ui-widget-content ui-corner-bottom">
-                               <div class="ui-accordion-content">
-                                       Accordion Content 1
-                               </div>
-                       </div>
+               <div class="ui-accordion-content ui-accordion-content-active ui-helper-reset ui-widget-content ui-corner-bottom">
+                               Accordion Content 1
                </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-wrap ui-helper-reset ui-widget-content ui-corner-bottom" style="height: 95px; display: none;">
-                               <div class="ui-accordion-content">
-                                       Accordion Content 2
-                               </div>
-                       </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 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-wrap ui-helper-reset ui-widget-content ui-corner-bottom" style="height: 95px; display: none;">
-                               <div class="ui-accordion-content">
-                                       Accordion Content 2
-                               </div>
-                       </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>
 
 </body>
diff --git a/tests/static/accordion/dl.html b/tests/static/accordion/dl.html
new file mode 100644 (file)
index 0000000..f53eab8
--- /dev/null
+++ b/tests/static/accordion/dl.html
@@ -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>
diff --git a/tests/static/accordion/ul.html b/tests/static/accordion/ul.html
new file mode 100644 (file)
index 0000000..8aae671
--- /dev/null
+++ b/tests/static/accordion/ul.html
@@ -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>
The official jQuery user interface library: https://github.com/jquery/jquery-ui