]> source.dussan.org Git - jquery-ui.git/commitdiff
tests/visual: Added simple tabs test. Some more cleanup.
authorRichard Worth <rdworth@gmail.com>
Sat, 13 Dec 2008 10:23:26 +0000 (10:23 +0000)
committerRichard Worth <rdworth@gmail.com>
Sat, 13 Dec 2008 10:23:26 +0000 (10:23 +0000)
15 files changed:
tests/visual/accordion.html
tests/visual/all.css
tests/visual/all.html
tests/visual/datepicker.html
tests/visual/dialog.html
tests/visual/draggable.handle.html
tests/visual/draggable.html
tests/visual/droppable.html
tests/visual/effects.all.css
tests/visual/progressbar.html
tests/visual/resizable.html
tests/visual/selectable.html
tests/visual/slider.html
tests/visual/sortable.html
tests/visual/tabs.html [new file with mode: 0644]

index 6bac62216b32df56e62fd60d808e0797562efeb3..f662120943af3eeaf0e760ba374db44ef01cea1a 100644 (file)
@@ -24,7 +24,7 @@
 <body>\r
 \r
 <ul class="plugins">\r
-<li>\r
+<li class="plugin">\r
        Accordion\r
        <div id="accordion">\r
                <div>\r
index 8a3101dec1e616e92b0f54bf48717213a1c9c048..8e88bdf3532b440dd18b08e9e8b925519e0190e6 100644 (file)
@@ -1,12 +1,12 @@
 
 body { font-size: 62.5%; margin: 0; padding: 20px; background: #191919; }
 ul.plugins { margin: 0; padding: 0; }
-ul.plugins li { margin: 0 12px 12px 0;
+ul.plugins li.plugin { margin: 0 12px 12px 0;
        list-style-type: none; width: 210px; height: 220px; float: left;
        color: white; border: 1px solid gray; text-align: center; font-weight: bold; }
 
 #accordion, #draggable,
-#resizable, #selectable, #sortable, #tabs {
+#resizable, #selectable, #sortable {
        margin: 10px;
        width: 190px; height: 180px;
        text-align: center;
index 0b5d33e0cb8594c32108b1be3074f36ea1434a5c..8263d6990249af6eae5d568bc58e6559333de2d3 100644 (file)
                $("#selectable").selectable();
                $("#slider").slider();
                $("#sortable").sortable();
+               $("#tabs").tabs();
        });
        </script>
 </head>
 <body>
 
 <ul class="plugins">
-<li>
+<li class="plugin">
        Accordion
        <div id="accordion">
                <div>
                </div>
        </div>
 </li>
-<li>
+<li class="plugin">
        Datepicker
        <div style="text-align:left;margin-left:10px;">
                <input type="text" id="datepicker">
        </div>
 </li>
-<li>
+<li class="plugin">
        Dialog
        <div id="dialog">
                <button>Open</button>
        </div>
 </li>
-<li>
+<li class="plugin">
        Draggable
        <div id="draggable"></div>
 </li>
-<li>
+<li class="plugin">
        Droppable
        <div class="draggable">D</div>
        <div class="draggable">R</div>
                <hr>
        </div>
 </li>
-<li>
+<li class="plugin">
        Progressbar
        <div id="progressbar"></div>
 </li>
-<li>
+<li class="plugin">
        Resizable
        <div id="resizable"></div>
 </li>
-<li>
+<li class="plugin">
        Selectable
        <div id="selectable">
                <div>1</div>
                <div>9</div>
        </div>
 </li>
-<li>
+<li class="plugin">
        Slider
        <div id="slider"></div>
 </li>
-<li>
+<li class="plugin">
        Sortable
        <div id="sortable">
                <div>C</div>
                <div>B</div>
        </div>
 </li>
+<li class="plugin">
+       Tabs
+       <div id="tabs">
+               <ul>
+                       <li><a href="#tabs-1">First</a></li>
+                       <li><a href="#tabs-2">Second</a></li>
+                       <li><a href="#tabs-3>Third</a></li>
+               </ul>
+               <div id="tabs-1">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.</div>
+               <div id="tabs-2">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.</div>
+               <div id="tabs-3">Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.</div>
+       </div>
+</li>
 </ul>
 
 </body>
index a2fd854752e7afb357173d97702e5f012cee1d63..b9e48a3a6d8776a3b8d58638ab5ac7273706b7c9 100644 (file)
@@ -16,7 +16,7 @@
 <body>
 
 <ul class="plugins">
-<li>
+<li class="plugin">
        Datepicker
        <div style="text-align:left;margin-left:10px;">
                <input type="text" id="datepicker">
index 509c6963055c2c98338ba7ed712098f9ff86213e..fbff3ccb49cfee7947d44cf8e361a94106253b69 100644 (file)
@@ -20,7 +20,7 @@
 <body>
 
 <ul class="plugins">
-<li>
+<li class="plugin">
        Dialog
        <div id="dialog">
                <button>Open</button>
index ae1dc98436aa3907003a017124267039f8dbc0c6..234f75e42aad504fc7722053ac83f72dcd34f53e 100644 (file)
@@ -18,7 +18,7 @@
 <body>
 
 <ul class="plugins">
