Skip to content

Commit c00881c

Browse files
author
Maggie Costello Wachs
committed
reorganized/renamed selectable demos
1 parent 3a65a63 commit c00881c

4 files changed

Lines changed: 111 additions & 7 deletions

File tree

‎demos/selectable/default.html‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<!doctype html>
22
<html lang="en">
33
<head>
4-
<title>jQuery UI Selectable - Default Demo</title>
4+
<title>jQuery UI Selectable - Default functionality</title>
55
<link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
66
<script type="text/javascript" src="../../jquery-1.3.js"></script>
77
<script type="text/javascript" src="../../ui/ui.core.js"></script>
@@ -38,9 +38,7 @@
3838

3939
<div class="demo-description">
4040

41-
<p>
42-
Draw a box with your mouse to select items. You can also hold down the Ctrl key to make multiple (non-adjacent) selections.
43-
</p>
41+
<p>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. </p>
4442

4543
</div><!-- End demo-description -->
4644
</body>

‎demos/selectable/display-grid.html‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<title>jQuery UI Selectable - Display as grid</title>
5+
<link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
6+
<script type="text/javascript" src="../../jquery-1.3.js"></script>
7+
<script type="text/javascript" src="../../ui/ui.core.js"></script>
8+
<script type="text/javascript" src="../../ui/ui.selectable.js"></script>
9+
<link type="text/css" href="../demos.css" rel="stylesheet" />
10+
11+
<style type="text/css">
12+
#feedback { font-size: 1.4em; }
13+
#selectable .ui-selecting { background: #FECA40; }
14+
#selectable .ui-selected { background: #F39814; color: white; }
15+
#selectable { list-style-type: none; margin: 0; padding: 0; }
16+
#selectable li { margin: 3px; padding: 1px; float: left; width: 100px; height: 80px; font-size: 4em; text-align: center; }
17+
</style>
18+
<script type="text/javascript">
19+
$(function() {
20+
$("#selectable").selectable();
21+
});
22+
</script>
23+
</head>
24+
<body>
25+
<div class="demo">
26+
27+
<ol id="selectable">
28+
<li class="ui-state-default">1</li>
29+
<li class="ui-state-default">2</li>
30+
<li class="ui-state-default">3</li>
31+
<li class="ui-state-default">4</li>
32+
<li class="ui-state-default">5</li>
33+
<li class="ui-state-default">6</li>
34+
<li class="ui-state-default">7</li>
35+
<li class="ui-state-default">8</li>
36+
<li class="ui-state-default">9</li>
37+
<li class="ui-state-default">10</li>
38+
<li class="ui-state-default">11</li>
39+
<li class="ui-state-default">12</li>
40+
</ol>
41+
42+
</div><!-- End demo -->
43+
44+
<div class="demo-description">
45+
46+
<p>To arrange selectable items as a grid, give them identical dimensions and float them using CSS.</p>
47+
48+
</div><!-- End demo-description -->
49+
</body>
50+
</html>

‎demos/selectable/index.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,9 @@
99
<div class="demos-nav">
1010
<h4>Examples</h4>
1111
<ul>
12-
<li class="demo-config-on"><a href="default.html">Default Selectable</a></li>
13-
<li><a href="floating.html">Floating</a></li>
14-
<li><a href="serializing.html">Serializing</a></li>
12+
<li class="demo-config-on"><a href="default.html">Default functionality</a></li>
13+
<li><a href="serialize.html">Serialize</a></li>
14+
<li><a href="display-grid.html">Display as grid</a></li>
1515
</ul>
1616
</div>
1717

‎demos/selectable/serialize.html‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<title>jQuery UI Selectable - Serialize</title>
5+
<link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
6+
<script type="text/javascript" src="../../jquery-1.3.js"></script>
7+
<script type="text/javascript" src="../../ui/ui.core.js"></script>
8+
<script type="text/javascript" src="../../ui/ui.selectable.js"></script>
9+
<link type="text/css" href="../demos.css" rel="stylesheet" />
10+
11+
<style type="text/css">
12+
#feedback { font-size: 1.4em; }
13+
#selectable .ui-selecting { background: #FECA40; }
14+
#selectable .ui-selected { background: #F39814; color: white; }
15+
#selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
16+
#selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
17+
</style>
18+
<script type="text/javascript">
19+
$(function() {
20+
$("#selectable").selectable({
21+
stop: function(){
22+
var result = $("#select-result").empty();
23+
$(".ui-selected", this).each(function(){
24+
var index = $("#selectable li").index(this);
25+
result.append(" #" + (index + 1));
26+
});
27+
}
28+
});
29+
});
30+
</script>
31+
</head>
32+
<body>
33+
<div class="demo">
34+
35+
<p id="feedback">
36+
You've selected: <span id="select-result">none</span>.
37+
</p>
38+
39+
<ol id="selectable">
40+
<li class="ui-widget-content">Item 1</li>
41+
<li class="ui-widget-content">Item 2</li>
42+
<li class="ui-widget-content">Item 3</li>
43+
<li class="ui-widget-content">Item 4</li>
44+
<li class="ui-widget-content">Item 5</li>
45+
<li class="ui-widget-content">Item 6</li>
46+
</ol>
47+
48+
</div><!-- End demo -->
49+
50+
<div class="demo-description">
51+
52+
<p>Write a function that fires on the <strong>stop</strong> event to collect the index values of selected items. Present values as feedback, or pass as a data string.</p>
53+
54+
</div><!-- End demo-description -->
55+
</body>
56+
</html>

0 commit comments

Comments
 (0)