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

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

Browse Source
This commit is contained in:
Richard Worth 2008-12-13 10:23:26 +00:00
parent d3e1901e15
commit d768b33974
15 changed files with 78 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
tests/visual/accordion.html
View File

@ -24,7 +24,7 @@
<body>
<ul class="plugins">
<li>
<li class="plugin">
Accordion
<div id="accordion">
<div>

4
tests/visual/all.css
View 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;

34
tests/visual/all.html
View File

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

2
tests/visual/datepicker.html
View 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">

2
tests/visual/dialog.html
View File

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

2
tests/visual/draggable.handle.html
View File

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

2
tests/visual/draggable.html
View File

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

2
tests/visual/droppable.html
View File

@ -23,7 +23,7 @@
<body>
<ul class="plugins">
<li>
<li class="plugin">
Droppable
<div class="draggable">D</div>
<div class="draggable">R</div>

9
tests/visual/effects.all.css
View 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;
}

2
tests/visual/progressbar.html
View File

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

2
tests/visual/resizable.html
View File

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

2
tests/visual/selectable.html
View File

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

2
tests/visual/slider.html
View File

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

2
tests/visual/sortable.html
View File

@ -17,7 +17,7 @@
<body>
<ul class="plugins">
<li>
<li class="plugin">
Sortable
<div id="sortable">
<div>C</div>

35
tests/visual/tabs.html Normal file
View File

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