r3055 committed - selectable: ported old demos over to branch, trying to get them workin...
Revision: 3055
Author: joern.zaefferer
Date: Wed Aug 12 08:55:04 2009
Log: selectable: ported old demos over to branch, trying to get them
working again
http://code.google.com/p/jquery-ui/source/detail?r=3055
Added:
/branches/labs/selectable/demo/display-grid.html
/branches/labs/selectable/demo/old-default.html
/branches/labs/selectable/demo/serialize.html
Modified:
/branches/labs/selectable/demo/default.html
/branches/labs/selectable/demo/index.html
=======================================
--- /dev/null
+++ /branches/labs/selectable/demo/display-grid.html Wed Aug 12 08:55:04
2009
@@ -0,0 +1,52 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI Selectable - Display as grid</title>
+ <link rel="stylesheet" href="../external/base/ui.core.css"
type="text/css" media="screen">
+ <link rel="stylesheet" href="../external/base/ui.theme.css"
type="text/css" media="screen">
+ <script type="text/javascript" src="../external/jquery-1.3.2.js"></script>
+ <script type="text/javascript" src="../external/ui.core.js"></script>
+ <script type="text/javascript" src="../external/ui.draggable.js"></script>
+ <script type="text/javascript" src="../ui.selectable.js"></script>
+ <link type="text/css" href="demos.css" rel="stylesheet" />
+
+ <style type="text/css">
+ #feedback { font-size: 1.4em; }
+ #selectable .ui-focused { background: #FECA40; }
+ #selectable .ui-state-selected { background: #F39814; color: white; }
+ #selectable { list-style-type: none; margin: 0; padding: 0; width:400px; }
+ #selectable li { margin: 3px; padding: 1px; float: left; width: 100px;
height: 80px; font-size: 4em; text-align: center; }
+ </style>
+ <script type="text/javascript">
+ $(function() {
+ $("#selectable").selectable();
+ });
+ </script>
+</head>
+<body>
+<div class="demo">
+
+<ol id="selectable" tabindex="1">
+ <li class="ui-state-default">1</li>
+ <li class="ui-state-default">2</li>
+ <li class="ui-state-default">3</li>
+ <li class="ui-state-default">4</li>
+ <li class="ui-state-default">5</li>
+ <li class="ui-state-default">6</li>
+ <li class="ui-state-default">7</li>
+ <li class="ui-state-default">8</li>
+ <li class="ui-state-default">9</li>
+ <li class="ui-state-default">10</li>
+ <li class="ui-state-default">11</li>
+ <li class="ui-state-default">12</li>
+</ol>
+
+</div><!-- End demo -->
+
+<div class="demo-description">
+
+To arrange selectable items as a grid, give them identical dimensions
and float them using CSS.
+
+</div><!-- End demo-description -->
+</body>
+</html>
=======================================
--- /dev/null
+++ /branches/labs/selectable/demo/old-default.html Wed Aug 12 08:55:04 2009
@@ -0,0 +1,47 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI Selectable - Default functionality</title>
+ <link rel="stylesheet" href="../external/base/ui.core.css"
type="text/css" media="screen">
+ <link rel="stylesheet" href="../external/base/ui.theme.css"
type="text/css" media="screen">
+ <script type="text/javascript" src="../external/jquery-1.3.2.js"></script>
+ <script type="text/javascript" src="../external/ui.core.js"></script>
+ <script type="text/javascript" src="../external/ui.draggable.js"></script>
+ <script type="text/javascript" src="../ui.selectable.js"></script>
+ <link type="text/css" href="demos.css" rel="stylesheet" />
+
+ <style type="text/css">
+ #feedback { font-size: 1.4em; }
+ #selectable .ui-focused { background: #FECA40; }
+ #selectable .ui-state-selected { background: #F39814; color: white; }
+ #selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
+ #selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height:
18px; width:40% }
+ </style>
+ <script type="text/javascript">
+ $(function() {
+ $("#selectable").selectable();
+ });
+ </script>
+</head>
+<body>
+<div class="demo">
+
+<ol id="selectable" tabindex='1'>
+ <li class="ui-widget-content">Item 1</li>
+ <li class="ui-widget-content">Item 2</li>
+ <li class="ui-widget-content">Item 3</li>
+ <li class="ui-widget-content">Item 4</li>
+ <li class="ui-widget-content">Item 5</li>
+ <li class="ui-widget-content">Item 6</li>
+ <li class="ui-widget-content">Item 7</li>
+</ol>
+
+</div><!-- End demo -->
+
+<div class="demo-description">
+
+Enable a DOM element (or group of elements) to be selectable. Draw a
box with your cursor to select items. Hold down the Ctrl key to make
multiple non-adjacent selections. Hold shift while clicking first and last
element of a group to select that entire group.
+
+</div><!-- End demo-description -->
+</body>
+</html>
=======================================
--- /dev/null
+++ /branches/labs/selectable/demo/serialize.html Wed Aug 12 08:55:04 2009
@@ -0,0 +1,58 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI Selectable - Serialize</title>
+ <link rel="stylesheet" href="../external/base/ui.core.css"
type="text/css" media="screen">
+ <link rel="stylesheet" href="../external/base/ui.theme.css"
type="text/css" media="screen">
+ <script type="text/javascript" src="../external/jquery-1.3.2.js"></script>
+ <script type="text/javascript" src="../external/ui.core.js"></script>
+ <script type="text/javascript" src="../external/ui.draggable.js"></script>
+ <script type="text/javascript" src="../ui.selectable.js"></script>
+ <link type="text/css" href="demos.css" rel="stylesheet" />
+
+ <style type="text/css">
+ #feedback { font-size: 1.4em; }
+ #selectable .ui-focused { background: #FECA40; }
+ #selectable .ui-state-selected { background: #F39814; color: white; }
+ #selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
+ #selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height:
18px; width: 40%; }
+ </style>
+ <script type="text/javascript">
+ $(function() {
+ $("#selectable").selectable({
+ stop: function(){
+ var result = $("#select-result").empty();
+ var items = $("#selectable li");
+ items.filter(".ui-state-selected").each(function(){
+ result.append(" #" + (items.index(this) + 1));
+ });
+ }
+ });
+ });
+ </script>
+</head>
+<body>
+<div class="demo">
+
+<p id="feedback">
+You've selected: <span id="select-result">none</span>.
+
+
+<ol id="selectable" tabindex='1'>
+ <li class="ui-widget-content">Item 1</li>
+ <li class="ui-widget-content">Item 2</li>
+ <li class="ui-widget-content">Item 3</li>
+ <li class="ui-widget-content">Item 4</li>
+ <li class="ui-widget-content">Item 5</li>
+ <li class="ui-widget-content">Item 6</li>
+</ol>
+
+</div><!-- End demo -->
+
+<div class="demo-description">
+
+Write a function that fires on the <code>stop</code> event to collect
the index values of selected items. Present values as feedback, or pass as
a data string.
+
+</div><!-- End demo-description -->
+</body>
+</html>
=======================================
--- /branches/labs/selectable/demo/default.html Wed Aug 12 08:36:49 2009
+++ /branches/labs/selectable/demo/default.html Wed Aug 12 08:55:04 2009
@@ -17,9 +17,7 @@
}
#selectable {
- list-style: none;
- margin: 0; padding: 10px;
- height: 300px;
+ list-style: none; margin: 0; padding: 10px;
}
#selectable li {
=======================================
--- /branches/labs/selectable/demo/index.html Wed May 27 10:12:39 2009
+++ /branches/labs/selectable/demo/index.html Wed Aug 12 08:55:04 2009
@@ -10,7 +10,10 @@
<h4>Examples</h4>
<ul>
<li class="demo-config-on"><a href="default.html">Default
functionality</a></li>
- <li class="demo-config-on"><a href="draggable.html">Drag &
Drop</a></li>
+ <li><a href="draggable.html">Drag & Drop</a></li>
+ <li><a href="old-default.html">Old Default Demo</a></li>
+ <li><a href="display-grid.html">Display as grid</a></li>
+ <li><a href="serialize.html">Serialize</a></li>
</ul>
</div>