forked from istvan-ujjmeszaros/bootstrap-duallistbox
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
165 lines (146 loc) · 10.1 KB
/
index.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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap Dual Listbox</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Responsive dual select boxes (dual list boxes) for Bootstrap.">
<meta name="author" content="István Ujj-Mészáros">
<meta itemprop="name" content="Bootstrap Dual List Box">
<meta itemprop="description" content="Bootstrap Dual Listbox is a responsive dual listbox widget optimized for Twitter Bootstrap. It works on all modern browsers and on touch devices.">
<meta itemprop="image" content="http://www.virtuosoft.eu/code/bootstrap-duallistbox/preview/bootstrap-duallistbox.jpg">
<link href="bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" media="all">
<link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" media="all">
<link href="libraries/prettify/prettify.css" rel="stylesheet" type="text/css" media="all">
<link href="bootstrap-duallistbox/bootstrap-duallistbox.css" rel="stylesheet" type="text/css" media="all">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="libraries/jquery-1.9.0.min.js"></script>
<script src="libraries/modernizr/modernizr-custom.min.js"></script>
<script src="libraries/prettify/prettify.js"></script>
<script src="bootstrap-duallistbox/jquery.bootstrap-duallistbox.js"></script>
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<a href="http://www.virtuosoft.eu/code/bootstrap-duallistbox/"><span class="brand">Bootstrap Dual Listbox</span></a>
<a class="btn btn-link pull-right" href="https://github.com/istvan-ujjmeszaros/bootstrap-duallistbox" target="_blank">github project page</a>
</div>
</div>
</div>
<div class="container-fluid" style="max-width:920px;margin:0 auto;">
<div class="row-fluid">
<h2>Bootstrap Dual Listbox</h2>
<p>
Bootstrap Dual Listbox is a responsive dual listbox widget optimized for Twitter Bootstrap. It works on all modern browsers and on touch devices.
</p>
<h3>Example with default values</h3>
<p>
The dual listbox is created from a select multiple by calling <code>.bootstrapDualListbox(settings);</code> on a selector. The selector can be any element, not just selects. When the method is called on a selector other than a select, then all select childrens are converted into dual list boxes.
</p>
<div class="row-fluid">
<div class="span12">
<select multiple="multiple" size="10" name="duallistbox_demo1" class='demo1 span12'>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3" selected="selected">Option 3</option>
<option value="option4">Option 4</option>
<option value="option5">Option 5</option>
<option value="option6" selected="selected">Option 6</option>
<option value="option7">Option 7</option>
<option value="option8">Option 8</option>
<option value="option9">Option 9</option>
<option value="option0">Option 10</option>
</select>
<script>
$('.demo1').bootstrapDualListbox();
</script>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<h3>Example with custom settings</h3>
<div class="row-fluid">
<pre class="prettyprint span6">
$('.demo2').bootstrapDualListbox({
preserveselectiononmove: 'moved',
moveonselect: false,
initialfilterfrom: 'ion ([7-9]|[1][0-2])'
});
</pre>
<select multiple="multiple" size="10" name="duallistbox_demo2" class='demo2 span6'>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3" selected="selected">Option 3</option>
<option value="option4">Option 4</option>
<option value="option5">Option 5</option>
<option value="option6" selected="selected">Option 6</option>
<option value="option7">Option 7</option>
<option value="option8">Option 8</option>
<option value="option9">Option 9</option>
<option value="option0">Option 10</option>
<option value="option0">Option 11</option>
<option value="option0">Option 12</option>
<option value="option0">Option 13</option>
<option value="option0">Option 14</option>
<option value="option0">Option 15</option>
<option value="option0">Option 16</option>
<option value="option0">Option 17</option>
<option value="option0">Option 18</option>
<option value="option0">Option 19</option>
<option value="option0">Option 20</option>
</select>
<script>
$('.demo2').bootstrapDualListbox({
preserveselectiononmove: 'moved',
moveonselect: false,
initialfilterfrom: 'ion ([7-9]|[1][0-2])'
});
</script>
</div>
</div>
</div>
<div class='row-fluid'>
<div class="span12">
<h3>Settings</h3>
<dl class="dl-horizontal">
<dt><code>preserveselectiononmove</code></dt>
<dd><code><strong>false</strong></code>: Selections are cleared on move. This is the forced setting on Android because of a <a href="http://code.google.com/p/android/issues/detail?id=16922" target="_blank">bug</a>.</dd>
<dd><code>'moved'</code>: Selection is cleared in the list where the options are moved to, and the moved options are selected after move.</dd>
<dd><code>'all'</code>: Selection is preserved between the lists, so the previously selected options are selected even after moving them or other options into their list.</dd>
<dt><code>moveonselect</code></dt>
<dd><code><strong>true</strong></code>: The options are automatically moved on selection. This setting is forced on touch devices.</dd>
<dd><code>false</code>: The selected options can be moved with a button.</dd>
<dt><code>initialfilterfrom</code></dt>
<dd><code><strong>''</strong></code>: This is the initial value of the filter for the unselected values (left side). Default is empty string.</dd>
<dt><code>initialfilterto</code></dt>
<dd><code><strong>''</strong></code>: This is the initial value of the filter for the selected values (on the right). Default is empty string.</dd>
<dt><code>helperselectnamepostfix</code></dt>
<dd><code><strong>'_helper'</strong></code>: when set, the helper selects are submitted with the original selects name postfixed with this value.</dd>
<dd><code>false</code>: the helper selects are not submitted.</dd>
<dt><code>infotext</code></dt>
<dd><code><strong>'Showing all {0}'</strong></code>: this is the info text when no filter applied to the options list and the list is not empty.</dd>
<dd><code>false</code>: None of the info texts are visible.
<dt><code>infotextfiltered</code></dt>
<dd><code><strong>'<span class="label label-warning">Filtered</span> {0} from {1}'</strong></code>: this is the info text when not all of the options are visible.</dd>
<dt><code>infotextempty</code></dt>
<dd><code><strong>'Empty list'</strong></code>: this is the info text when the list is empty.</dd>
<dt><code>selectorminimalheight</code></dt>
<dd><code><strong>100</strong></code>: this is the minimal height of the rendered selects in pixels (normally they inherit the original selects height, but this is 0 in a modal when duallistbox is initialized, so this will be the height in such cases).</dd>
</dl>
</div>
</div>
<div class="row-fluid">
<h3>Download</h3>
<p><a href="https://github.com/istvan-ujjmeszaros/bootstrap-duallistbox" target="_blank">Download</a> from github. Please report issues and suggestions to github's issue tracker or contact me on <a href="https://plus.google.com/101242556570448529330/posts" target="_blank">g+</a> or <a href="https://twitter.com/styu007" target="_blank">twitter</a>!</p>
</div>
</div>
<script src="libraries/jquery-placeholder/jquery.placeholder.js"></script>
<script>
$('input').placeholder();
prettyPrint();
</script>