Skip to content
Permalink
Browse files

tests/visual: Added simple tabs test. Some more cleanup.

  • Loading branch information
rdworth committed Dec 13, 2008
1 parent d3e1901 commit d768b3397415e15ae4cdea5c64c872018c7cee2e
@@ -24,7 +24,7 @@
<body>

<ul class="plugins">
<li>
<li class="plugin">
Accordion
<div id="accordion">
<div>
@@ -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;
@@ -35,13 +35,14 @@
$("#selectable").selectable();
$("#slider").slider();
$("#sortable").sortable();
$("#tabs").tabs();
});
</script>
</head>
<body>

<ul class="plugins">
<li>
<li class="plugin">
Accordion
<div id="accordion">
<div>
@@ -64,23 +65,23 @@ <h3><a href="#">Test 3</a></h3>
</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>
@@ -91,15 +92,15 @@ <h3><a href="#">Test 3</a></h3>
<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>
@@ -113,11 +114,11 @@ <h3><a href="#">Test 3</a></h3>
<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>
@@ -131,6 +132,19 @@ <h3><a href="#">Test 3</a></h3>
<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>
@@ -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">
@@ -20,7 +20,7 @@
<body>

<ul class="plugins">
<li>
<li class="plugin">
Dialog
<div id="dialog">
<button>Open</button>
@@ -18,7 +18,7 @@
<body>

<ul class="plugins">
<li>
<li class="plugin">
Draggable
<div id="draggable">
<span>Handle</span>
@@ -16,7 +16,7 @@
<body>

<ul class="plugins">
<li>
<li class="plugin">
Draggable
<div id="draggable"></div>
</li>
@@ -23,7 +23,7 @@
<body>

<ul class="plugins">
<li>
<li class="plugin">
Droppable
<div class="draggable">D</div>
<div class="draggable">R</div>
@@ -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;
}
@@ -16,7 +16,7 @@
<body>

<ul class="plugins">
<li>
<li class="plugin">
Progressbar
<div id="progressbar"></div>
</li>
@@ -16,7 +16,7 @@
<body>

<ul class="plugins">
<li>
<li class="plugin">
Resizable
<div id="resizable"></div>
</li>
@@ -17,7 +17,7 @@
<body>

<ul class="plugins">
<li>
<li class="plugin">
Selectable
<div id="selectable">
<div>1</div>
@@ -17,7 +17,7 @@
<body>

<ul class="plugins">
<li>
<li class="plugin">
Slider
<div id="slider"></div>
</li>
@@ -17,7 +17,7 @@
<body>

<ul class="plugins">
<li>
<li class="plugin">
Sortable
<div id="sortable">
<div>C</div>
@@ -0,0 +1,35 @@
<!doctype html>
<html lang="en">
<head>
<title>Simple Tabs</title>
<link rel="stylesheet" href="all.css" type="text/css">
<link rel="stylesheet" href="../../themes/base/ui.all.css" type="text/css">
<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
<script type="text/javascript" src="../../ui/ui.core.js"></script>
<script type="text/javascript" src="../../ui/ui.tabs.js"></script>
<script type="text/javascript">
$(function() {
$("#tabs").tabs();
});
</script>
</head>
<body>

<ul class="plugins">
<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>
</html>

0 comments on commit d768b33

Please sign in to comment.
You can’t perform that action at this time.