diff options
Diffstat (limited to 'demos/selectable/default.html')
| -rw-r--r-- | demos/selectable/default.html | 36 |
1 files changed, 14 insertions, 22 deletions
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 -->
|