-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathjquery-sortable-list-plugin-demo.html
93 lines (91 loc) · 3.4 KB
/
jquery-sortable-list-plugin-demo.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Sortable List plugin demo</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="jquery.sortablelist-0.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#myList").sortablelist();
});
</script>
<style type="text/css">
.list { width: 100px; height: 100px; }
.table {width: 500px; border: 1px solid Gray; }
.table td { vertical-align: top; }
</style>
</head>
<body>
<form id="form1">
<div>
<h2>jQuery Sortable List plugin demo</h2>
<p>This page shows example of using jQuery Sortable List plugin:</p>
<select id="myList" multiple="multiple" class="list">
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
<option value="4">four</option>
<option value="5">five</option>
</select>
<br />
<br />
<h3>Markup:</h3>
<pre>
<style type="text/css">
.list { width: 100px; height: 100px; }
</style>
<select id="myList" multiple="multiple" class="list">
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
<option value="4">four</option>
<option value="5">five</option>
</select>
</pre>
<h3>Script:</h3>
<pre>
$(function () {
$("#myList").sortablelist();
});
</pre>
<h3>Additional options:</h3>
<table class="table">
<col style="width: 200px;" />
<col style="width: 300px;" />
<tr>
<td>Name</td>
<td>Description</td>
</tr>
<tr>
<td>arrowsColumnWidth</td>
<td>Width of the div which will be added next to the html select element. Default value is 20.</td>
</tr>
<tr>
<td>up</td>
<td>Text (or html content) for up arrow. Default value is "⇑" (<code>&uArr;</code>).</td>
</tr>
<tr>
<td>down</td>
<td>Text (or html content) for down arrow. Default value is "⇓" (<code>&dArr;</code>).</td>
</tr>
<tr>
<td>width</td>
<td>If width of html select element can't be determined, this parameter will be used for width of wrapping div. Default value is 200.</td>
</tr>
<tr>
<td>height</td>
<td>If height of html select element can't be determined, this parameter will be used for height of wrapping div. Default value is 100.</td>
</tr>
</table>
<br />
<h3>Example of usage with options:</h3>
<pre>
$(function () {
$("#myList").sortablelist({ arrowsColumnWidth : 30 });
});
</pre>
<p>For more details see <a href="http://sadomovalex.blogspot.com/2012/04/jquery-sortable-list-plugin.html">http://sadomovalex.blogspot.com/2012/04/jquery-sortable-list-plugin.html</a>.</p>
</div>
</form>
</body>
</html>