Skip to content

Commit bb41a25

Browse files
scottgonzalezscottgonzalez
committed
Sortable demos: Coding standards.
1 parent a829697 commit bb41a25

File tree

10 files changed

+155
-157
lines changed

10 files changed

+155
-157
lines changed

‎demos/sortable/connect-lists-through-tabs.html

Lines changed: 24 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,37 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="UTF-8" />
4+
<meta charset="utf-8">
55
<title>jQuery UI Sortable - Connect lists with Tabs</title>
6-
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
7-
<script type="text/javascript" src="../../jquery-1.4.2.js"></script>
8-
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
9-
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
10-
<script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script>
11-
<script type="text/javascript" src="../../ui/jquery.ui.sortable.js"></script>
12-
<script type="text/javascript" src="../../ui/jquery.ui.droppable.js"></script>
13-
<script type="text/javascript" src="../../ui/jquery.ui.tabs.js"></script>
14-
<link type="text/css" href="../demos.css" rel="stylesheet" />
15-
<style type="text/css">
6+
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
7+
<script src="../../jquery-1.4.2.js"></script>
8+
<script src="../../ui/jquery.ui.core.js"></script>
9+
<script src="../../ui/jquery.ui.widget.js"></script>
10+
<script src="../../ui/jquery.ui.mouse.js"></script>
11+
<script src="../../ui/jquery.ui.sortable.js"></script>
12+
<script src="../../ui/jquery.ui.droppable.js"></script>
13+
<script src="../../ui/jquery.ui.tabs.js"></script>
14+
<link rel="stylesheet" href="../demos.css">
15+
<style>
1616
#sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; }
1717
</style>
18-
<script type="text/javascript">
18+
<script>
1919
$(function() {
20-
$("#sortable1, #sortable2").sortable().disableSelection();
20+
$( "#sortable1, #sortable2" ).sortable().disableSelection();
2121

22-
var $tabs = $("#tabs").tabs();
22+
var $tabs = $( "#tabs" ).tabs();
2323

24-
var $tab_items = $("ul:first li",$tabs).droppable({
24+
var $tab_items = $( "ul:first li", $tabs ).droppable({
2525
accept: ".connectedSortable li",
2626
hoverClass: "ui-state-hover",
27-
drop: function(ev, ui) {
28-
var $item = $(this);
29-
var $list = $($item.find('a').attr('href')).find('.connectedSortable');
27+
drop: function( event, ui ) {
28+
var $item = $( this );
29+
var $list = $( $item.find( "a" ).attr( "href" ) )
30+
.find( ".connectedSortable" );
3031

31-
ui.draggable.hide('slow', function() {
32-
$tabs.tabs('select', $tab_items.index($item));
33-
$(this).appendTo($list).show('slow');
32+
ui.draggable.hide( "slow", function() {
33+
$tabs.tabs( "select", $tab_items.index( $item ) );
34+
$( this ).appendTo( $list ).show( "slow" );
3435
});
3536
}
3637
});
@@ -67,12 +68,10 @@
6768

6869
</div><!-- End demo -->
6970

70-
<div class="demo-description">
7171

72-
<p>
73-
Sort items from one list into another and vice versa, by dropping the list item on the appropriate tab above.
74-
</p>
7572

73+
<div class="demo-description">
74+
<p>Sort items from one list into another and vice versa, by dropping the list item on the appropriate tab above.</p>
7675
</div><!-- End demo-description -->
7776

7877
</body>

‎demos/sortable/connect-lists.html

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,23 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="UTF-8" />
4+
<meta charset="utf-8">
55
<title>jQuery UI Sortable - Connect lists</title>
6-
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
7-
<script type="text/javascript" src="../../jquery-1.4.2.js"></script>
8-
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
9-
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
10-
<script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script>
11-
<script type="text/javascript" src="../../ui/jquery.ui.sortable.js"></script>
12-
<link type="text/css" href="../demos.css" rel="stylesheet" />
13-
<style type="text/css">
6+
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
7+
<script src="../../jquery-1.4.2.js"></script>
8+
<script src="../../ui/jquery.ui.core.js"></script>
9+
<script src="../../ui/jquery.ui.widget.js"></script>
10+
<script src="../../ui/jquery.ui.mouse.js"></script>
11+
<script src="../../ui/jquery.ui.sortable.js"></script>
12+
<link rel="stylesheet" href="../demos.css">
13+
<style>
1414
#sortable1, #sortable2 { list-style-type: none; margin: 0; padding: 0; float: left; margin-right: 10px; }
1515
#sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; }
1616
</style>
17-
<script type="text/javascript">
17+
<script>
1818
$(function() {
19-
$("#sortable1, #sortable2").sortable({
20-
connectWith: '.connectedSortable'
19+
$( "#sortable1, #sortable2" ).sortable({
20+
connectWith: ".connectedSortable"
2121
}).disableSelection();
2222
});
2323
</script>
@@ -43,15 +43,15 @@
4343

4444
</div><!-- End demo -->
4545

46-
<div class="demo-description">
4746

47+
48+
<div class="demo-description">
4849
<p>
4950
Sort items from one list into another and vice versa, by passing a selector into
5051
the <code>connectWith</code> option. The simplest way to do this is to
5152
group all related lists with a CSS class, and then pass that class into the
5253
sortable function (i.e., <code>connectWith: '.myclass'</code>).
5354
</p>
54-
5555
</div><!-- End demo-description -->
5656

5757
</body>

‎demos/sortable/default.html

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,24 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="UTF-8" />
4+
<meta charset="utf-8">
55
<title>jQuery UI Sortable - Default functionality</title>
6-
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
7-
<script type="text/javascript" src="../../jquery-1.4.2.js"></script>
8-
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
9-
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
10-
<script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script>
11-
<script type="text/javascript" src="../../ui/jquery.ui.sortable.js"></script>
12-
<link type="text/css" href="../demos.css" rel="stylesheet" />
13-
<style type="text/css">
6+
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
7+
<script src="../../jquery-1.4.2.js"></script>
8+
<script src="../../ui/jquery.ui.core.js"></script>
9+
<script src="../../ui/jquery.ui.widget.js"></script>
10+
<script src="../../ui/jquery.ui.mouse.js"></script>
11+
<script src="../../ui/jquery.ui.sortable.js"></script>
12+
<link rel="stylesheet" href="../demos.css">
13+
<style>
1414
#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
1515
#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
1616
#sortable li span { position: absolute; margin-left: -1.3em; }
1717
</style>
18-
<script type="text/javascript">
18+
<script>
1919
$(function() {
20-
$("#sortable").sortable();
21-
$("#sortable").disableSelection();
20+
$( "#sortable" ).sortable();
21+
$( "#sortable" ).disableSelection();
2222
});
2323
</script>
2424
</head>
@@ -37,14 +37,14 @@
3737

3838
</div><!-- End demo -->
3939

40-
<div class="demo-description">
4140

41+
42+
<div class="demo-description">
4243
<p>
4344
Enable a group of DOM elements to be sortable. Click on and drag an
4445
element to a new spot within the list, and the other items will adjust to
4546
fit. By default, sortable items share <code>draggable</code> properties.
4647
</p>
47-
4848
</div><!-- End demo-description -->
4949

5050
</body>

‎demos/sortable/delay-start.html

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,30 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="UTF-8" />
4+
<meta charset="utf-8">
55
<title>jQuery UI Sortable - Delay start</title>
6-
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
7-
<script type="text/javascript" src="../../jquery-1.4.2.js"></script>
8-
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
9-
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
10-
<script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script>
11-
<script type="text/javascript" src="../../ui/jquery.ui.sortable.js"></script>
12-
<link type="text/css" href="../demos.css" rel="stylesheet" />
13-
<style type="text/css">
6+
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
7+
<script src="../../jquery-1.4.2.js"></script>
8+
<script src="../../ui/jquery.ui.core.js"></script>
9+
<script src="../../ui/jquery.ui.widget.js"></script>
10+
<script src="../../ui/jquery.ui.mouse.js"></script>
11+
<script src="../../ui/jquery.ui.sortable.js"></script>
12+
<link rel="stylesheet" href="../demos.css">
13+
<style>
1414
#sortable1, #sortable2 { list-style-type: none; margin: 0; padding: 0; margin-bottom: 15px;zoom: 1; }
1515
#sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 95%; }
1616
</style>
17-
<script type="text/javascript">
17+
<script>
1818
$(function() {
19-
$("#sortable1").sortable({
19+
$( "#sortable1" ).sortable({
2020
delay: 300
2121
});
2222

23-
$("#sortable2").sortable({
23+
$( "#sortable2" ).sortable({
2424
distance: 15
2525
});
2626

27-
$("li").disableSelection();
27+
$( "li" ).disableSelection();
2828
});
2929
</script>
3030
</head>
@@ -51,16 +51,16 @@ <h3 class="docs">Distance delay of 15px:</h3>
5151

5252
</div><!-- End demo -->
5353

54-
<div class="demo-description">
5554

55+
56+
<div class="demo-description">
5657
<p>
5758
Prevent accidental sorting either by delay (time) or distance. Set a number of
5859
milliseconds the element needs to be dragged before sorting starts
5960
with the <code>delay</code> option. Set a distance in pixels the element
6061
needs to be dragged before sorting starts with the <code>distance</code>
6162
option.
6263
</p>
63-
6464
</div><!-- End demo-description -->
6565

6666
</body>

‎demos/sortable/display-grid.html

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,23 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="UTF-8" />
4+
<meta charset="utf-8">
55
<title>jQuery UI Sortable - Display as grid</title>
6-
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
7-
<script type="text/javascript" src="../../jquery-1.4.2.js"></script>
8-
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
9-
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
10-
<script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script>
11-
<script type="text/javascript" src="../../ui/jquery.ui.sortable.js"></script>
12-
<link type="text/css" href="../demos.css" rel="stylesheet" />
13-
<style type="text/css">
6+
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
7+
<script src="../../jquery-1.4.2.js"></script>
8+
<script src="../../ui/jquery.ui.core.js"></script>
9+
<script src="../../ui/jquery.ui.widget.js"></script>
10+
<script src="../../ui/jquery.ui.mouse.js"></script>
11+
<script src="../../ui/jquery.ui.sortable.js"></script>
12+
<link rel="stylesheet" href="../demos.css">
13+
<style>
1414
#sortable { list-style-type: none; margin: 0; padding: 0; }
1515
#sortable li { margin: 3px 3px 3px 0; padding: 1px; float: left; width: 100px; height: 90px; font-size: 4em; text-align: center; }
1616
</style>
17-
<script type="text/javascript">
17+
<script>
1818
$(function() {
19-
$("#sortable").sortable();
20-
$("#sortable").disableSelection();
19+
$( "#sortable" ).sortable();
20+
$( "#sortable" ).disableSelection();
2121
});
2222
</script>
2323
</head>
@@ -41,13 +41,13 @@
4141

4242
</div><!-- End demo -->
4343

44-
<div class="demo-description">
4544

45+
46+
<div class="demo-description">
4647
<p>
4748
To arrange sortable items as a grid, give them identical dimensions and
4849
float them using CSS.
4950
</p>
50-
5151
</div><!-- End demo-description -->
5252

5353
</body>

‎demos/sortable/empty-lists.html

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,31 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="UTF-8" />
4+
<meta charset="utf-8">
55
<title>jQuery UI Sortable - Handle empty lists</title>
6-
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
7-
<script type="text/javascript" src="../../jquery-1.4.2.js"></script>
8-
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
9-
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
10-
<script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script>
11-
<script type="text/javascript" src="../../ui/jquery.ui.sortable.js"></script>
12-
<link type="text/css" href="../demos.css" rel="stylesheet" />
13-
<style type="text/css">
6+
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
7+
<script src="../../jquery-1.4.2.js"></script>
8+
<script src="../../ui/jquery.ui.core.js"></script>
9+
<script src="../../ui/jquery.ui.widget.js"></script>
10+
<script src="../../ui/jquery.ui.mouse.js"></script>
11+
<script src="../../ui/jquery.ui.sortable.js"></script>
12+
<link rel="stylesheet" href="../demos.css">
13+
<style>
1414
#sortable1, #sortable2, #sortable3 { list-style-type: none; margin: 0; padding: 0; float: left; margin-right: 10px; background: #eee; padding: 5px; width: 143px;}
1515
#sortable1 li, #sortable2 li, #sortable3 li { margin: 5px; padding: 5px; font-size: 1.2em; width: 120px; }
1616
</style>
17-
<script type="text/javascript">
17+
<script>
1818
$(function() {
19-
$("ul.droptrue").sortable({
20-
connectWith: 'ul'
19+
$( "ul.droptrue" ).sortable({
20+
connectWith: "ul"
2121
});
2222

23-
$("ul.dropfalse").sortable({
24-
connectWith: 'ul',
23+
$( "ul.dropfalse" ).sortable({
24+
connectWith: "ul",
2525
dropOnEmpty: false
2626
});
2727

28-
$("#sortable1, #sortable2, #sortable3").disableSelection();
28+
$( "#sortable1, #sortable2, #sortable3" ).disableSelection();
2929
});
3030
</script>
3131
</head>
@@ -55,14 +55,14 @@
5555

5656
</div><!-- End demo -->
5757

58-
<div class="demo-description">
5958

59+
60+
<div class="demo-description">
6061
<p>
6162
Prevent all items in a list from being dropped into a separate, empty list
6263
using the <code>dropOnEmpty</code> option set to <code>false</code>. By default,
6364
sortable items can be dropped on empty lists.
6465
</p>
65-
6666
</div><!-- End demo-description -->
6767

6868
</body>

‎demos/sortable/index.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="UTF-8" />
4+
<meta charset="utf-8">
55
<title>jQuery UI Sortable Demos</title>
6-
<link type="text/css" href="../demos.css" rel="stylesheet" />
6+
<link rel="stylesheet" href="../demos.css">
77
</head>
88
<body>
99

0 commit comments

Comments
 (0)