From 16dafba1404698c2e6a590f82877ab62cee0700c Mon Sep 17 00:00:00 2001
From: Richard Worth <rdworth@gmail.com>
Date: Wed, 31 Dec 2008 23:27:40 +0000
Subject: demos/sortable: touched up selectable demos

---
 demos/selectable/default.html | 36 ++++++++++++++----------------------
 1 file changed, 14 insertions(+), 22 deletions(-)

(limited to 'demos/selectable/default.html')

diff --git a/demos/selectable/default.html b/demos/selectable/default.html
index 467a80e20..488eb526f 100644
--- a/demos/selectable/default.html
+++ b/demos/selectable/default.html
@@ -9,24 +9,15 @@
 	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	
 	<style type="text/css">
-	#selectable .ui-selecting {
-		background: #FECA40;
-	}
-	#selectable .ui-selected {
-		background: #F39814;
-	}
+	#feedback { font-size: 1.4em; }
+	#selectable .ui-selecting { background: #FECA40; }
+	#selectable .ui-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.6em; height: 1.4em; font-weight: bold; }
 	</style>
 	<script type="text/javascript">
 	$(function() {
-		$("#selectable").selectable({
-			stop:function(){
-				var result = $("#select-result");
-				result.text("");
-				$("#selectable > .ui-selected").each(function(){
-					result.text( result.text() + " #" + ($("#selectable li").index(this)+1) );
-				});
-			}
-		});
+		$("#selectable").selectable();
 	});
 	</script>
 </head>
@@ -34,20 +25,21 @@
 <div class="demo">
 
 <ol id="selectable">
-	<li>Draw a box with your mouse to select items.</li>
-	<li>Draw a box with your mouse to select items.</li>
-	<li>Draw a box with your mouse to select items.</li>
-	<li>Draw a box with your mouse to select items.</li>
-	<li>Draw a box with your mouse to select items.</li>
+	<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>
 
-You've selected: <span id="select-result">none</span>.
 </div><!-- End demo -->
 
 <div class="demo-description">
 
 <p>
-<!-- Add description here -->
+Draw a box with your mouse to select items. You can also hold down the Ctrl key to make multiple (non-adjacent) selections.
 </p>
 
 </div><!-- End demo-description -->
-- 
cgit v1.2.3