Skip to content

Commit 16dafba

Browse files
rdworthrdworth
committed
demos/sortable: touched up selectable demos
1 parent 6b42d42 commit 16dafba

File tree

4 files changed

+127
-22
lines changed

4 files changed

+127
-22
lines changed

‎demos/selectable/default.html‎

Lines changed: 14 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -9,45 +9,37 @@
99
<link type="text/css" href="../demos.css" rel="stylesheet" />
1010

1111
<style type="text/css">
12-
#selectable .ui-selecting {
13-
background: #FECA40;
14-
}
15-
#selectable .ui-selected {
16-
background: #F39814;
17-
}
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.6em; height: 1.4em; font-weight: bold; }
1817
</style>
1918
<script type="text/javascript">
2019
$(function() {
21-
$("#selectable").selectable({
22-
stop:function(){
23-
var result = $("#select-result");
24-
result.text("");
25-
$("#selectable > .ui-selected").each(function(){
26-
result.text( result.text() + " #" + ($("#selectable li").index(this)+1) );
27-
});
28-
}
29-
});
20+
$("#selectable").selectable();
3021
});
3122
</script>
3223
</head>
3324
<body>
3425
<div class="demo">
3526

3627
<ol id="selectable">
37-
<li>Draw a box with your mouse to select items.</li>
38-
<li>Draw a box with your mouse to select items.</li>
39-
<li>Draw a box with your mouse to select items.</li>
40-
<li>Draw a box with your mouse to select items.</li>
41-
<li>Draw a box with your mouse to select items.</li>
28+
<li class="ui-widget-content">Item 1</li>
29+
<li class="ui-widget-content">Item 2</li>
30+
<li class="ui-widget-content">Item 3</li>
31+
<li class="ui-widget-content">Item 4</li>
32+
<li class="ui-widget-content">Item 5</li>
33+
<li class="ui-widget-content">Item 6</li>
34+
<li class="ui-widget-content">Item 7</li>
4235
</ol>
4336

44-
You've selected: <span id="select-result">none</span>.
4537
</div><!-- End demo -->
4638

4739
<div class="demo-description">
4840

4941
<p>
50-
<!-- Add description here -->
42+
Draw a box with your mouse to select items. You can also hold down the Ctrl key to make multiple (non-adjacent) selections.
5143
</p>
5244

5345
</div><!-- End demo-description -->

‎demos/selectable/floating.html‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<title>jQuery UI Selectable - Floating Demo</title>
5+
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
6+
<script type="text/javascript" src="../../jquery-1.2.6.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: 100px; 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>
47+
Draw a box with your mouse to select items. You can also hold down the Ctrl key to make multiple (non-adjacent) selections.
48+
</p>
49+
50+
</div><!-- End demo-description -->
51+
</body>
52+
</html>

‎demos/selectable/index.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@
1010
<h4>Examples</h4>
1111
<ul>
1212
<li class="demo-config-on"><a href="default.html">Default</a></li>
13+
<li><a href="floating.html">Floating</a></li>
14+
<li><a href="serializing.html">Serializing</a></li>
1315
</ul>
1416
</div>
1517

‎demos/selectable/serializing.html‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<title>jQuery UI Selectable - Serializing Demo</title>
5+
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
6+
<script type="text/javascript" src="../../jquery-1.2.6.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.6em; height: 1.4em; font-weight: bold; }
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+
<li class="ui-widget-content">Item 7</li>
47+
</ol>
48+
49+
</div><!-- End demo -->
50+
51+
<div class="demo-description">
52+
53+
<p>
54+
Draw a box with your mouse to select items. You can also hold down the Ctrl key to make multiple (non-adjacent) selections.
55+
</p>
56+
57+
</div><!-- End demo-description -->
58+
</body>
59+
</html>

0 commit comments

Comments
 (0)