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

demos: added demo wrappers, fixed some issues with non explicit css rules

Browse Source
This commit is contained in:
Paul Bakaus 2008-12-31 14:02:14 +00:00
parent 5423b6d092
commit e9a162a23c
14 changed files with 157 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
demos/draggable/axis.html
View File

@ -20,6 +20,7 @@
</script> </script>
</head> </head>
<body> <body>
<div class="demo">
<div id="draggable" class="ui-widget-content"> <div id="draggable" class="ui-widget-content">
<p>I can be dragged only vertically</p> <p>I can be dragged only vertically</p>
@ -29,5 +30,14 @@
<p>I can be dragged only horizontally</p> <p>I can be dragged only horizontally</p>
</div> </div>
</div><!-- End demo -->
<div class="demo-description">
<p>
<!-- Add description here -->
</p>
</div><!-- End demo-description -->
</body> </body>
</html> </html>

10
demos/draggable/containment.html
View File

@ -19,6 +19,7 @@
</script> </script>
</head> </head>
<body> <body>
<div class="demo">
<div id="draggable" class="ui-widget-content"> <div id="draggable" class="ui-widget-content">
<p>I'm contained within the window</p> <p>I'm contained within the window</p>
@ -32,6 +33,15 @@
<p id="draggable3" class='ui-widget-header'>I'm contained within my parent</p> <p id="draggable3" class='ui-widget-header'>I'm contained within my parent</p>
</div> </div>
</div><!-- End demo -->
<div class="demo-description">
<p>
<!-- Add description here -->
</p>
</div><!-- End demo-description -->
<div style='width: 1px; height: 500px;'></div> <div style='width: 1px; height: 500px;'></div>
</body> </body>

10
demos/draggable/cursorat.html
View File

@ -19,6 +19,7 @@
</script> </script>
</head> </head>
<body> <body>
<div class="demo">
<div id="draggable" class="ui-widget-content"> <div id="draggable" class="ui-widget-content">
<p>I will always stick to the center (relative to the mouse)</p> <p>I will always stick to the center (relative to the mouse)</p>
@ -32,5 +33,14 @@
<p>My cursor position is only controlled for the 'bottom' value</p> <p>My cursor position is only controlled for the 'bottom' value</p>
</div> </div>
</div><!-- End demo -->
<div class="demo-description">
<p>
<!-- Add description here -->
</p>
</div><!-- End demo-description -->
</body> </body>
</html> </html>

12
demos/draggable/default.html
View File

@ -18,9 +18,21 @@
</head> </head>
<body> <body>
<div class="demo">
<div id="draggable" class="ui-widget-content"> <div id="draggable" class="ui-widget-content">
<p>Drag me around</p> <p>Drag me around</p>
</div> </div>
</div><!-- End demo -->
<div class="demo-description">
<p>
The easiest way to make an element draggable. Hold down the mouse and drag it around.
</p>
</div><!-- End demo-description -->
</body> </body>
</html> </html>

10
demos/draggable/delaydistance.html
View File

@ -18,6 +18,7 @@
</script> </script>
</head> </head>
<body> <body>
<div class="demo">
<div id="draggable" class="ui-widget-content"> <div id="draggable" class="ui-widget-content">
<p>Only if you drag me by 20 pixels, the dragging will start</p> <p>Only if you drag me by 20 pixels, the dragging will start</p>
@ -27,5 +28,14 @@
<p>Regardless of the distance, you have to drag and wait for 1000ms before dragging starts</p> <p>Regardless of the distance, you have to drag and wait for 1000ms before dragging starts</p>
</div> </div>
</div><!-- End demo -->
<div class="demo-description">
<p>
<!-- Add description here -->
</p>
</div><!-- End demo-description -->
</body> </body>
</html> </html>

10
demos/draggable/grid.html
View File

@ -18,6 +18,7 @@
</script> </script>
</head> </head>
<body> <body>
<div class="demo">
<div id="draggable" class="ui-widget-content"> <div id="draggable" class="ui-widget-content">
<p>I can be dragged in a 20x20 grid system</p> <p>I can be dragged in a 20x20 grid system</p>
@ -27,5 +28,14 @@
<p>I only follow a vertical 50 pixel grid</p> <p>I only follow a vertical 50 pixel grid</p>
</div> </div>
</div><!-- End demo -->
<div class="demo-description">
<p>
<!-- Add description here -->
</p>
</div><!-- End demo-description -->
</body> </body>
</html> </html>

10
demos/draggable/handle.html
View File

@ -18,10 +18,20 @@
</script> </script>
</head> </head>
<body> <body>
<div class="demo">
<div id="draggable" class="ui-widget-content"> <div id="draggable" class="ui-widget-content">
<p class="ui-widget-header">I can be dragged only by this handle</p> <p class="ui-widget-header">I can be dragged only by this handle</p>
</div> </div>
</div><!-- End demo -->
<div class="demo-description">
<p>
<!-- Add description here -->
</p>
</div><!-- End demo-description -->
</body> </body>
</html> </html>

10
demos/draggable/helper.html
View File

