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 1 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> <body>
<ul class="plugins"> <ul class="plugins">
<li> <li class="plugin">
Accordion Accordion
<div id="accordion"> <div id="accordion">
<div> <div>

4
tests/visual/all.css
View File

@ -1,12 +1,12 @@
body { font-size: 62.5%; margin: 0; padding: 20px; background: #191919; } body { font-size: 62.5%; margin: 0; padding: 20px; background: #191919; }
ul.plugins { margin: 0; padding: 0; } 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; list-style-type: none; width: 210px; height: 220px; float: left;
color: white; border: 1px solid gray; text-align: center; font-weight: bold; } color: white; border: 1px solid gray; text-align: center; font-weight: bold; }
#accordion, #draggable, #accordion, #draggable,
#resizable, #selectable, #sortable, #tabs { #resizable, #selectable, #sortable {
margin: 10px; margin: 10px;
width: 190px; height: 180px; width: 190px; height: 180px;
text-align: center; text-align: center;

34
tests/visual/all.html
View File

@ -35,13 +35,14 @@
$("#selectable").selectable(); $("#selectable").selectable();
$("#slider").slider(); $("#slider").slider();
$("#sortable").sortable(); $("#sortable").sortable();
$("#tabs").tabs();
}); });
</script> </script>
</head> </head>
<body> <body>
<ul class="plugins"> <ul class="plugins">
<li> <li class="plugin">
Accordion Accordion
<div id="accordion"> <div id="accordion">
<div> <div>
@ -64,23 +65,23 @@
</div> </div>
</div> </div>
</li> </li>
<li> <li class="plugin">
Datepicker Datepicker
<div style="text-align:left;margin-left:10px;"> <div style="text-align:left;margin-left:10px;">
<input type="text" id="datepicker"> <input type="text" id="datepicker">
</div> </div>
</li> </li>
<li> <li class="plugin">
Dialog Dialog
<div id="dialog"> <div id="dialog">
<button>Open</button> <button>Open</button>
</div> </div>
</li> </li>
<li> <li class="plugin">
Draggable Draggable
<div id="draggable"></div> <div id="draggable"></div>
</li> </li>
<li> <li class="plugin">
Droppable Droppable
<div class="draggable">D</div> <div class="draggable">D</div>
<div class="draggable">R</div> <div class="draggable">R</div>
@ -91,15 +92,15 @@
<hr> <hr>
</div> </div>
</li> </li>
<li> <li class="plugin">
Progressbar Progressbar
<div id="progressbar"></div> <div id="progressbar"></div>
</li> </li>
<li> <li class="plugin">
Resizable Resizable
<div id="resizable"></div> <div id="resizable"></div>
</li> </li>
<li> <li class="plugin">
Selectable Selectable
<div id="selectable"> <div id="selectable">
<div>1</div> <div>1</div>
@ -113,11 +114,11 @@
<div>9</div> <div>9</div>
</div> </div>
</li> </li>
<li> <li class="plugin">
Slider Slider
<div id="slider"></div> <div id="slider"></div>
</li> </li>
<li> <li class="plugin">
Sortable Sortable
<div id="sortable"> <div id="sortable">
<div>C</div> <div>C</div>
@ -131,6 +132,19 @@
<div>B</div> <div>B</div>
</div> </div>
</li> </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> </ul>
</body> </body>

2
tests/visual/datepicker.html
View File

@ -16,7 +16,7 @@
<body> <body>
<ul class="plugins"> <ul class="plugins">
<li> <li class="plugin">
Datepicker Datepicker
<div style="text-align:left;margin-left:10px;"> <div style="text-align:left;margin-left:10px;">
<input type="text" id="datepicker"> <input type="text" id="datepicker">

2
tests/visual/dialog.html
View File

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

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

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

2
tests/visual/draggable.html
View File

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

2
tests/visual/droppable.html
View File

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

9
tests/visual/effects.all.css
View File

@ -4,15 +4,17 @@ body,html {
padding: 0; padding: 0;
font-size: 12px; font-size: 12px;
font-family: Arial; font-family: Arial;
background: #000; background: #191919;
} }
ul.effects { ul.effects {
list-style-type: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
ul.effects li { ul.effects li {
list-style-type: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
width: 120px; width: 120px;
@ -25,7 +27,7 @@ ul.effects li {
div.effect { div.effect {
width: 120px; width: 120px;
height: 100px; height: 100px;
background: #333; background: #ccc;
border: 5px outset #aaa; border: 5px outset #aaa;
float: left; float: left;
cursor: pointer; cursor: pointer;
@ -38,7 +40,8 @@ div.current {
} }
div.effect p { div.effect p {
color: #eee; color: #191919;
font-weight: bold;
margin: 0px; margin: 0px;
padding: 10px; padding: 10px;
} }

2
tests/visual/progressbar.html
View File

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

2
tests/visual/resizable.html
View File

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

2
tests/visual/selectable.html
View File

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

2
tests/visual/slider.html
View File

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

2
tests/visual/sortable.html
View File

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