-<li>
+<li class="plugin">
        Draggable
        <div id="draggable">
                <span>Handle</span>
index dc4a03e483d313b74eb531f0997b7789eee34065..a3aed5ffb883922a6b3be52dbd9dc420823218f6 100644 (file)
@@ -16,7 +16,7 @@
 <body>
 
 <ul class="plugins">
-<li>
+<li class="plugin">
        Draggable
        <div id="draggable"></div>
 </li>
index 95b85d1558ca132344e2d126feb8ef32239827b0..d22a0ac24290af0502e42e130b406f678914dd07 100644 (file)
@@ -23,7 +23,7 @@
 <body>
 
 <ul class="plugins">
-<li>
+<li class="plugin">
        Droppable
        <div class="draggable">D</div>
        <div class="draggable">R</div>
index 84f6cd2d0f792d80ceedf452abe6bb626996bba4..d962c364b3a05c2abde904addcd1b7366b9f7248 100644 (file)
@@ -4,15 +4,17 @@ body,html {
        padding: 0;
        font-size: 12px;
        font-family: Arial;
-       background: #000;
+       background: #191919;
 }
 
 ul.effects {
+       list-style-type: none;
        margin: 0;
        padding: 0;
 }
 
 ul.effects li {
+       list-style-type: none;
        margin: 0;
        padding: 0;
        width: 120px;
@@ -25,7 +27,7 @@ ul.effects li {
 div.effect {
        width: 120px;
        height: 100px;
-       background: #333;
+       background: #ccc;
        border: 5px outset #aaa;
        float: left;
        cursor: pointer;
@@ -38,7 +40,8 @@ div.current {
 }
 
 div.effect p {
-       color: #eee;
+       color: #191919;
+       font-weight: bold;
        margin: 0px;
        padding: 10px;
 }
index c1c3ad1b57b6a24f8eca73393137c2a88ccaa9b2..77cfdceae905d53fc7f58f004cdb9e94cb2390ea 100644 (file)
@@ -16,7 +16,7 @@
 <body>
 
 <ul class="plugins">
-<li>
+<li class="plugin">
        Progressbar
        <div id="progressbar"></div>
 </li>
index d9a43a3b875ff3e9a836c67841bf93ddfee4bffd..a5f81d28fda09eb893d5507982f881cc36ad69c6 100644 (file)
@@ -16,7 +16,7 @@
 <body>
 
 <ul class="plugins">
-<li>
+<li class="plugin">
        Resizable
        <div id="resizable"></div>
 </li>
index 3504a67e6919385395b5ce773d05850c0c94daf0..350510f73be3af47095e52821544addfb8afb8f5 100644 (file)
@@ -17,7 +17,7 @@
 <body>
 
 <ul class="plugins">
-<li>
+<li class="plugin">
        Selectable
        <div id="selectable">
                <div>1</div>
index 569f6b4493401aaf1e224cb4beef041074232856..283138144fe2250c77dba8501137f14e0f053fac 100644 (file)
@@ -17,7 +17,7 @@
 <body>
 
 <ul class="plugins">
-<li>
+<li class="plugin">
        Slider
        <div id="slider"></div>
 </li>
index 7a3bfcfc19acc9021ca7dcc6e7c622263da114a6..40008294c7a8df6193f58a9edb25a961c6f08df1 100644 (file)
@@ -17,7 +17,7 @@
 <body>
 
 <ul class="plugins">
-<li>
+<li class="plugin">
        Sortable
        <div id="sortable">
                <div>C</div>
diff --git a/tests/visual/tabs.html b/tests/visual/tabs.html
new file mode 100644 (file)
index 0000000..cf52d64
--- /dev/null
@@ -0,0 +1,35 @@
+<!doctype html>\r
+<html lang="en">\r
+<head>\r
+       <title>Simple Tabs</title>\r
+       <link rel="stylesheet" href="all.css" type="text/css">\r
+       <link rel="stylesheet" href="../../themes/base/ui.all.css" type="text/css">\r
+       <script type="text/javascript" src="../../jquery-1.2.6.js"></script>\r
+       <script type="text/javascript" src="../../ui/ui.core.js"></script>\r
+       <script type="text/javascript" src="../../ui/ui.tabs.js"></script>\r
+       <script type="text/javascript">\r
+       $(function() {\r
+               $("#tabs").tabs();\r
+       });\r
+       </script>\r
+</head>\r
+<body>\r
+\r
+<ul class="plugins">\r
+<li class="plugin">\r
+       Tabs\r
+       <div id="tabs">\r
+               <ul>\r
+                       <li><a href="#tabs-1">First</a></li>\r
+                       <li><a href="#tabs-2">Second</a></li>\r
+                       <li><a href="#tabs-3">Third</a></li>\r
+               </ul>\r
+               <div id="tabs-1">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.</div>\r
+               <div id="tabs-2">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.</div>\r
+               <div id="tabs-3">Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.</div>\r
+       </div>\r
+</li>\r
+</ul>\r
+\r
+</body>\r
+</html>\r