@ -25,6 +25,7 @@
</script> </script>
</head> </head>
<body> <body>
<div class="demo">
<div id="draggable" class="ui-widget-content"> <div id="draggable" class="ui-widget-content">
<p>Original</p> <p>Original</p>
@ -38,5 +39,14 @@
<p>Custom helper (in combination with cursorAt)</p> <p>Custom helper (in combination with cursorAt)</p>
</div> </div>
</div><!-- End demo -->
<div class="demo-description">
<p>
<!-- Add description here -->
</p>
</div><!-- End demo-description -->
</body> </body>
</html> </html>

10
demos/draggable/opacity.html
View File

@ -18,6 +18,7 @@
</script> </script>
</head> </head>
<body> <body>
<div class="demo">
<div id="draggable1" class="ui-widget-content"> <div id="draggable1" class="ui-widget-content">
<p>Opacity set to 0.5</p> <p>Opacity set to 0.5</p>
@ -27,5 +28,14 @@
<p>Opacity set to 0.5, using 'clone' as helper</p> <p>Opacity set to 0.5, using 'clone' as helper</p>
</div> </div>
</div><!-- End demo -->
<div class="demo-description">
<p>
<!-- Add description here -->
</p>
</div><!-- End demo-description -->
</body> </body>
</html> </html>

10
demos/draggable/revert.html
View File

@ -18,6 +18,7 @@
</script> </script>
</head> </head>
<body> <body>
<div class="demo">
<div id="draggable" class="ui-widget-content"> <div id="draggable" class="ui-widget-content">
<p>Revert the original</p> <p>Revert the original</p>
@ -27,5 +28,14 @@
<p>Revert the helper</p> <p>Revert the helper</p>
</div> </div>
</div><!-- End demo -->
<div class="demo-description">
<p>
<!-- Add description here -->
</p>
</div><!-- End demo-description -->
</body> </body>
</html> </html>

10
demos/draggable/scroll.html
View File

@ -19,6 +19,7 @@
</script> </script>
</head> </head>
<body> <body>
<div class="demo">
<div id="draggable" class="ui-widget-content"> <div id="draggable" class="ui-widget-content">
<p>Scroll set to true, default settings</p> <p>Scroll set to true, default settings</p>
@ -34,5 +35,14 @@
<div style='height: 5000px; width: 1px;'></div> <div style='height: 5000px; width: 1px;'></div>
</div><!-- End demo -->
<div class="demo-description">
<p>
<!-- Add description here -->
</p>
</div><!-- End demo-description -->
</body> </body>
</html> </html>

10
demos/draggable/snap.html
View File

@ -22,6 +22,7 @@
</script> </script>
</head> </head>
<body> <body>
<div class="demo">
<div id="snaptarget" class="ui-widget-header"> <div id="snaptarget" class="ui-widget-header">
<p>I'm a snap target</p> <p>I'm a snap target</p>
@ -50,6 +51,15 @@
</div> </div>
</div><!-- End demo -->
<div class="demo-description">
<p>
<!-- Add description here -->
</p>
</div><!-- End demo-description -->

16
demos/draggable/sortable.html
View File

@ -9,20 +9,21 @@
<script type="text/javascript" src="../../ui/ui.sortable.js"></script> <script type="text/javascript" src="../../ui/ui.sortable.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" /> <link type="text/css" href="../demos.css" rel="stylesheet" />
<style type="text/css"> <style type="text/css">
ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; } #sortable { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; }
li { margin: 3px; padding: 2px; width: 150px; } #sortable li { margin: 3px; padding: 2px; width: 150px; }
</style> </style>
<script type="text/javascript"> <script type="text/javascript">
$(function() { $(function() {
$("#sortable").sortable(); $("#sortable").sortable();
$("#draggable").draggable({ $("#draggable").draggable({
connectToSortable: ['ul'], connectToSortable: ['#sortable'],
helper: 'clone' helper: 'clone'
}); });
}); });
</script> </script>
</head> </head>
<body> <body>
<div class="demo">
<ul> <ul>
<li id="draggable" class="ui-state-highlight">Drag me down</li> <li id="draggable" class="ui-state-highlight">Drag me down</li>
@ -36,5 +37,14 @@
<li class="ui-state-default">Item 5</li> <li class="ui-state-default">Item 5</li>
</ul> </ul>
</div><!-- End demo -->
<div class="demo-description">
<p>
<!-- Add description here -->
</p>
</div><!-- End demo-description -->
</body> </body>
</html> </html>

10
demos/draggable/zindexstack.html
View File

@ -19,6 +19,7 @@
</script> </script>
</head> </head>
<body> <body>
<div class="demo">
<div id="draggable" class="ui-widget-content"> <div id="draggable" class="ui-widget-content">
<p>I always have a higher z-index than my siblings during drag</p> <p>I always have a higher z-index than my siblings during drag</p>
@ -38,5 +39,14 @@
</div> </div>
</div> </div>
</div><!-- End demo -->
<div class="demo-description">
<p>
<!-- Add description here -->
</p>
</div><!-- End demo-description -->
</body> </body>
</html> </html>