You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
170 lines
8.9 KiB
170 lines
8.9 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta name="description" lang="en" content="jQuery multiselect plugin with two sides. The user can select one or more items and send them to the other side."/>
|
|
<meta name="keywords" lang="en" content="jQuery multiselect plugin" />
|
|
|
|
<base href="http://crlcu.github.io/multiselect/" />
|
|
|
|
<title>jQuery multiselect plugin with two sides</title>
|
|
|
|
<link rel="icon" type="image/x-icon" href="https://github.com/favicon.ico" />
|
|
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
|
|
<link rel="stylesheet" href="lib/google-code-prettify/prettify.css" />
|
|
<link rel="stylesheet" href="css/style.css" />
|
|
</head>
|
|
<body>
|
|
<a href="https://github.com/crlcu/multiselect" class="github ribbon">
|
|
<img src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png" alt="Fork me on GitHub">
|
|
</a>
|
|
|
|
<div class="navbar navbar-inverse navbar-fixed-top">
|
|
<div class="navbar-inner">
|
|
<div class="container">
|
|
<div class="navbar-header">
|
|
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
|
|
<span class="sr-only">Toggle navigation</span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
</button>
|
|
<a class="navbar-brand scroll" href="#">Multiselect</a>
|
|
</div>
|
|
|
|
<div class="collapse navbar-collapse">
|
|
<ul class="nav navbar-nav">
|
|
<li><a href="#" class="scroll">Home</a></li>
|
|
<li><a href="#documentation" class="scroll">Documentation</a></li>
|
|
<li><a href="#browser-support" class="scroll">Browser Support</a></li>
|
|
<li class="dropdown">
|
|
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Examples <span class="caret"></span ></a>
|
|
<ul class="dropdown-menu" role="menu">
|
|
<li><a href="examples/zero-configuration.html">Zero configuration</a></li>
|
|
<li><a href="examples/data-options.html">With <code>data</code> options</a></li>
|
|
<li><a href="examples/javascript-options.html">With <code>javascript</code> options</a></li>
|
|
<li><a href="examples/search.html">With <code>search</code></a></li>
|
|
<li><a href="examples/keep-rendering-sort.html">Keep rendering <code>sort</code></a></li>
|
|
<li><a href="examples/custom-sort.html">Custom <code>sort</code></a></li>
|
|
<li><a href="examples/undo-redo.html">Undo / Redo</a></li>
|
|
<li><a href="examples/multiple-destinations.html">Multiple destinations</a></li>
|
|
<li><a href="examples/optgroup.html">With <code>optgroup</code></a></li>
|
|
<li><a href="examples/move-up-down.html">With move <code>up</code>/<code>down</code> buttons</a></li>
|
|
<li><a href="examples/multiple.html">Multiple instances</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a href="#download" class="scroll">Download</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="wrap" class="container">
|
|
<h4 id="demo-zero-configuration">Zero configuration</h4>
|
|
|
|
<div class="row">
|
|
<div class="col-sm-5">
|
|
<select name="from[]" id="multiselect" class="form-control" size="8" multiple="multiple">
|
|
<option value="1">Item 1</option>
|
|
<option value="2">Item 5</option>
|
|
<option value="2">Item 2</option>
|
|
<option value="2">Item 4</option>
|
|
<option value="3">Item 3</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="col-sm-2">
|
|
<button type="button" id="multiselect_rightAll" class="btn btn-block"><i class="glyphicon glyphicon-forward"></i></button>
|
|
<button type="button" id="multiselect_rightSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-right"></i></button>
|
|
<button type="button" id="multiselect_leftSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-left"></i></button>
|
|
<button type="button" id="multiselect_leftAll" class="btn btn-block"><i class="glyphicon glyphicon-backward"></i></button>
|
|
</div>
|
|
|
|
<div class="col-sm-5">
|
|
<select name="to[]" id="multiselect_to" class="form-control" size="8" multiple="multiple"></select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-xs-12">
|
|
<h5>HTML</h5>
|
|
<pre class="prettyprint linenums">
|
|
<div class="row">
|
|
<div class="col-xs-5">
|
|
<select name="from[]" id="multiselect" class="form-control" size="8" multiple="multiple">
|
|
<option value="1">Item 1</option>
|
|
<option value="2">Item 5</option>
|
|
<option value="2">Item 2</option>
|
|
<option value="2">Item 4</option>
|
|
<option value="3">Item 3</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="col-xs-2">
|
|
<button type="button" id="multiselect_rightAll" class="btn btn-block"><i class="glyphicon glyphicon-forward"></i></button>
|
|
<button type="button" id="multiselect_rightSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-right"></i></button>
|
|
<button type="button" id="multiselect_leftSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-left"></i></button>
|
|
<button type="button" id="multiselect_leftAll" class="btn btn-block"><i class="glyphicon glyphicon-backward"></i></button>
|
|
</div>
|
|
|
|
<div class="col-xs-5">
|
|
<select name="to[]" id="multiselect_to" class="form-control" size="8" multiple="multiple"></select>
|
|
</div>
|
|
</div>
|
|
</pre>
|
|
<h5>JavaScript</h5>
|
|
<pre class="prettyprint linenums">
|
|
<script type="text/javascript">
|
|
jQuery(document).ready(function($) {
|
|
$('#multiselect').multiselect();
|
|
});
|
|
</script>
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
|
|
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
|
|
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.js"></script>
|
|
<script type="text/javascript" src="dist/js/multiselect.min.js"></script>
|
|
|
|
<script>
|
|
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
|
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
|
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
|
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
|
|
|
ga('create', 'UA-39934286-1', 'github.com');
|
|
ga('send', 'pageview');
|
|
</script>
|
|
|
|
<script type="text/javascript">
|
|
$(document).ready(function() {
|
|
// make code pretty
|
|
window.prettyPrint && prettyPrint();
|
|
|
|
// hack for iPhone 7.0.3 multiselects bug
|
|
if(navigator.userAgent.match(/iPhone/i)) {
|
|
$('select[multiple]').each(function(){
|
|
var select = $(this).on({
|
|
"focusout": function(){
|
|
var values = select.val() || [];
|
|
setTimeout(function(){
|
|
select.val(values.length ? values : ['']).change();
|
|
}, 1000);
|
|
}
|
|
});
|
|
var firstOption = '<option value="" disabled="disabled"';
|
|
firstOption += (select.val() || []).length > 0 ? '' : ' selected="selected"';
|
|
firstOption += '>Select ' + (select.attr('title') || 'Options') + '';
|
|
firstOption += '</option>';
|
|
select.prepend(firstOption);
|
|
});
|
|
}
|
|
|
|
$('#multiselect').multiselect();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|