Skip to content
Permalink
Browse files

tests/visual: started switching to themes/base. Lots of little cleanup.

  • Loading branch information
rdworth committed Dec 13, 2008
1 parent 73dec69 commit d3e1901e1509f8bdf2ffe1f6c4c51e695a5bd089
@@ -2,54 +2,53 @@
<html lang="en">
<head>
<title>jQuery UI Accordion Visual Test</title>

<link rel="stylesheet" href="../../themes/base/ui.core.css" type="text/css">
<link rel="stylesheet" href="../../themes/base/ui.theme.css" type="text/css">
<link rel="stylesheet" href="../../themes/base/ui.accordion.css" type="text/css">

<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.accordion.js"></script>

<script type="text/javascript">
$(function() {
function enable() {
$("#myAccordion").accordion({
function on() {
$("#accordion").accordion({
header: "h3"
});
}
function disable() {
$("#myAccordion").accordion("destroy");
function off() {
$("#accordion").accordion("destroy");
}
$("#toggle").toggle(enable, disable);
//enable();
$("#toggle").toggle(on, off).click();
})
</script>
</head>
<body style="font-size: 62.5%;">

<div id="myAccordion">
<div>
<h3><a href="#">Test 1</a></h3>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit
</div>
</div>
<div>
<h3><a href="#">Test 2</a></h3>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit
</div>
</div>
<div>
<h3><a href="#">Test 3</a></h3>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit
</div>
</div>
</div>
<body>

<ul class="plugins">
<li>
Accordion
<div id="accordion">
<div>
<h3><a href="#">Test 1</a></h3>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit
</div>
</div>
<div>
<h3><a href="#">Test 2</a></h3>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit
</div>
</div>
<div>
<h3><a href="#">Test 3</a></h3>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit
</div>
</div>
</div>
<button id="toggle">Toggle</button>
</li>
</ul>

</body>
</html>
@@ -1,5 +1,5 @@

body { 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 li { margin: 0 12px 12px 0;
list-style-type: none; width: 210px; height: 220px; float: left;
@@ -10,7 +10,13 @@ ul.plugins li { margin: 0 12px 12px 0;
margin: 10px;
width: 190px; height: 180px;
text-align: center;
background: #FEA620; color: white; font-weight: bold;
background: #FF9C08; color: white; font-weight: bold;
}
#accordion {
background: none;
}
#progressbar {
margin: 10px;
}
#selectable div {
width: 45px; height: 45px; float: left; margin: 6px;
@@ -30,51 +36,6 @@ ul.plugins li { margin: 0 12px 12px 0;
background: black;
}

.draggable { margin: 10px; width: 32px; height: 30px; float: left; background: #FEA620; }
#droppable { margin: 10px; width: 190px; height: 130px; float: left; border: 1px solid #FEA620; overflow: hidden; }
.draggable { margin: 10px; width: 32px; height: 30px; float: left; background: #FF9C08; }
#droppable { margin: 10px; width: 190px; height: 130px; float: left; border: 1px solid #FF9C08; overflow: hidden; }
#droppable .draggable { margin: 7px; }

.ui-dialog { background-color: #FEA620; }
.ui-dialog .ui-dialog-titlebar { background: black; padding: 0px; height: 28px; _height: 29px; }
.ui-dialog.ui-draggable .ui-dialog-titlebar { cursor: move; }

.ui-dialog .ui-dialog-titlebar-close {
width: 16px; height: 16px; position: absolute; top: 6px; right: 7px;
cursor: default; color: white;
}

.ui-dialog .ui-dialog-titlebar-close-hover { color: #FEA620; }

.ui-dialog .ui-dialog-title {
margin-left: 5px; color: white; font-weight: bold;
position: relative; top: 7px; left: 4px;
}

.ui-dialog .ui-dialog-content {
margin: 1.2em;
}

.ui-dialog .ui-dialog-buttonpane {
position: absolute;
bottom: 8px;
right: 12px;
width: 100%;
text-align: right;
}

.ui-dialog .ui-dialog-buttonpane button {
margin: 6px;
}

/* Dialog handle styles */
.ui-dialog .ui-resizable-n { cursor: n-resize; height: 6px; width: 100%; top: 0px; left: 0px; background: gray !important; border: none !important; }
.ui-dialog .ui-resizable-s { cursor: s-resize; height: 8px; width: 100%; bottom: 0px; left: 0px; background: gray !important; border: none !important; }
.ui-dialog .ui-resizable-e { cursor: e-resize; width: 7px; right: 0px; top: 0px; height: 100%; background: gray !important; border: none !important; }
.ui-dialog .ui-resizable-w { cursor: w-resize; width: 7px; left: 0px; top: 0px; height: 100%; background: gray !important; border: none !important; }
.ui-dialog .ui-resizable-se { cursor: se-resize; width: 9px; height: 9px; right: 0px; bottom: 0px; background: gray !important; border: none !important; }
.ui-dialog .ui-resizable-sw { cursor: sw-resize; width: 9px; height: 9px; left: 0px; bottom: 0px; background: gray !important; border: none !important; }
.ui-dialog .ui-resizable-nw { cursor: nw-resize; width: 9px; height: 29px; left: 0px; top: 0px; background: gray !important; border: none !important; }
.ui-dialog .ui-resizable-ne { cursor: ne-resize; width: 9px; height: 29px; right: 0px; top: 0px; background: gray !important; border: none !important; }

.ui-slider { margin: 10px; background: #FEA620; height: 15px; position: relative; }
.ui-slider-handle { width: 10px; height: 15px; background: white; position: absolute; top: 0px; left: 0px; }
@@ -3,23 +3,25 @@
<head>
<title>Simple All</title>
<link rel="stylesheet" href="all.css" type="text/css">
<link rel="stylesheet" href="../../themes/ui.datepicker.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.accordion.js"></script>
<script type="text/javascript" src="../../ui/ui.datepicker.js"></script>
<script type="text/javascript" src="../../ui/ui.dialog.js"></script>
<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
<script type="text/javascript" src="../../ui/ui.droppable.js"></script>
<script type="text/javascript" src="../../ui/ui.progressbar.js"></script>
<script type="text/javascript" src="../../ui/ui.resizable.js"></script>
<script type="text/javascript" src="../../ui/ui.selectable.js"></script>
<script type="text/javascript" src="../../ui/ui.slider.js"></script>
<script type="text/javascript" src="../../ui/ui.sortable.js"></script>
<script type="text/javascript" src="../../ui/ui.tabs.js"></script>
<script type="text/javascript">
$(function() {
$("#accordion").accordion();
$("#datepicker").datepicker();
$("#dialog").click(function() { $("<div/>").dialog(); });
$("#dialog").click(function() { $("<div></div>").dialog(); });
$("#draggable").draggable();
$(".draggable").draggable();
$("#droppable").droppable({
@@ -28,6 +30,7 @@
ui.draggable.css({ position: 'relative', top: 0, left: 0 }).clone().appendTo(this);
}
});
$("#progressbar").progressbar({ value: 37 });
$("#resizable").resizable();
$("#selectable").selectable();
$("#slider").slider();
@@ -38,6 +41,29 @@
<body>

<ul class="plugins">
<li>
Accordion
<div id="accordion">
<div>
<h3><a href="#">Test 1</a></h3>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit
</div>
</div>
<div>
<h3><a href="#">Test 2</a></h3>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit
</div>
</div>
<div>
<h3><a href="#">Test 3</a></h3>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit
</div>
</div>
</div>
</li>
<li>
Datepicker
<div style="text-align:left;margin-left:10px;">
@@ -65,6 +91,10 @@
<hr>
</div>
</li>
<li>
Progressbar
<div id="progressbar"></div>
</li>
<li>
Resizable
<div id="resizable"></div>
@@ -3,7 +3,7 @@
<head>
<title>Simple Datepicker</title>
<link rel="stylesheet" href="all.css" type="text/css">
<link rel="stylesheet" href="../../themes/ui.datepicker.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.datepicker.js"></script>
@@ -12,7 +12,7 @@
<script type="text/javascript">
$(function() {
$("#dialog").click(function() {
$("<div/>").dialog();
$("<div></div>").dialog();
});
});
</script>
@@ -1,14 +1,17 @@
<!doctype html>
<html lang="en">
<head>
<title>Simple Draggable</title>
<title>Simple Draggable with Handle</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.draggable.js"></script>
<script type="text/javascript">
$(function() {
$("#draggable").draggable({ handle: "span" });
$("#draggable").draggable({
handle: "span"
});
});
</script>
</head>
@@ -3,6 +3,7 @@
<head>
<title>Simple Draggable</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.draggable.js"></script>
@@ -1,50 +1,38 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<!doctype html>
<html lang="en">
<head>
<script src="../../jquery-1.2.6.js" type="text/javascript" charset="utf-8"></script>
<script src="../../ui/ui.core.js" type="text/javascript" charset="utf-8"></script>
<script src="../../ui/ui.draggable.js" type="text/javascript" charset="utf-8"></script>
<script src="../../ui/ui.sortable.js" type="text/javascript" charset="utf-8"></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery UI Draggable Visual Test</title>
</head>

<body>

<style>

.draggable {
width:100px;
height:100px;
background-color:green;
color: #fff;
padding: 5px;
margin: 5px;
border: 5px solid red;
}

.container {
width: 500px;
height: 200px;
border: 5px solid black;
padding: 5px;
margin: 5px;
float: left;
background: #fff;
}

.enlarge {
width: 1000px;
height: 1000px;
}


</style>



<script language="JavaScript">
<!--
<title>Draggable Scroll Tests</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.draggable.js"></script>
<script type="text/javascript" src="../../ui/ui.sortable.js"></script>
<style type="text/css">
.draggable {
width:100px;
height:100px;
background-color:green;
color: #fff;
padding: 5px;
margin: 5px;
border: 5px solid red;
}
.container {
width: 500px;
height: 200px;
border: 5px solid black;
padding: 5px;
margin: 5px;
float: left;
background: #fff;
}
.enlarge {
width: 1000px;
height: 1000px;
}
</style>
<script type="text/javascript">
$(function(){
$(".draggable").draggable({
//helper: 'clone',
@@ -55,10 +43,9 @@
//containment:"parent"
});
});
//-->
</script>


</script>
</head>
<body>

<div class='container' style="overflow:scroll;">
<div class='draggable'>(Broken in IE)</div>
@@ -3,6 +3,7 @@
<head>
<title>Simple Droppable</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.draggable.js"></script>

0 comments on commit d3e1901

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