library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2025-01-07 20:34:24 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

demos: moved the demos.css link down so it can override default theme styles. other minor updates.

Browse Source
This commit is contained in:
Richard Worth 2008-12-31 06:29:31 +00:00
parent ac1866a7b0
commit 016eb2487a
71 changed files with 131 additions and 141 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
demos/accordion/collapsible.html
View File

@ -2,11 +2,11 @@
<html lang="en">
<head>
<title>jQuery UI Accordion - Collapsible Demo</title>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
<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>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<script type="text/javascript">
$(function() {
$("#accordion").accordion({

2
demos/accordion/custom_icons.html
View File

@ -2,11 +2,11 @@
<html lang="en">
<head>
<title>jQuery UI Accordion - Custom Icon Demo</title>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
<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>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<script type="text/javascript">
$(function() {
$("#accordion").accordion({

2
demos/accordion/default.html
View File

@ -2,11 +2,11 @@
<html lang="en">
<head>
<title>jQuery UI Accordion - Default Demo</title>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
<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>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<script type="text/javascript">
$(function() {
$("#accordion").accordion({

2
demos/accordion/fillspace.html
View File

@ -2,12 +2,12 @@
<html lang="en">
<head>
<title>jQuery UI Accordion - FillSpace Demo</title>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
<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.resizable.js"></script>
<script type="text/javascript" src="../../ui/ui.accordion.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<script type="text/javascript">
$(function() {
$("#accordion").accordion({

2
demos/accordion/mouseover.html
View File

@ -2,11 +2,11 @@
<html lang="en">
<head>
<title>jQuery UI Accordion - Mouseover Demo</title>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
<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>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<script type="text/javascript">
$(function() {
$("#accordion").accordion({

2
demos/datepicker/buttonbar.html
View File

@ -2,11 +2,11 @@
<html lang="en">
<head>
<title>jQuery UI Datepicker - Default Demo</title>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
<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>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<script type="text/javascript">
$(function() {
$('#date123').datepicker({

2
demos/datepicker/default.html
View File

@ -2,11 +2,11 @@
<html lang="en">
<head>
<title>jQuery UI Datepicker - Default Demo</title>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
<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>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<script type="text/javascript">
$(function() {
$("#date123").datepicker();

2
demos/datepicker/dropdown_month_year.html
View File

@ -2,11 +2,11 @@
<html lang="en">
<head>
<title>jQuery UI Datepicker - Default Demo</title>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
<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>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<script type="text/javascript">
$(function() {
$('#date123').datepicker({

2
demos/datepicker/inline.html
View File

@ -2,11 +2,11 @@
<html lang="en">
<head>
<title>jQuery UI Datepicker - Inline Demo</title>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
<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>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<script type="text/javascript">
$(function() {
$("#date123").datepicker();

2
demos/datepicker/multiple_calendars.html
View File

@ -2,11 +2,11 @@
<html lang="en">
<head>
<title>jQuery UI Datepicker - Default Demo</title>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
<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>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<script type="text/javascript">
$(function() {
$('#date123').datepicker({

6
demos/demos.css
View File

@ -178,4 +178,8 @@ div.demo-description {
font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana", "sans-serif";
font-size: 1.3em;
line-height: 1.4em;
}
}
.ui-draggable, .ui-droppable {
background-position: top left;
}

2
demos/dialog/default.html
View File

@ -2,13 +2,13 @@
<html lang="en">
<head>
<title>jQuery UI Dialog - Default Demo</title>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
<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.resizable.js"></script>
<script type="text/javascript" src="../../ui/ui.dialog.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<script type="text/javascript">
$(function() {
$("#dialog").dialog();

2
demos/dialog/modal.html
View File

@ -2,13 +2,13 @@
<html lang="en">
<head>
<title>jQuery UI Dialog - Modal Demo</title>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
<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.resizable.js"></script>
<script type="text/javascript" src="../../ui/ui.dialog.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<script type="text/javascript">
$(function() {
$("#dialog").dialog({

2
demos/dialog/modal_confirmation.html
View File

@ -2,13 +2,13 @@
<html lang="en">
<head>
<title>jQuery UI Dialog - Modal Confirmation Demo</title>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
<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.resizable.js"></script>
<script type="text/javascript" src="../../ui/ui.dialog.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<script type="text/javascript">
$(function() {
$("#dialog").dialog({

2
demos/dialog/modal_form.html
View File

@ -2,13 +2,13 @@
<html lang="en">
<head>
<title>jQuery UI Dialog - Modal Form Demo</title>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
<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.resizable.js"></script>
<script type="text/javascript" src="../../ui/ui.dialog.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<script type="text/javascript">
$(function() {
$("#dialog").dialog({

2
demos/dialog/modal_message.html
View File

@ -2,13 +2,13 @@
<html lang="en">
<head>
<title>jQuery UI Dialog - Modal Message Demo</title>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
<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.resizable.js"></script>
<script type="text/javascript" src="../../ui/ui.dialog.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<script type="text/javascript">
$(function() {
$("#dialog").dialog({

4
demos/draggable/axis.html
View File

@ -2,13 +2,13 @@
<html lang="en">
<head>
<title>jQuery UI Draggable - Constrained to one axis</title>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
<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>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<style type="text/css">
.ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 5px; }
#draggable, #draggable2 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 5px; }
#draggable { cursor: n-resize; }
#draggable2 { cursor: e-resize; }
</style>

2
demos/draggable/containment.html
View File

@ -2,11 +2,11 @@
<html lang="en">
<head>
<title>jQuery UI Draggable - Containment</title>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
<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>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<style type="text/css">
.ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 5px; }
</style>

4
demos/draggable/cursorat.html
View File

@ -2,13 +2,13 @@
<html lang="en">
<head>
<title>jQuery UI Draggable - Cursor at a certain position</title>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
<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>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<style type="text/css">
.ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 5px; }
#draggable, #draggable2, #draggable3 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 5px; }
</style>
<script type="text/javascript">
$(function() {

2
demos/draggable/default.html
View File

@ -2,11 +2,11 @@
<html lang="en">
<head>
<title>jQuery UI Draggable - Default Demo</title>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
<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>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<style type="text/css">
#draggable { width: 150px; height: 150px; padding: 0.5em; }
</style>

4
demos/draggable/delaydistance.html
View File

@ -2,13 +2,13 @@
<html lang="en">
<head>
<title>jQuery UI Draggable - Distance and Delay</title>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
<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>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<style type="text/css">
.ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 5px; }
#draggable, #draggable2 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 5px; }
</style>
<script type="text/javascript">
$(function() {

4
demos/draggable/grid.html
View File

@ -2,13 +2,13 @@
<html lang="en">
<head>
<title>jQuery UI Draggable - Grid</title>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
<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>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<style type="text/css">
.ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 5px; }
#draggable, #draggable2 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 5px; }
</style>
<script type="text/javascript">
$(function() {

6
demos/draggable/handle.html
View File

@ -2,14 +2,14 @@
<html lang="en">
<head>
<title>jQuery UI Draggable - Handle</title>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
<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>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<style type="text/css">
.ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 5px; }
.ui-widget-header { cursor: move; }
#draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 5px; }
#draggable p { cursor: move; }
</style>
<script type="text/javascript">
$(function() {

4
demos/draggable/helper.html
View File

@ -2,13 +2,13 @@
<html lang="en">
<head>
<title>jQuery UI Draggable - Helper</title>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
<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>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<style type="text/css">
.ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 5px; }
#draggable, #draggable2, #draggable3 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 5px; }
</style>
<script type="text/javascript">
$(function() {

4
demos/draggable/opacity.html
View File

@ -2,13 +2,13 @@
<html lang="en">
<head>
<title>jQuery UI Draggable - Opacity</title>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
<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>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<style type="text/css">
.ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 5px; }
#draggable1, #draggable2 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 5px; }
</style>
<script type="text/javascript">
$(function() {

4
demos/draggable/revert.html
View File

@ -2,13 +2,13 @@
<html lang="en">
<head>
<title>jQuery UI Draggable - Revert</title>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
<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>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<style type="text/css">
.ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 5px; }
#draggable, #draggable2 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 5px; }
</style>
<script type="text/javascript">
$(function() {

4
demos/draggable/scroll.html
View File

@ -2,13 +2,13 @@
<html lang="en">
<head>
<title>jQuery UI Draggable - Scroll</title>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
<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>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<style type="text/css">
.ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 5px; }
#draggable, #draggable2, #draggable3 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 5px; }
</style>
<script type="text/javascript">
$(function() {

8
demos/draggable/snap.html
View File

@ -2,14 +2,14 @@
<html lang="en">
<head>
<title>jQuery UI Draggable - Snap</title>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
<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>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<style type="text/css">
.ui-widget-content { width: 75px; height: 80px; padding: 0.5em; float: left; margin: 5px; }
.ui-widget-header { height: 130px; }
#draggable, #draggable2, #draggable3, #draggable4, #draggable5 { width: 75px; height: 80px; padding: 0.5em; float: left; margin: 5px; }
#snaptarget { height: 130px; }
</style>
<script type="text/javascript">
$(function() {
@ -23,7 +23,7 @@
</head>
<body>
<div class="ui-widget-header">
<div id="snaptarget" class="ui-widget-header">
<p>I'm a snap target</p>
</div>

11
demos/draggable/sortable.html
View File

@ -2,21 +2,20 @@
<html lang="en">
<head>
<title>jQuery UI Sortable - Default Demo</title>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
<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>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<style type="text/css">
ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; }
li { margin: 3px; padding: 2px; width: 150px; }
.ui-widget-header { margin-bottom: 10px; float: right; width: 100px; }
</style>
<script type="text/javascript">
$(function() {
$("ul.sortable").sortable();
$(".draggable").draggable({
$("#sortable").sortable();
$("#draggable").draggable({
connectToSortable: ['ul'],
helper: 'clone'
});
@ -26,10 +25,10 @@
<body>
<ul>
<li class="ui-state-hover draggable">Drag me down</li>
<li id="draggable" class="ui-state-highlight">Drag me down</li>
</ul>
<ul class="sortable">
<ul id="sortable">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>

4
demos/draggable/zindexstack.html
View File

@ -2,13 +2,13 @@
<html lang="en">
<head>
<title>jQuery UI Draggable - Z-Index / Stack</title>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
<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>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<style type="text/css">
.ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 5px; }
#draggable, #set, #set div { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 5px; }
#set { width: 368px; height: 120px; }
</style>
<script type="text/javascript">

10
demos/droppable/accept.html
View File

@ -2,20 +2,20 @@
<html lang="en">
<head>
<title>jQuery UI Droppable - accept</title>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
<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.droppable.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<style type="text/css">
.ui-widget-header { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
.ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px; }
#droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
#draggable, #draggable-nonvalid { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px; }
</style>
<script type="text/javascript">
$(function() {
$("#draggable,#draggable-nonvalid").draggable();
$("#draggable, #draggable-nonvalid").draggable();
$("#droppable").droppable({
accept: '#draggable',
@ -39,8 +39,6 @@
<p>Drag me to my target</p>
</div>
<div id="droppable" class="ui-widget-header">
<p>accept: '#draggable'</p>
</div>

6
demos/droppable/activeclass.html
View File

@ -2,15 +2,15 @@
<html lang="en">
<head>
<title>jQuery UI Droppable - activeClass</title>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
<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.droppable.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<style type="text/css">
.ui-widget-header { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
.ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px; }
#draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px; }
#droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
</style>
<script type="text/javascript">
$(function() {

6
demos/droppable/default.html
View File

@ -2,15 +2,15 @@
<html lang="en">
<head>
<title>jQuery UI Droppable - Default Demo</title>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
<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.droppable.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<style type="text/css">
.ui-widget-header { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
.ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px; }
#draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px; }
#droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
</style>
<script type="text/javascript">
$(function() {

10
demos/droppable/greedy.html
View File

@ -2,16 +2,16 @@
<html lang="en">
<head>
<title>jQuery UI Droppable - greedy</title>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
<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.droppable.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<style type="text/css">
#droppable,#droppable2 { width: 200px; height: 160px; padding: 0.5em; float: left; margin: 10px; }
#droppable-inner,#droppable2-inner { width: 140px; height: 100px; padding: 0.5em; float: left; margin: 10px; }
.ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px; }
#draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px; }
#droppable, #droppable2 { width: 200px; height: 160px; padding: 0.5em; float: left; margin: 10px; }
#droppable-inner, #droppable2-inner { width: 140px; height: 100px; padding: 0.5em; float: left; margin: 10px; }
</style>
<script type="text/javascript">
$(function() {
@ -44,8 +44,6 @@
<p>Drag me to my target</p>
</div>
<div id="droppable" class="ui-widget-header">
<p>Outer droppable (greedy deactivated)</p>
<div id="droppable-inner" class="ui-widget-header">

6
demos/droppable/hoverclass.html
View File

@ -2,15 +2,15 @@
<html lang="en">
<head>
<title>jQuery UI Droppable - hoverClass</title>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
<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.droppable.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<style type="text/css">
.ui-widget-header { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
.ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px; }
#draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px; }
#droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
</style>
<script type="text/javascript">
$(function() {

6
demos/droppable/revert.html
View File

@ -2,15 +2,15 @@
<html lang="en">
<head>
<title>jQuery UI Droppable - revert</title>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
<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.droppable.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<style type="text/css">
.ui-widget-header { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
.ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px; }
#draggable, #draggable2 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px; }
#droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
</style>
<script type="text/javascript">
$(function() {

6
demos/droppable/tolerance.html
View File

@ -2,15 +2,15 @@
<html lang="en">
<head>
<title>jQuery UI Droppable - tolerance</title>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
<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.droppable.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<style type="text/css">
.ui-widget-header { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
.ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px; }
#draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px; }
#dropppable, #dropppable-fit, #dropppable-pointer, #dropppable-touch { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
</style>
<script type="text/javascript">
$(function() {

2
demos/progressbar/default.html
View File

@ -2,11 +2,11 @@
<html lang="en">
<head>
<title>jQuery UI Progressbar - Default Demo</title>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
<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.progressbar.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<script type="text/javascript">
$(function() {
$("#progressbar").progressbar({

12
demos/progressbar/resize.html
View File

@ -2,22 +2,18 @@
<html lang="en">
<head>
<title>jQuery UI Progressbar - Resize Demo</title>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
<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.progressbar.js"></script>
<script type="text/javascript" src="../../ui/ui.resizable.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<script type="text/javascript">
$(function() {
$("#progressbar").progressbar({
value: 37
});
});
$(function() {
$("#progressbarWrapper").resizable({
});
$("#progressbarWrapper").resizable();
});
</script>
</head>
@ -31,15 +27,11 @@
</div><!-- End demo -->
<div class="demo-description">
<p>Since the progress bar is coded in percentages for flexible sizing, it will resize to fit whatever block it's placed inside. Try resizing the height and width of this bar to see how it maintains the correct proportions. This is not a real-world example, but it's a good illustration of how flexibly all the plugins are coded.</p>
</div><!-- End demo-description -->
</body>
</html>

2
demos/resizable/alsoresize.html
View File

@ -2,11 +2,11 @@
<html lang="en">
<head>
<title>jQuery UI Resizable - Also Resize Demo</title>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
<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.resizable.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<style type="text/css">
#resizable { background-position: top left; }
#resizable, #also { width: 150px; height: 150px; padding: 0.5em; }

2
demos/resizable/animate.html
View File

@ -2,11 +2,11 @@
<html lang="en">
<head>
<title>jQuery UI Resizable - Animate Demo</title>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
<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.resizable.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<style type="text/css">
#resizable { width: 150px; height: 150px; padding: 0.5em; }
.ui-resizable-helper { border: 1px dotted gray; }

2
demos/resizable/aspectratio.html
View File

@ -2,11 +2,11 @@
<html lang="en">
<head>
<title>jQuery UI Resizable - Aspect Ratio Demo</title>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
<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.resizable.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<style type="text/css">
#resizable { width: 160px; height: 90px; padding: 0.5em; }
</style>

2
demos/resizable/containment.html
View File

@ -2,11 +2,11 @@
<html lang="en">
<head>
<title>jQuery UI Resizable - Containment Demo</title>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
<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.resizable.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<style type="text/css">
#resizable { background-position: top left; width: 150px; height: 150px; }
#resizable, #container { padding: 0.5em; }

2
demos/resizable/default.html
View File

@ -2,11 +2,11 @@
<html lang="en">
<head>
<title>jQuery UI Resizable - Default Demo</title>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
<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.resizable.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<style type="text/css">
#resizable { width: 150px; height: 150px; padding: 0.5em; }
</style>

2
demos/resizable/delay.html
View File

@ -2,11 +2,11 @@
<html lang="en">
<head>
<title>jQuery UI Resizable - Delay Demo</title>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
<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.resizable.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<style type="text/css">
#resizable { width: 150px; height: 150px; padding: 0.5em; }
</style>

2
demos/resizable/distance.html
View File

@ -2,11 +2,11 @@
<html lang="en">
<head>
<title>jQuery UI Resizable - Distance Demo</title>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
<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.resizable.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<style type="text/css">
#resizable { width: 150px; height: 150px; padding: 0.5em; }
</style>

2
demos/resizable/ghost.html
View File

@ -2,11 +2,11 @@
<html lang="en">
<head>
<title>jQuery UI Resizable - Ghost Demo</title>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
<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.resizable.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<style type="text/css">
#resizable { width: 150px; height: 150px; padding: 0.5em; }
.ui-resizable-ghost { border: 1px dotted gray; }

2
demos/resizable/grid.html
View File

@ -2,11 +2,11 @@
<html lang="en">
<head>
<title>jQuery UI Resizable - Grid Demo</title>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
<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.resizable.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<style type="text/css">
#resizable { width: 150px; height: 150px; padding: 0.5em; }
</style>

2
demos/resizable/max.html
View File

@ -2,11 +2,11 @@
<html lang="en">
<head>
<title>jQuery UI Resizable - Max Height / Width Demo</title>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
<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.resizable.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<style type="text/css">
#resizable { width: 150px; height: 150px; padding: 0.5em; }
</style>

2
demos/resizable/min.html
View File

@ -2,11 +2,11 @@
<html lang="en">
<head>
<title>jQuery UI Resizable - Min Height / Width Demo</title>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
<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.resizable.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<style type="text/css">
#resizable { width: 150px; height: 150px; padding: 0.5em; }
</style>

2
demos/slider/colorpicker.html
View File

@ -2,11 +2,11 @@
<html lang="en">
<head>
<title>jQuery UI Slider - Colorpicker Demo</title>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
<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.slider.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<style type="text/css">
#red, #green, #blue {
float: left;

2
demos/slider/default.html
View File

@ -2,11 +2,11 @@
<html lang="en">
<head>
<title>jQuery UI Slider - Default Demo</title>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
<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.slider.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<script type="text/javascript">
$(function() {
$("#slider").slider();

2
demos/slider/multiple_vertical.html
View File

@ -2,11 +2,11 @@
<html lang="en">
<head>
<title>jQuery UI Slider - Range Min Demo</title>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
<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.slider.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<script type="text/javascript">
$(function() {
$("#slider0").slider({

2
demos/slider/range.html
View File

@ -2,11 +2,11 @@
<html lang="en">
<head>
<title>jQuery UI Slider - Range Demo</title>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
<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.slider.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<script type="text/javascript">
$(function() {
$("#slider-range").slider({

2
demos/slider/range_vertical.html
View File

@ -2,11 +2,11 @@
<html lang="en">
<head>
<title>jQuery UI Slider - Range Min Demo</title>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
<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.slider.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<script type="text/javascript">
$(function() {
$("#slider-range").slider({

2
demos/slider/rangemax.html
View File

@ -2,11 +2,11 @@
<html lang="en">
<head>
<title>jQuery UI Slider - Range Max Demo</title>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
<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.slider.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<script type="text/javascript">
$(function() {
$("#slider-range-max").slider({

2
demos/slider/rangemin.html
View File

@ -2,11 +2,11 @@
<html lang="en">
<head>
<title>jQuery UI Slider - Range Min Demo</title>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
<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.slider.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<script type="text/javascript">
$(function() {
$("#slider-range-min").slider({

2
demos/slider/slider_vertical.html
View File

@ -2,11 +2,11 @@
<html lang="en">
<head>
<title>jQuery UI Slider - Range Min Demo</title>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
<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.slider.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<script type="text/javascript">
$(function() {
$("#slider-vertical").slider({

2
demos/slider/steps.html
View File

@ -2,11 +2,11 @@
<html lang="en">
<head>
<title>jQuery UI Slider - Default Demo</title>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
<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.slider.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<script type="text/javascript">
$(function() {
$("#slider").slider({

2
demos/sortable/connectwith.html
View File

@ -2,11 +2,11 @@
<html lang="en">
<head>
<title>jQuery UI Sortable - Connected lists</title>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
<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.sortable.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<style type="text/css">
ul { list-style-type: none; margin: 0; padding: 0; float: left; margin-right: 10px; }
li { margin: 3px; padding: 2px; width: 120px; }

2
demos/sortable/default.html
View File

@ -2,11 +2,11 @@
<html lang="en">
<head>
<title>jQuery UI Sortable - Default Demo</title>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
<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.sortable.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<style type="text/css">
ul { list-style-type: none; margin: 0; padding: 0; }
li { margin: 3px; padding: 2px; }

2
demos/sortable/delaydistance.html
View File

@ -2,11 +2,11 @@
<html lang="en">
<head>
<title>jQuery UI Sortable - Delay / Distance</title>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
<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.sortable.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<style type="text/css">
ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 20px; }
li { margin: 3px; padding: 2px; }

2
demos/sortable/droponempty.html
View File

@ -2,11 +2,11 @@
<html lang="en">
<head>
<title>jQuery UI Sortable - Dropping on empty lists</title>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
<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.sortable.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<style type="text/css">
ul { list-style-type: none; margin: 0; padding: 0; float: left; margin-right: 10px; background: #eee; padding: 5px; width: 133px;}
li { margin: 3px; padding: 2px; width: 120px; }

16
demos/sortable/droppable.html
View File

@ -2,21 +2,21 @@
<html lang="en">
<head>
<title>jQuery UI Sortable - Default Demo</title>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
<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.droppable.js"></script>
<script type="text/javascript" src="../../ui/ui.sortable.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<style type="text/css">
ul { list-style-type: none; margin: 0; padding: 0; }
li { margin: 3px; padding: 2px; width: 150px; }
.ui-widget-header { height: 60px; margin-bottom: 10px; float: right; width: 200px; }
#sortable { list-style-type: none; margin: 0; padding: 0; }
#sortable li { margin: 3px; padding: 2px; width: 150px; }
#droppable { height: 60px; margin-bottom: 10px; float: right; width: 200px; }
</style>
<script type="text/javascript">
$(function() {
$("ul").sortable();
$("div").droppable({
$("#sortable").sortable();
$("#droppable").droppable({
activeClass: 'ui-state-hover',
hoverClass: 'ui-state-active',
drop: function(event, ui) {
@ -28,11 +28,11 @@
</head>
<body>
<div class="ui-widget-header">
<div id="droppable" class="ui-widget-header">
<p>Drop a list item on me - sortable items are automatically connected to droppables.</p>
</div>
<ul>
<ul id="sortable">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>

10
demos/sortable/floating.html
View File

@ -2,24 +2,24 @@
<html lang="en">
<head>
<title>jQuery UI Sortable - Floating</title>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
<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.sortable.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<style type="text/css">
ul { list-style-type: none; margin: 0; padding: 0; }
li { margin: 3px; padding: 2px; float: left; width: 100px; height: 100px; }
#sortable { list-style-type: none; margin: 0; padding: 0; }
#sortable li { margin: 3px; padding: 2px; float: left; width: 100px; height: 100px; }
</style>
<script type="text/javascript">
$(function() {
$("ul").sortable();
$("#sortable").sortable();
});
</script>
</head>
<body>
<ul>
<ul id="sortable">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>

15
demos/sortable/items.html
View File

@ -2,22 +2,21 @@
<html lang="en">
<head>
<title>jQuery UI Sortable - Items</title>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
<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.sortable.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<style type="text/css">
ul { list-style-type: none; margin: 0; padding: 0; }
li { margin: 3px; padding: 2px; }
#sortable, #sortable2 { list-style-type: none; margin: 0; padding: 0; }
#sortable li, #sortable2 li { margin: 3px; padding: 2px; }
</style>
<script type="text/javascript">
$(function() {
$("ul:eq(0)").sortable({
$("#sortable").sortable({
items: 'li:not(.ui-state-disabled)'
});
$("ul:eq(1)").sortable({
$("#sortable2").sortable({
cancel: '.ui-state-disabled'
});
});
@ -27,7 +26,7 @@
<p>Completely exclude items from the sorting logic using the 'items' option</p>
<ul>
<ul id="sortable">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default ui-state-disabled">(I'm not sortable)</li>
<li class="ui-state-default ui-state-disabled">(I'm not sortable)</li>
@ -37,7 +36,7 @@
<p>Keep the items as valid targets, but non-draggable, using the 'cancel' option</p>
<ul>
<ul id="sortable2">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default ui-state-disabled">(I'm not sortable)</li>
<li class="ui-state-default ui-state-disabled">(I'm not sortable)</li>

10
demos/sortable/placeholder.html
View File

@ -2,18 +2,18 @@
<html lang="en">
<head>
<title>jQuery UI Sortable - Placeholder</title>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
<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.sortable.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<style type="text/css">
ul { list-style-type: none; margin: 0; padding: 0; }
li { margin: 3px; padding: 2px; }
#sortable { list-style-type: none; margin: 0; padding: 0; }
#sortable li { margin: 3px; padding: 2px; }
</style>
<script type="text/javascript">
$(function() {
$("ul").sortable({
$("#sortable").sortable({
placeholder: 'ui-state-highlight'
});
});
@ -21,7 +21,7 @@
</head>
<body>
<ul>
<ul id="sortable">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>

2
demos/tabs/ajax.html
View File

@ -2,11 +2,11 @@
<html lang="en">
<head>
<title>jQuery UI Tabs - Ajax Demo</title>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
<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>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<script type="text/javascript">
$(function() {
$("#tabs").tabs();

2
demos/tabs/collapsible.html
View File

@ -2,11 +2,11 @@
<html lang="en">
<head>
<title>jQuery UI Tabs - Collapsible Demo</title>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
<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>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<script type="text/javascript">
$(function() {
$("#tabs").tabs({

2
demos/tabs/default.html
View File

@ -2,11 +2,11 @@
<html lang="en">
<head>
<title>jQuery UI Tabs - Default Demo</title>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
<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>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<script type="text/javascript">
$(function() {
$("#tabs").tabs();

2
demos/tabs/mouseover.html
View File

@ -2,11 +2,11 @@
<html lang="en">
<head>
<title>jQuery UI Tabs - Mouseover Demo</title>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
<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>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<script type="text/javascript">
$(function() {
$("#tabs").tabs({