Julio
7 years ago
parent
77f1a9415e
commit
8ba466ad69
@ -1,169 +0,0 @@ |
|||||||
<!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-keep-rendering-sort">Keep rendering sort</h4> |
|
||||||
|
|
||||||
<div class="row"> |
|
||||||
<div class="col-xs-5"> |
|
||||||
<select name="from[]" id="customSort" class="form-control" size="8" multiple="multiple"> |
|
||||||
<option value="1" data-position="1">Item 1</option> |
|
||||||
<option value="5" data-position="2">Item 5</option> |
|
||||||
<option value="2" data-position="3">Item 2</option> |
|
||||||
<option value="4" data-position="4">Item 4</option> |
|
||||||
<option value="3" data-position="5">Item 3</option> |
|
||||||
</select> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="col-xs-2"> |
|
||||||
<button type="button" id="customSort_rightAll" class="btn btn-block"><i class="glyphicon glyphicon-forward"></i></button> |
|
||||||
<button type="button" id="customSort_rightSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-right"></i></button> |
|
||||||
<button type="button" id="customSort_leftSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-left"></i></button> |
|
||||||
<button type="button" id="customSort_leftAll" class="btn btn-block"><i class="glyphicon glyphicon-backward"></i></button> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="col-xs-5"> |
|
||||||
<select name="to[]" id="customSort_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="customSort" class="form-control" size="8" multiple="multiple"> |
|
||||||
<option value="1">Item 1</option> |
|
||||||
<option value="5">Item 5</option> |
|
||||||
<option value="2">Item 2</option> |
|
||||||
<option value="4">Item 4</option> |
|
||||||
<option value="3">Item 3</option> |
|
||||||
</select> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="col-xs-2"> |
|
||||||
<button type="button" id="customSort_rightAll" class="btn btn-block"><i class="glyphicon glyphicon-forward"></i></button> |
|
||||||
<button type="button" id="customSort_rightSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-right"></i></button> |
|
||||||
<button type="button" id="customSort_leftSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-left"></i></button> |
|
||||||
<button type="button" id="customSort_leftAll" class="btn btn-block"><i class="glyphicon glyphicon-backward"></i></button> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="col-xs-5"> |
|
||||||
<select name="to[]" id="customSort_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($) { |
|
||||||
$('#customSort').multiselect({ |
|
||||||
sort: { |
|
||||||
left: function(a, b) { |
|
||||||
return a.value > b.value ? 1 : -1; |
|
||||||
}, |
|
||||||
right: function(a, b) { |
|
||||||
return a.value > b.value ? -1 : 1; |
|
||||||
} |
|
||||||
} |
|
||||||
}); |
|
||||||
}); |
|
||||||
</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(); |
|
||||||
|
|
||||||
$('#customSort').multiselect({ |
|
||||||
sort: { |
|
||||||
left: function(a, b) { |
|
||||||
return a.value > b.value ? 1 : -1; |
|
||||||
}, |
|
||||||
right: function(a, b) { |
|
||||||
return a.value < b.value ? 1 : -1; |
|
||||||
} |
|
||||||
} |
|
||||||
}); |
|
||||||
}); |
|
||||||
</script> |
|
||||||
</body> |
|
||||||
</html> |
|
||||||
@ -1,151 +0,0 @@ |
|||||||
<!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="with-data-options">With <code>data</code> options</h4> |
|
||||||
|
|
||||||
<div class="row"> |
|
||||||
<div class="col-xs-5"> |
|
||||||
<select name="from[]" class="multiselect form-control" size="8" multiple="multiple" data-right="#multiselect_to_1" data-right-all="#right_All_1" data-right-selected="#right_Selected_1" data-left-all="#left_All_1" data-left-selected="#left_Selected_1"> |
|
||||||
<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="right_All_1" class="btn btn-block"><i class="glyphicon glyphicon-forward"></i></button> |
|
||||||
<button type="button" id="right_Selected_1" class="btn btn-block"><i class="glyphicon glyphicon-chevron-right"></i></button> |
|
||||||
<button type="button" id="left_Selected_1" class="btn btn-block"><i class="glyphicon glyphicon-chevron-left"></i></button> |
|
||||||
<button type="button" id="left_All_1" class="btn btn-block"><i class="glyphicon glyphicon-backward"></i></button> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="col-xs-5"> |
|
||||||
<select name="to[]" id="multiselect_to_1" 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[]" class="multiselect form-control" size="8" multiple="multiple" data-right="#multiselect_to_1" data-right-all="#right_All_1" data-right-selected="#right_Selected_1" data-left-all="#left_All_1" data-left-selected="#left_Selected_1"> |
|
||||||
<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="right_All_1" class="btn btn-block"><i class="glyphicon glyphicon-forward"></i></button> |
|
||||||
<button type="button" id="right_Selected_1" class="btn btn-block"><i class="glyphicon glyphicon-chevron-right"></i></button> |
|
||||||
<button type="button" id="left_Selected_1" class="btn btn-block"><i class="glyphicon glyphicon-chevron-left"></i></button> |
|
||||||
<button type="button" id="left_All_1" class="btn btn-block"><i class="glyphicon glyphicon-backward"></i></button> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="col-xs-5"> |
|
||||||
<select name="to[]" id="multiselect_to_1" 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(); |
|
||||||
|
|
||||||
$('.multiselect').multiselect(); |
|
||||||
}); |
|
||||||
</script> |
|
||||||
</body> |
|
||||||
</html> |
|
||||||
@ -1,163 +0,0 @@ |
|||||||
<!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="with-javascript-options">With <code>javascript</code> options</h4> |
|
||||||
|
|
||||||
<div class="row"> |
|
||||||
<div class="col-xs-5"> |
|
||||||
<select name="from[]" class="js-multiselect 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="js_right_All_1" class="btn btn-block"><i class="glyphicon glyphicon-forward"></i></button> |
|
||||||
<button type="button" id="js_right_Selected_1" class="btn btn-block"><i class="glyphicon glyphicon-chevron-right"></i></button> |
|
||||||
<button type="button" id="js_left_Selected_1" class="btn btn-block"><i class="glyphicon glyphicon-chevron-left"></i></button> |
|
||||||
<button type="button" id="js_left_All_1" class="btn btn-block"><i class="glyphicon glyphicon-backward"></i></button> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="col-xs-5"> |
|
||||||
<select name="to[]" id="js_multiselect_to_1" 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[]" class="js-multiselect 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="js_right_All_1" class="btn btn-block"><i class="glyphicon glyphicon-forward"></i></button> |
|
||||||
<button type="button" id="js_right_Selected_1" class="btn btn-block"><i class="glyphicon glyphicon-chevron-right"></i></button> |
|
||||||
<button type="button" id="js_left_Selected_1" class="btn btn-block"><i class="glyphicon glyphicon-chevron-left"></i></button> |
|
||||||
<button type="button" id="js_left_All_1" class="btn btn-block"><i class="glyphicon glyphicon-backward"></i></button> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="col-xs-5"> |
|
||||||
<select name="to[]" id="js_multiselect_to_1" 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($) { |
|
||||||
$('.js-multiselect').multiselect({ |
|
||||||
right: '#js_multiselect_to_1', |
|
||||||
rightAll: '#js_right_All_1', |
|
||||||
rightSelected: '#js_right_Selected_1', |
|
||||||
leftSelected: '#js_left_Selected_1', |
|
||||||
leftAll: '#js_left_All_1' |
|
||||||
}); |
|
||||||
}); |
|
||||||
</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(); |
|
||||||
|
|
||||||
$('.js-multiselect').multiselect({ |
|
||||||
right: '#js_multiselect_to_1', |
|
||||||
rightAll: '#js_right_All_1', |
|
||||||
rightSelected: '#js_right_Selected_1', |
|
||||||
leftSelected: '#js_left_Selected_1', |
|
||||||
leftAll: '#js_left_All_1' |
|
||||||
}); |
|
||||||
}); |
|
||||||
</script> |
|
||||||
</body> |
|
||||||
</html> |
|
||||||
@ -1,155 +0,0 @@ |
|||||||
<!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-keep-rendering-sort">Keep rendering sort</h4> |
|
||||||
|
|
||||||
<div class="row"> |
|
||||||
<div class="col-xs-5"> |
|
||||||
<select name="from[]" id="keepRenderingSort" class="form-control" size="8" multiple="multiple"> |
|
||||||
<option value="1" data-position="1">Item 1</option> |
|
||||||
<option value="2" data-position="2">Item 5</option> |
|
||||||
<option value="2" data-position="3">Item 2</option> |
|
||||||
<option value="2" data-position="4">Item 4</option> |
|
||||||
<option value="3" data-position="5">Item 3</option> |
|
||||||
</select> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="col-xs-2"> |
|
||||||
<button type="button" id="keepRenderingSort_rightAll" class="btn btn-block"><i class="glyphicon glyphicon-forward"></i></button> |
|
||||||
<button type="button" id="keepRenderingSort_rightSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-right"></i></button> |
|
||||||
<button type="button" id="keepRenderingSort_leftSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-left"></i></button> |
|
||||||
<button type="button" id="keepRenderingSort_leftAll" class="btn btn-block"><i class="glyphicon glyphicon-backward"></i></button> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="col-xs-5"> |
|
||||||
<select name="to[]" id="keepRenderingSort_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="keepRenderingSort" 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="keepRenderingSort_rightAll" class="btn btn-block"><i class="glyphicon glyphicon-forward"></i></button> |
|
||||||
<button type="button" id="keepRenderingSort_rightSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-right"></i></button> |
|
||||||
<button type="button" id="keepRenderingSort_leftSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-left"></i></button> |
|
||||||
<button type="button" id="keepRenderingSort_leftAll" class="btn btn-block"><i class="glyphicon glyphicon-backward"></i></button> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="col-xs-5"> |
|
||||||
<select name="to[]" id="keepRenderingSort_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($) { |
|
||||||
$('#keepRenderingSort').multiselect({ |
|
||||||
keepRenderingSort: true |
|
||||||
}); |
|
||||||
}); |
|
||||||
</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(); |
|
||||||
|
|
||||||
$('#keepRenderingSort').multiselect({ |
|
||||||
keepRenderingSort: true |
|
||||||
}); |
|
||||||
}); |
|
||||||
</script> |
|
||||||
</body> |
|
||||||
</html> |
|
||||||
@ -1,169 +0,0 @@ |
|||||||
<!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">With move up/down buttons</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 2</option> |
|
||||||
<option value="3">Item 3</option> |
|
||||||
<option value="4">Item 4</option> |
|
||||||
<option value="5">Item 5</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 class="row"> |
|
||||||
<div class="col-sm-6"> |
|
||||||
<button type="button" id="multiselect_move_up" class="btn btn-block"><i class="glyphicon glyphicon-arrow-up"></i></button> |
|
||||||
</div> |
|
||||||
<div class="col-sm-6"> |
|
||||||
<button type="button" id="multiselect_move_down" class="btn btn-block col-sm-6"><i class="glyphicon glyphicon-arrow-down"></i></button> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="row"> |
|
||||||
<div class="col-xs-12"> |
|
||||||
<h5>HTML</h5> |
|
||||||
<pre class="prettyprint linenums"> |
|
||||||
<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 2</option> |
|
||||||
<option value="3">Item 3</option> |
|
||||||
<option value="4">Item 4</option> |
|
||||||
<option value="5">Item 5</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 class="row"> |
|
||||||
<div class="col-sm-6"> |
|
||||||
<button type="button" id="multiselect_move_up" class="btn btn-block"><i class="glyphicon glyphicon-arrow-up"></i></button> |
|
||||||
</div> |
|
||||||
<div class="col-sm-6"> |
|
||||||
<button type="button" id="multiselect_move_down" class="btn btn-block col-sm-6"><i class="glyphicon glyphicon-arrow-down"></i></button> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</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(); |
|
||||||
|
|
||||||
$('#multiselect').multiselect(); |
|
||||||
}); |
|
||||||
</script> |
|
||||||
</body> |
|
||||||
</html> |
|
||||||
@ -1,355 +0,0 @@ |
|||||||
<!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-multiple-destinations">Multiple destinations</h4> |
|
||||||
|
|
||||||
<div class="row"> |
|
||||||
<div class="col-xs-5"> |
|
||||||
<select name="from[]" id="multi_d" class="form-control" size="26" multiple="multiple"> |
|
||||||
<option value="1">C++</option> |
|
||||||
<option value="2">C#</option> |
|
||||||
<option value="3">Haskell</option> |
|
||||||
<option value="4">Java</option> |
|
||||||
<option value="5">JavaScript</option> |
|
||||||
<option value="6">Lisp</option> |
|
||||||
<option value="7">Lua</option> |
|
||||||
<option value="8">MATLAB</option> |
|
||||||
<option value="9">NewLISP</option> |
|
||||||
<option value="10">PHP</option> |
|
||||||
<option value="11">Perl</option> |
|
||||||
<option value="12">SQL</option> |
|
||||||
<option value="13">Unix shell</option> |
|
||||||
</select> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="col-xs-2"> |
|
||||||
<button type="button" id="multi_d_rightAll" class="btn btn-default btn-block" style="margin-top: 20px;"><i class="glyphicon glyphicon-forward"></i></button> |
|
||||||
<button type="button" id="multi_d_rightSelected" class="btn btn-default btn-block"><i class="glyphicon glyphicon-chevron-right"></i></button> |
|
||||||
<button type="button" id="multi_d_leftSelected" class="btn btn-default btn-block"><i class="glyphicon glyphicon-chevron-left"></i></button> |
|
||||||
<button type="button" id="multi_d_leftAll" class="btn btn-default btn-block"><i class="glyphicon glyphicon-backward"></i></button> |
|
||||||
|
|
||||||
<hr style="margin: 40px 0 60px;" /> |
|
||||||
|
|
||||||
<button type="button" id="multi_d_rightAll_2" class="btn btn-default btn-block"><i class="glyphicon glyphicon-forward"></i></button> |
|
||||||
<button type="button" id="multi_d_rightSelected_2" class="btn btn-default btn-block"><i class="glyphicon glyphicon-chevron-right"></i></button> |
|
||||||
<button type="button" id="multi_d_leftSelected_2" class="btn btn-default btn-block"><i class="glyphicon glyphicon-chevron-left"></i></button> |
|
||||||
<button type="button" id="multi_d_leftAll_2" class="btn btn-default btn-block"><i class="glyphicon glyphicon-backward"></i></button> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="col-xs-5"> |
|
||||||
<b>Known languages</b> |
|
||||||
<select name="to[]" id="multi_d_to" class="form-control" size="8" multiple="multiple"> |
|
||||||
<option value="1">C++</option> |
|
||||||
<option value="2">C#</option> |
|
||||||
</select> |
|
||||||
|
|
||||||
<br/><hr/><br/> |
|
||||||
|
|
||||||
<b>I want to learn</b> |
|
||||||
<select name="to_2[]" id="multi_d_to_2" class="form-control" size="8" multiple="multiple"> |
|
||||||
<option value="12">SQL</option> |
|
||||||
<option value="13">Unix shell</option> |
|
||||||
</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="multi_d" class="form-control" size="26" multiple="multiple"> |
|
||||||
<option value="1">C++</option> |
|
||||||
<option value="2">C#</option> |
|
||||||
<option value="3">Haskell</option> |
|
||||||
<option value="4">Java</option> |
|
||||||
<option value="5">JavaScript</option> |
|
||||||
<option value="6">Lisp</option> |
|
||||||
<option value="7">Lua</option> |
|
||||||
<option value="8">MATLAB</option> |
|
||||||
<option value="9">NewLISP</option> |
|
||||||
<option value="10">PHP</option> |
|
||||||
<option value="11">Perl</option> |
|
||||||
<option value="12">SQL</option> |
|
||||||
<option value="13">Unix shell</option> |
|
||||||
</select> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="col-xs-2"> |
|
||||||
<button type="button" id="multi_d_rightAll" class="btn btn-default btn-block" style="margin-top: 20px;"><i class="glyphicon glyphicon-forward"></i></button> |
|
||||||
<button type="button" id="multi_d_rightSelected" class="btn btn-default btn-block"><i class="glyphicon glyphicon-chevron-right"></i></button> |
|
||||||
<button type="button" id="multi_d_leftSelected" class="btn btn-default btn-block"><i class="glyphicon glyphicon-chevron-left"></i></button> |
|
||||||
<button type="button" id="multi_d_leftAll" class="btn btn-default btn-block"><i class="glyphicon glyphicon-backward"></i></button> |
|
||||||
|
|
||||||
<hr style="margin: 40px 0 60px;" /> |
|
||||||
|
|
||||||
<button type="button" id="multi_d_rightAll_2" class="btn btn-default btn-block"><i class="glyphicon glyphicon-forward"></i></button> |
|
||||||
<button type="button" id="multi_d_rightSelected_2" class="btn btn-default btn-block"><i class="glyphicon glyphicon-chevron-right"></i></button> |
|
||||||
<button type="button" id="multi_d_leftSelected_2" class="btn btn-default btn-block"><i class="glyphicon glyphicon-chevron-left"></i></button> |
|
||||||
<button type="button" id="multi_d_leftAll_2" class="btn btn-default btn-block"><i class="glyphicon glyphicon-backward"></i></button> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="col-xs-5"> |
|
||||||
<b>Known languages</b> |
|
||||||
<select name="to[]" id="multi_d_to" class="form-control" size="8" multiple="multiple"></select> |
|
||||||
|
|
||||||
<br/><hr/><br/> |
|
||||||
|
|
||||||
<b>I want to learn</b> |
|
||||||
<select name="to_2[]" id="multi_d_to_2" 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($) { |
|
||||||
$('#multi_d').multiselect({ |
|
||||||
right: '#multi_d_to, #multi_d_to_2', |
|
||||||
rightSelected: '#multi_d_rightSelected, #multi_d_rightSelected_2', |
|
||||||
leftSelected: '#multi_d_leftSelected, #multi_d_leftSelected_2', |
|
||||||
rightAll: '#multi_d_rightAll, #multi_d_rightAll_2', |
|
||||||
leftAll: '#multi_d_leftAll, #multi_d_leftAll_2', |
|
||||||
|
|
||||||
search: { |
|
||||||
left: '<input type="text" name="q" class="form-control" placeholder="Search..." />' |
|
||||||
}, |
|
||||||
|
|
||||||
moveToRight: function(Multiselect, $options, event, silent, skipStack) { |
|
||||||
var button = $(event.currentTarget).attr('id'); |
|
||||||
|
|
||||||
if (button == 'multi_d_rightSelected') { |
|
||||||
var $left_options = Multiselect.$left.find('> option:selected'); |
|
||||||
Multiselect.$right.eq(0).append($left_options); |
|
||||||
|
|
||||||
if ( typeof Multiselect.callbacks.sort == 'function' && !silent ) { |
|
||||||
Multiselect.$right.eq(0).find('> option').sort(Multiselect.callbacks.sort).appendTo(Multiselect.$right.eq(0)); |
|
||||||
} |
|
||||||
} else if (button == 'multi_d_rightAll') { |
|
||||||
var $left_options = Multiselect.$left.children(':visible'); |
|
||||||
Multiselect.$right.eq(0).append($left_options); |
|
||||||
|
|
||||||
if ( typeof Multiselect.callbacks.sort == 'function' && !silent ) { |
|
||||||
Multiselect.$right.eq(0).find('> option').sort(Multiselect.callbacks.sort).appendTo(Multiselect.$right.eq(0)); |
|
||||||
} |
|
||||||
} else if (button == 'multi_d_rightSelected_2') { |
|
||||||
var $left_options = Multiselect.$left.find('> option:selected'); |
|
||||||
Multiselect.$right.eq(1).append($left_options); |
|
||||||
|
|
||||||
if ( typeof Multiselect.callbacks.sort == 'function' && !silent ) { |
|
||||||
Multiselect.$right.eq(1).find('> option').sort(Multiselect.callbacks.sort).appendTo(Multiselect.$right.eq(1)); |
|
||||||
} |
|
||||||
} else if (button == 'multi_d_rightAll_2') { |
|
||||||
var $left_options = Multiselect.$left.children(':visible'); |
|
||||||
Multiselect.$right.eq(1).append($left_options); |
|
||||||
|
|
||||||
if ( typeof Multiselect.callbacks.sort == 'function' && !silent ) { |
|
||||||
Multiselect.$right.eq(1).eq(1).find('> option').sort(Multiselect.callbacks.sort).appendTo(Multiselect.$right.eq(1)); |
|
||||||
} |
|
||||||
} |
|
||||||
}, |
|
||||||
|
|
||||||
moveToLeft: function(Multiselect, $options, event, silent, skipStack) { |
|
||||||
var button = $(event.currentTarget).attr('id'); |
|
||||||
|
|
||||||
if (button == 'multi_d_leftSelected') { |
|
||||||
var $right_options = Multiselect.$right.eq(0).find('> option:selected'); |
|
||||||
Multiselect.$left.append($right_options); |
|
||||||
|
|
||||||
if ( typeof Multiselect.callbacks.sort == 'function' && !silent ) { |
|
||||||
Multiselect.$left.find('> option').sort(Multiselect.callbacks.sort).appendTo(Multiselect.$left); |
|
||||||
} |
|
||||||
} else if (button == 'multi_d_leftAll') { |
|
||||||
var $right_options = Multiselect.$right.eq(0).children(':visible'); |
|
||||||
Multiselect.$left.append($right_options); |
|
||||||
|
|
||||||
if ( typeof Multiselect.callbacks.sort == 'function' && !silent ) { |
|
||||||
Multiselect.$left.find('> option').sort(Multiselect.callbacks.sort).appendTo(Multiselect.$left); |
|
||||||
} |
|
||||||
} else if (button == 'multi_d_leftSelected_2') { |
|
||||||
var $right_options = Multiselect.$right.eq(1).find('> option:selected'); |
|
||||||
Multiselect.$left.append($right_options); |
|
||||||
|
|
||||||
if ( typeof Multiselect.callbacks.sort == 'function' && !silent ) { |
|
||||||
Multiselect.$left.find('> option').sort(Multiselect.callbacks.sort).appendTo(Multiselect.$left); |
|
||||||
} |
|
||||||
} else if (button == 'multi_d_leftAll_2') { |
|
||||||
var $right_options = Multiselect.$right.eq(1).children(':visible'); |
|
||||||
Multiselect.$left.append($right_options); |
|
||||||
|
|
||||||
if ( typeof Multiselect.callbacks.sort == 'function' && !silent ) { |
|
||||||
Multiselect.$left.find('> option').sort(Multiselect.callbacks.sort).appendTo(Multiselect.$left); |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
}); |
|
||||||
}); |
|
||||||
</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(); |
|
||||||
|
|
||||||
$('#multi_d').multiselect({ |
|
||||||
right: '#multi_d_to, #multi_d_to_2', |
|
||||||
rightSelected: '#multi_d_rightSelected, #multi_d_rightSelected_2', |
|
||||||
leftSelected: '#multi_d_leftSelected, #multi_d_leftSelected_2', |
|
||||||
rightAll: '#multi_d_rightAll, #multi_d_rightAll_2', |
|
||||||
leftAll: '#multi_d_leftAll, #multi_d_leftAll_2', |
|
||||||
|
|
||||||
search: { |
|
||||||
left: '<input type="text" name="q" class="form-control" placeholder="Search..." />' |
|
||||||
}, |
|
||||||
|
|
||||||
moveToRight: function(Multiselect, $options, event, silent, skipStack) { |
|
||||||
var button = $(event.currentTarget).attr('id'); |
|
||||||
|
|
||||||
if (button == 'multi_d_rightSelected') { |
|
||||||
var $left_options = Multiselect.$left.find('> option:selected'); |
|
||||||
Multiselect.$right.eq(0).append($left_options); |
|
||||||
|
|
||||||
if ( typeof Multiselect.callbacks.sort == 'function' && !silent ) { |
|
||||||
Multiselect.$right.eq(0).find('> option').sort(Multiselect.callbacks.sort).appendTo(Multiselect.$right.eq(0)); |
|
||||||
} |
|
||||||
} else if (button == 'multi_d_rightAll') { |
|
||||||
var $left_options = Multiselect.$left.children(':visible'); |
|
||||||
Multiselect.$right.eq(0).append($left_options); |
|
||||||
|
|
||||||
if ( typeof Multiselect.callbacks.sort == 'function' && !silent ) { |
|
||||||
Multiselect.$right.eq(0).find('> option').sort(Multiselect.callbacks.sort).appendTo(Multiselect.$right.eq(0)); |
|
||||||
} |
|
||||||
} else if (button == 'multi_d_rightSelected_2') { |
|
||||||
var $left_options = Multiselect.$left.find('> option:selected'); |
|
||||||
Multiselect.$right.eq(1).append($left_options); |
|
||||||
|
|
||||||
if ( typeof Multiselect.callbacks.sort == 'function' && !silent ) { |
|
||||||
Multiselect.$right.eq(1).find('> option').sort(Multiselect.callbacks.sort).appendTo(Multiselect.$right.eq(1)); |
|
||||||
} |
|
||||||
} else if (button == 'multi_d_rightAll_2') { |
|
||||||
var $left_options = Multiselect.$left.children(':visible'); |
|
||||||
Multiselect.$right.eq(1).append($left_options); |
|
||||||
|
|
||||||
if ( typeof Multiselect.callbacks.sort == 'function' && !silent ) { |
|
||||||
Multiselect.$right.eq(1).eq(1).find('> option').sort(Multiselect.callbacks.sort).appendTo(Multiselect.$right.eq(1)); |
|
||||||
} |
|
||||||
} |
|
||||||
}, |
|
||||||
|
|
||||||
moveToLeft: function(Multiselect, $options, event, silent, skipStack) { |
|
||||||
var button = $(event.currentTarget).attr('id'); |
|
||||||
|
|
||||||
if (button == 'multi_d_leftSelected') { |
|
||||||
var $right_options = Multiselect.$right.eq(0).find('> option:selected'); |
|
||||||
Multiselect.$left.append($right_options); |
|
||||||
|
|
||||||
if ( typeof Multiselect.callbacks.sort == 'function' && !silent ) { |
|
||||||
Multiselect.$left.find('> option').sort(Multiselect.callbacks.sort).appendTo(Multiselect.$left); |
|
||||||
} |
|
||||||
} else if (button == 'multi_d_leftAll') { |
|
||||||
var $right_options = Multiselect.$right.eq(0).children(':visible'); |
|
||||||
Multiselect.$left.append($right_options); |
|
||||||
|
|
||||||
if ( typeof Multiselect.callbacks.sort == 'function' && !silent ) { |
|
||||||
Multiselect.$left.find('> option').sort(Multiselect.callbacks.sort).appendTo(Multiselect.$left); |
|
||||||
} |
|
||||||
} else if (button == 'multi_d_leftSelected_2') { |
|
||||||
var $right_options = Multiselect.$right.eq(1).find('> option:selected'); |
|
||||||
Multiselect.$left.append($right_options); |
|
||||||
|
|
||||||
if ( typeof Multiselect.callbacks.sort == 'function' && !silent ) { |
|
||||||
Multiselect.$left.find('> option').sort(Multiselect.callbacks.sort).appendTo(Multiselect.$left); |
|
||||||
} |
|
||||||
} else if (button == 'multi_d_leftAll_2') { |
|
||||||
var $right_options = Multiselect.$right.eq(1).children(':visible'); |
|
||||||
Multiselect.$left.append($right_options); |
|
||||||
|
|
||||||
if ( typeof Multiselect.callbacks.sort == 'function' && !silent ) { |
|
||||||
Multiselect.$left.find('> option').sort(Multiselect.callbacks.sort).appendTo(Multiselect.$left); |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
}); |
|
||||||
}); |
|
||||||
</script> |
|
||||||
</body> |
|
||||||
</html> |
|
||||||
@ -1,224 +0,0 @@ |
|||||||
<!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-multiple">First multiselect</h4> |
|
||||||
|
|
||||||
<div class="row"> |
|
||||||
<div class="col-sm-5"> |
|
||||||
<select name="from[]" id="multiselect1" class="form-control" size="8" multiple="multiple"> |
|
||||||
<option value="1" data-position="1">Item 1</option> |
|
||||||
<option value="2" data-position="2">Item 5</option> |
|
||||||
<option value="2" data-position="3">Item 2</option> |
|
||||||
<option value="2" data-position="4">Item 4</option> |
|
||||||
<option value="3" data-position="5">Item 3</option> |
|
||||||
</select> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="col-sm-2"> |
|
||||||
<button type="button" id="multiselect1_rightAll" class="btn btn-block"><i class="glyphicon glyphicon-forward"></i></button> |
|
||||||
<button type="button" id="multiselect1_rightSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-right"></i></button> |
|
||||||
<button type="button" id="multiselect1_leftSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-left"></i></button> |
|
||||||
<button type="button" id="multiselect1_leftAll" class="btn btn-block"><i class="glyphicon glyphicon-backward"></i></button> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="col-sm-5"> |
|
||||||
<select name="to[]" id="multiselect1_to" class="form-control" size="8" multiple="multiple"></select> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
|
|
||||||
<h4>Second multiselect</h4> |
|
||||||
|
|
||||||
<div class="row"> |
|
||||||
<div class="col-sm-5"> |
|
||||||
<select name="from[]" id="multiselect2" class="form-control" size="8" multiple="multiple"> |
|
||||||
<option value="1" data-position="1">Item 1</option> |
|
||||||
<option value="2" data-position="2">Item 5</option> |
|
||||||
<option value="2" data-position="3">Item 2</option> |
|
||||||
<option value="2" data-position="4">Item 4</option> |
|
||||||
<option value="3" data-position="5">Item 3</option> |
|
||||||
</select> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="col-sm-2"> |
|
||||||
<button type="button" id="multiselect2_rightAll" class="btn btn-block"><i class="glyphicon glyphicon-forward"></i></button> |
|
||||||
<button type="button" id="multiselect2_rightSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-right"></i></button> |
|
||||||
<button type="button" id="multiselect2_leftSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-left"></i></button> |
|
||||||
<button type="button" id="multiselect2_leftAll" class="btn btn-block"><i class="glyphicon glyphicon-backward"></i></button> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="col-sm-5"> |
|
||||||
<select name="to[]" id="multiselect2_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"> |
|
||||||
<h4>First multiselect</h4> |
|
||||||
|
|
||||||
<div class="row"> |
|
||||||
<div class="col-xs-5"> |
|
||||||
<select name="from[]" id="multiselect1" 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="multiselect1_rightAll" class="btn btn-block"><i class="glyphicon glyphicon-forward"></i></button> |
|
||||||
<button type="button" id="multiselect1_rightSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-right"></i></button> |
|
||||||
<button type="button" id="multiselect1_leftSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-left"></i></button> |
|
||||||
<button type="button" id="multiselect1_leftAll" class="btn btn-block"><i class="glyphicon glyphicon-backward"></i></button> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="col-xs-5"> |
|
||||||
<select name="to[]" id="multiselect1_to" class="form-control" size="8" multiple="multiple"></select> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
|
|
||||||
<h4>Second multiselect</h4> |
|
||||||
|
|
||||||
<div class="row"> |
|
||||||
<div class="col-xs-5"> |
|
||||||
<select name="from[]" id="multiselect2" 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="multiselect2_rightAll" class="btn btn-block"><i class="glyphicon glyphicon-forward"></i></button> |
|
||||||
<button type="button" id="multiselect2_rightSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-right"></i></button> |
|
||||||
<button type="button" id="multiselect2_leftSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-left"></i></button> |
|
||||||
<button type="button" id="multiselect2_leftAll" class="btn btn-block"><i class="glyphicon glyphicon-backward"></i></button> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="col-xs-5"> |
|
||||||
<select name="to[]" id="multiselect2_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($) { |
|
||||||
$('#multiselect1').multiselect(); |
|
||||||
$('#multiselect2').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.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); |
|
||||||
}); |
|
||||||
} |
|
||||||
|
|
||||||
$('#multiselect1').multiselect(); |
|
||||||
$('#multiselect2').multiselect(); |
|
||||||
}); |
|
||||||
</script> |
|
||||||
</body> |
|
||||||
</html> |
|
||||||
@ -1,174 +0,0 @@ |
|||||||
<!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-optgroup">With optgroup</h4> |
|
||||||
|
|
||||||
<div class="row"> |
|
||||||
<div class="col-sm-5"> |
|
||||||
<select name="from" id="optgroup" class="form-control" size="8" multiple="multiple"> |
|
||||||
<optgroup label="Swedish Cars"> |
|
||||||
<option value="volvo">Volvo</option> |
|
||||||
<option value="saab">Saab</option> |
|
||||||
</optgroup> |
|
||||||
<optgroup label="German Cars"> |
|
||||||
<option value="mercedes">Mercedes</option> |
|
||||||
<option value="audi">Audi</option> |
|
||||||
</optgroup> |
|
||||||
<option value="1">C++</option> |
|
||||||
</select> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="col-sm-2"> |
|
||||||
<button type="button" id="optgroup_rightAll" class="btn btn-block"><i class="glyphicon glyphicon-forward"></i></button> |
|
||||||
<button type="button" id="optgroup_rightSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-right"></i></button> |
|
||||||
<button type="button" id="optgroup_leftSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-left"></i></button> |
|
||||||
<button type="button" id="optgroup_leftAll" class="btn btn-block"><i class="glyphicon glyphicon-backward"></i></button> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="col-sm-5"> |
|
||||||
<select name="to" id="optgroup_to" class="form-control" size="8" multiple="multiple"> |
|
||||||
<optgroup label="Swedish Cars"> |
|
||||||
<option value="volvo">Volvo</option> |
|
||||||
</optgroup> |
|
||||||
<option value="1">C++</option> |
|
||||||
</select> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="row"> |
|
||||||
<div class="col-xs-12"> |
|
||||||
<h5>HTML</h5> |
|
||||||
<pre class="prettyprint linenums"> |
|
||||||
<div class="row"> |
|
||||||
<div class="col-sm-5"> |
|
||||||
<select name="from" id="optgroup" class="form-control" size="8" multiple="multiple"> |
|
||||||
<optgroup label="Swedish Cars"> |
|
||||||
<option value="volvo">Volvo</option> |
|
||||||
<option value="saab">Saab</option> |
|
||||||
</optgroup> |
|
||||||
<optgroup label="German Cars"> |
|
||||||
<option value="mercedes">Mercedes</option> |
|
||||||
<option value="audi">Audi</option> |
|
||||||
</optgroup> |
|
||||||
<option value="1">C++</option> |
|
||||||
</select> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="col-sm-2"> |
|
||||||
<button type="button" id="optgroup_rightAll" class="btn btn-block"><i class="glyphicon glyphicon-forward"></i></button> |
|
||||||
<button type="button" id="optgroup_rightSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-right"></i></button> |
|
||||||
<button type="button" id="optgroup_leftSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-left"></i></button> |
|
||||||
<button type="button" id="optgroup_leftAll" class="btn btn-block"><i class="glyphicon glyphicon-backward"></i></button> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="col-sm-5"> |
|
||||||
<select name="to" id="optgroup_to" class="form-control" size="8" multiple="multiple"> |
|
||||||
<option value="1">C++</option> |
|
||||||
</select> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</pre> |
|
||||||
<h5>JavaScript</h5> |
|
||||||
<pre class="prettyprint linenums"> |
|
||||||
<script type="text/javascript"> |
|
||||||
jQuery(document).ready(function($) { |
|
||||||
$("#optgroup").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(); |
|
||||||
|
|
||||||
$("#optgroup").multiselect({ |
|
||||||
search: { |
|
||||||
left: '<input type="text" name="q" class="form-control" placeholder="Search..." />', |
|
||||||
right: '<input type="text" name="q" class="form-control" placeholder="Search..." />', |
|
||||||
}, |
|
||||||
fireSearch: function(value) { |
|
||||||
return value.length > 3; |
|
||||||
} |
|
||||||
}); |
|
||||||
}); |
|
||||||
</script> |
|
||||||
</body> |
|
||||||
</html> |
|
||||||
@ -1,167 +0,0 @@ |
|||||||
<!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-search">With search</h4> |
|
||||||
|
|
||||||
<div class="row"> |
|
||||||
<div class="col-sm-5"> |
|
||||||
<select name="from[]" id="search" class="form-control" size="8" multiple="multiple"> |
|
||||||
<option value="1" data-position="1">Item 1</option> |
|
||||||
<option value="2" data-position="2">Item 5</option> |
|
||||||
<option value="2" data-position="3">Item 2</option> |
|
||||||
<option value="2" data-position="4">Item 4</option> |
|
||||||
<option value="3" data-position="5">Item 3</option> |
|
||||||
</select> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="col-sm-2"> |
|
||||||
<button type="button" id="search_rightAll" class="btn btn-block"><i class="glyphicon glyphicon-forward"></i></button> |
|
||||||
<button type="button" id="search_rightSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-right"></i></button> |
|
||||||
<button type="button" id="search_leftSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-left"></i></button> |
|
||||||
<button type="button" id="search_leftAll" class="btn btn-block"><i class="glyphicon glyphicon-backward"></i></button> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="col-sm-5"> |
|
||||||
<select name="to[]" id="search_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="search" 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="search_rightAll" class="btn btn-block"><i class="glyphicon glyphicon-forward"></i></button> |
|
||||||
<button type="button" id="search_rightSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-right"></i></button> |
|
||||||
<button type="button" id="search_leftSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-left"></i></button> |
|
||||||
<button type="button" id="search_leftAll" class="btn btn-block"><i class="glyphicon glyphicon-backward"></i></button> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="col-xs-5"> |
|
||||||
<select name="to[]" id="search_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($) { |
|
||||||
$('#search').multiselect({ |
|
||||||
search: { |
|
||||||
left: '<input type="text" name="q" class="form-control" placeholder="Search..." />', |
|
||||||
right: '<input type="text" name="q" class="form-control" placeholder="Search..." />', |
|
||||||
}, |
|
||||||
fireSearch: function(value) { |
|
||||||
return value.length > 3; |
|
||||||
} |
|
||||||
}); |
|
||||||
}); |
|
||||||
</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(); |
|
||||||
|
|
||||||
$('#search').multiselect({ |
|
||||||
search: { |
|
||||||
left: '<input type="text" name="q" class="form-control" placeholder="Search..." />', |
|
||||||
right: '<input type="text" name="q" class="form-control" placeholder="Search..." />', |
|
||||||
}, |
|
||||||
fireSearch: function(value) { |
|
||||||
return value.length > 3; |
|
||||||
} |
|
||||||
}); |
|
||||||
}); |
|
||||||
</script> |
|
||||||
</body> |
|
||||||
</html> |
|
||||||
@ -1,171 +0,0 @@ |
|||||||
<!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-undo-redo">Undo / Redo</h4> |
|
||||||
|
|
||||||
<div class="row"> |
|
||||||
<div class="col-xs-5"> |
|
||||||
<select name="from[]" id="undo_redo" class="form-control" size="13" multiple="multiple"> |
|
||||||
<option value="1">C++</option> |
|
||||||
<option value="2">C#</option> |
|
||||||
<option value="3">Haskell</option> |
|
||||||
<option value="4">Java</option> |
|
||||||
<option value="5">JavaScript</option> |
|
||||||
<option value="6">Lisp</option> |
|
||||||
<option value="7">Lua</option> |
|
||||||
<option value="8">MATLAB</option> |
|
||||||
<option value="9">NewLISP</option> |
|
||||||
<option value="10">PHP</option> |
|
||||||
<option value="11">Perl</option> |
|
||||||
<option value="12">SQL</option> |
|
||||||
<option value="13">Unix shell</option> |
|
||||||
</select> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="col-xs-2"> |
|
||||||
<button type="button" id="undo_redo_undo" class="btn btn-primary btn-block">undo</button> |
|
||||||
<button type="button" id="undo_redo_rightAll" class="btn btn-default btn-block"><i class="glyphicon glyphicon-forward"></i></button> |
|
||||||
<button type="button" id="undo_redo_rightSelected" class="btn btn-default btn-block"><i class="glyphicon glyphicon-chevron-right"></i></button> |
|
||||||
<button type="button" id="undo_redo_leftSelected" class="btn btn-default btn-block"><i class="glyphicon glyphicon-chevron-left"></i></button> |
|
||||||
<button type="button" id="undo_redo_leftAll" class="btn btn-default btn-block"><i class="glyphicon glyphicon-backward"></i></button> |
|
||||||
<button type="button" id="undo_redo_redo" class="btn btn-warning btn-block">redo</button> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="col-xs-5"> |
|
||||||
<select name="to[]" id="undo_redo_to" class="form-control" size="13" 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="undo_redo" class="form-control" size="13" multiple="multiple"> |
|
||||||
<option value="1">C++</option> |
|
||||||
<option value="2">C#</option> |
|
||||||
<option value="3">Haskell</option> |
|
||||||
<option value="4">Java</option> |
|
||||||
<option value="5">JavaScript</option> |
|
||||||
<option value="6">Lisp</option> |
|
||||||
<option value="7">Lua</option> |
|
||||||
<option value="8">MATLAB</option> |
|
||||||
<option value="9">NewLISP</option> |
|
||||||
<option value="10">PHP</option> |
|
||||||
<option value="11">Perl</option> |
|
||||||
<option value="12">SQL</option> |
|
||||||
<option value="13">Unix shell</option> |
|
||||||
</select> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="col-xs-2"> |
|
||||||
<button type="button" id="undo_redo_undo" class="btn btn-primary btn-block">undo</button> |
|
||||||
<button type="button" id="undo_redo_rightAll" class="btn btn-default btn-block"><i class="glyphicon glyphicon-forward"></i></button> |
|
||||||
<button type="button" id="undo_redo_rightSelected" class="btn btn-default btn-block"><i class="glyphicon glyphicon-chevron-right"></i></button> |
|
||||||
<button type="button" id="undo_redo_leftSelected" class="btn btn-default btn-block"><i class="glyphicon glyphicon-chevron-left"></i></button> |
|
||||||
<button type="button" id="undo_redo_leftAll" class="btn btn-default btn-block"><i class="glyphicon glyphicon-backward"></i></button> |
|
||||||
<button type="button" id="undo_redo_redo" class="btn btn-warning btn-block">redo</button> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="col-xs-5"> |
|
||||||
<select name="to[]" id="undo_redo_to" class="form-control" size="13" multiple="multiple"></select> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</pre> |
|
||||||
<h5>JavaScript</h5> |
|
||||||
<pre class="prettyprint linenums"> |
|
||||||
<script type="text/javascript"> |
|
||||||
jQuery(document).ready(function($) { |
|
||||||
$('#undo_redo').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(); |
|
||||||
|
|
||||||
$('#undo_redo').multiselect(); |
|
||||||
}); |
|
||||||
</script> |
|
||||||
</body> |
|
||||||
</html> |
|
||||||
@ -1,170 +0,0 @@ |
|||||||
<!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> |
|
||||||
@ -1,19 +0,0 @@ |
|||||||
var gulp = require('gulp'); |
|
||||||
|
|
||||||
// include plug-ins
|
|
||||||
var rename = require('gulp-rename');
|
|
||||||
var stripDebug = require('gulp-strip-debug'); |
|
||||||
var uglify = require('gulp-uglify'); |
|
||||||
|
|
||||||
// JS concat, strip debugging and minify
|
|
||||||
gulp.task('scripts', function() { |
|
||||||
gulp.src(['dist/js/multiselect.js']) |
|
||||||
.pipe(rename('multiselect.min.js')) |
|
||||||
.pipe(stripDebug()) |
|
||||||
.pipe(uglify('multiselect.min.js', { |
|
||||||
outSourceMap: true |
|
||||||
})) |
|
||||||
.pipe(gulp.dest('dist/js/')); |
|
||||||
}); |
|
||||||
|
|
||||||
gulp.task('default', ['scripts']);
|
|
||||||
@ -1,30 +0,0 @@ |
|||||||
.com { color: #93a1a1; } |
|
||||||
.lit { color: #195f91; } |
|
||||||
.pun, .opn, .clo { color: #93a1a1; } |
|
||||||
.fun { color: #dc322f; } |
|
||||||
.str, .atv { color: #D14; } |
|
||||||
.kwd, .linenums .tag { color: #1e347b; } |
|
||||||
.typ, .atn, .dec, .var { color: teal; } |
|
||||||
.pln { color: #48484c; } |
|
||||||
|
|
||||||
.prettyprint { |
|
||||||
padding: 8px; |
|
||||||
background-color: #f7f7f9; |
|
||||||
border: 1px solid #e1e1e8; |
|
||||||
} |
|
||||||
.prettyprint.linenums { |
|
||||||
-webkit-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0; |
|
||||||
-moz-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0; |
|
||||||
box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0; |
|
||||||
} |
|
||||||
|
|
||||||
/* Specify class=linenums on a pre to get line numbering */ |
|
||||||
ol.linenums { |
|
||||||
margin: 0 0 0 33px; /* IE indents via margin-left */ |
|
||||||
} |
|
||||||
ol.linenums li { |
|
||||||
padding-left: 12px; |
|
||||||
color: #bebec5; |
|
||||||
line-height: 18px; |
|
||||||
text-shadow: 0 1px 0 #fff; |
|
||||||
} |
|
||||||
@ -1,188 +0,0 @@ |
|||||||
jasmine.TrivialReporter = function(doc) { |
|
||||||
this.document = doc || document; |
|
||||||
this.suiteDivs = {}; |
|
||||||
this.logRunningSpecs = false; |
|
||||||
}; |
|
||||||
|
|
||||||
jasmine.TrivialReporter.prototype.createDom = function(type, attrs, childrenVarArgs) { |
|
||||||
var el = document.createElement(type); |
|
||||||
|
|
||||||
for (var i = 2; i < arguments.length; i++) { |
|
||||||
var child = arguments[i]; |
|
||||||
|
|
||||||
if (typeof child === 'string') { |
|
||||||
el.appendChild(document.createTextNode(child)); |
|
||||||
} else { |
|
||||||
if (child) { el.appendChild(child); } |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
for (var attr in attrs) { |
|
||||||
if (attr == "className") { |
|
||||||
el[attr] = attrs[attr]; |
|
||||||
} else { |
|
||||||
el.setAttribute(attr, attrs[attr]); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
return el; |
|
||||||
}; |
|
||||||
|
|
||||||
jasmine.TrivialReporter.prototype.reportRunnerStarting = function(runner) { |
|
||||||
var showPassed, showSkipped; |
|
||||||
|
|
||||||
this.outerDiv = this.createDom('div', { className: 'jasmine_reporter' }, |
|
||||||
this.createDom('div', { className: 'banner' }, |
|
||||||
this.createDom('div', { className: 'logo' }, |
|
||||||
this.createDom('a', { href: 'http://pivotal.github.com/jasmine/', target: "_blank" }, "Jasmine"), |
|
||||||
this.createDom('span', { className: 'version' }, runner.env.versionString())), |
|
||||||
this.createDom('div', { className: 'options' }, |
|
||||||
"Show ", |
|
||||||
showPassed = this.createDom('input', { id: "__jasmine_TrivialReporter_showPassed__", type: 'checkbox' }), |
|
||||||
this.createDom('label', { "for": "__jasmine_TrivialReporter_showPassed__" }, " passed "), |
|
||||||
showSkipped = this.createDom('input', { id: "__jasmine_TrivialReporter_showSkipped__", type: 'checkbox' }), |
|
||||||
this.createDom('label', { "for": "__jasmine_TrivialReporter_showSkipped__" }, " skipped") |
|
||||||
) |
|
||||||
), |
|
||||||
|
|
||||||
this.runnerDiv = this.createDom('div', { className: 'runner running' }, |
|
||||||
this.createDom('a', { className: 'run_spec', href: '?' }, "run all"), |
|
||||||
this.runnerMessageSpan = this.createDom('span', {}, "Running..."), |
|
||||||
this.finishedAtSpan = this.createDom('span', { className: 'finished-at' }, "")) |
|
||||||
); |
|
||||||
|
|
||||||
this.document.body.appendChild(this.outerDiv); |
|
||||||
|
|
||||||
var suites = runner.suites(); |
|
||||||
for (var i = 0; i < suites.length; i++) { |
|
||||||
var suite = suites[i]; |
|
||||||
var suiteDiv = this.createDom('div', { className: 'suite' }, |
|
||||||
this.createDom('a', { className: 'run_spec', href: '?spec=' + encodeURIComponent(suite.getFullName()) }, "run"), |
|
||||||
this.createDom('a', { className: 'description', href: '?spec=' + encodeURIComponent(suite.getFullName()) }, suite.description)); |
|
||||||
this.suiteDivs[suite.id] = suiteDiv; |
|
||||||
var parentDiv = this.outerDiv; |
|
||||||
if (suite.parentSuite) { |
|
||||||
parentDiv = this.suiteDivs[suite.parentSuite.id]; |
|
||||||
} |
|
||||||
parentDiv.appendChild(suiteDiv); |
|
||||||
} |
|
||||||
|
|
||||||
this.startedAt = new Date(); |
|
||||||
|
|
||||||
var self = this; |
|
||||||
showPassed.onclick = function(evt) { |
|
||||||
if (showPassed.checked) { |
|
||||||
self.outerDiv.className += ' show-passed'; |
|
||||||
} else { |
|
||||||
self.outerDiv.className = self.outerDiv.className.replace(/ show-passed/, ''); |
|
||||||
} |
|
||||||
}; |
|
||||||
|
|
||||||
showSkipped.onclick = function(evt) { |
|
||||||
if (showSkipped.checked) { |
|
||||||
self.outerDiv.className += ' show-skipped'; |
|
||||||
} else { |
|
||||||
self.outerDiv.className = self.outerDiv.className.replace(/ show-skipped/, ''); |
|
||||||
} |
|
||||||
}; |
|
||||||
}; |
|
||||||
|
|
||||||
jasmine.TrivialReporter.prototype.reportRunnerResults = function(runner) { |
|
||||||
var results = runner.results(); |
|
||||||
var className = (results.failedCount > 0) ? "runner failed" : "runner passed"; |
|
||||||
this.runnerDiv.setAttribute("class", className); |
|
||||||
//do it twice for IE
|
|
||||||
this.runnerDiv.setAttribute("className", className); |
|
||||||
var specs = runner.specs(); |
|
||||||
var specCount = 0; |
|
||||||
for (var i = 0; i < specs.length; i++) { |
|
||||||
if (this.specFilter(specs[i])) { |
|
||||||
specCount++; |
|
||||||
} |
|
||||||
} |
|
||||||
var message = "" + specCount + " spec" + (specCount == 1 ? "" : "s" ) + ", " + results.failedCount + " failure" + ((results.failedCount == 1) ? "" : "s"); |
|
||||||
message += " in " + ((new Date().getTime() - this.startedAt.getTime()) / 1000) + "s"; |
|
||||||
this.runnerMessageSpan.replaceChild(this.createDom('a', { className: 'description', href: '?'}, message), this.runnerMessageSpan.firstChild); |
|
||||||
|
|
||||||
this.finishedAtSpan.appendChild(document.createTextNode("Finished at " + new Date().toString())); |
|
||||||
}; |
|
||||||
|
|
||||||
jasmine.TrivialReporter.prototype.reportSuiteResults = function(suite) { |
|
||||||
var results = suite.results(); |
|
||||||
var status = results.passed() ? 'passed' : 'failed'; |
|
||||||
if (results.totalCount == 0) { // todo: change this to check results.skipped
|
|
||||||
status = 'skipped'; |
|
||||||
} |
|
||||||
this.suiteDivs[suite.id].className += " " + status; |
|
||||||
}; |
|
||||||
|
|
||||||
jasmine.TrivialReporter.prototype.reportSpecStarting = function(spec) { |
|
||||||
if (this.logRunningSpecs) { |
|
||||||
this.log('>> Jasmine Running ' + spec.suite.description + ' ' + spec.description + '...'); |
|
||||||
} |
|
||||||
}; |
|
||||||
|
|
||||||
jasmine.TrivialReporter.prototype.reportSpecResults = function(spec) { |
|
||||||
var results = spec.results(); |
|
||||||
var status = results.passed() ? 'passed' : 'failed'; |
|
||||||
if (results.skipped) { |
|
||||||
status = 'skipped'; |
|
||||||
} |
|
||||||
var specDiv = this.createDom('div', { className: 'spec ' + status }, |
|
||||||
this.createDom('a', { className: 'run_spec', href: '?spec=' + encodeURIComponent(spec.getFullName()) }, "run"), |
|
||||||
this.createDom('a', { |
|
||||||
className: 'description', |
|
||||||
href: '?spec=' + encodeURIComponent(spec.getFullName()), |
|
||||||
title: spec.getFullName() |
|
||||||
}, spec.description)); |
|
||||||
|
|
||||||
|
|
||||||
var resultItems = results.getItems(); |
|
||||||
var messagesDiv = this.createDom('div', { className: 'messages' }); |
|
||||||
for (var i = 0; i < resultItems.length; i++) { |
|
||||||
var result = resultItems[i]; |
|
||||||
|
|
||||||
if (result.type == 'log') { |
|
||||||
messagesDiv.appendChild(this.createDom('div', {className: 'resultMessage log'}, result.toString())); |
|
||||||
} else if (result.type == 'expect' && result.passed && !result.passed()) { |
|
||||||
messagesDiv.appendChild(this.createDom('div', {className: 'resultMessage fail'}, result.message)); |
|
||||||
|
|
||||||
if (result.trace.stack) { |
|
||||||
messagesDiv.appendChild(this.createDom('div', {className: 'stackTrace'}, result.trace.stack)); |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
if (messagesDiv.childNodes.length > 0) { |
|
||||||
specDiv.appendChild(messagesDiv); |
|
||||||
} |
|
||||||
|
|
||||||
this.suiteDivs[spec.suite.id].appendChild(specDiv); |
|
||||||
}; |
|
||||||
|
|
||||||
jasmine.TrivialReporter.prototype.log = function() { |
|
||||||
var console = jasmine.getGlobal().console; |
|
||||||
if (console && console.log) { |
|
||||||
if (console.log.apply) { |
|
||||||
console.log.apply(console, arguments); |
|
||||||
} else { |
|
||||||
console.log(arguments); // ie fix: console.log.apply doesn't exist on ie
|
|
||||||
} |
|
||||||
} |
|
||||||
}; |
|
||||||
|
|
||||||
jasmine.TrivialReporter.prototype.getLocation = function() { |
|
||||||
return this.document.location; |
|
||||||
}; |
|
||||||
|
|
||||||
jasmine.TrivialReporter.prototype.specFilter = function(spec) { |
|
||||||
var paramMap = {}; |
|
||||||
var params = this.getLocation().search.substring(1).split('&'); |
|
||||||
for (var i = 0; i < params.length; i++) { |
|
||||||
var p = params[i].split('='); |
|
||||||
paramMap[decodeURIComponent(p[0])] = decodeURIComponent(p[1]); |
|
||||||
} |
|
||||||
|
|
||||||
if (!paramMap["spec"]) return true; |
|
||||||
return spec.getFullName().indexOf(paramMap["spec"]) == 0; |
|
||||||
}; |
|
||||||
@ -1,203 +0,0 @@ |
|||||||
var readFixtures = function() { |
|
||||||
return jasmine.getFixtures().proxyCallTo_('read', arguments); |
|
||||||
}; |
|
||||||
|
|
||||||
var loadFixtures = function() { |
|
||||||
jasmine.getFixtures().proxyCallTo_('load', arguments); |
|
||||||
}; |
|
||||||
|
|
||||||
var setFixtures = function(html) { |
|
||||||
jasmine.getFixtures().set(html); |
|
||||||
} |
|
||||||
|
|
||||||
var sandbox = function(attributes) { |
|
||||||
return jasmine.getFixtures().sandbox(attributes); |
|
||||||
}; |
|
||||||
|
|
||||||
jasmine.getFixtures = function() { |
|
||||||
return jasmine.currentFixtures_ = jasmine.currentFixtures_ || new jasmine.Fixtures(); |
|
||||||
}; |
|
||||||
|
|
||||||
jasmine.Fixtures = function() { |
|
||||||
this.containerId = 'jasmine-fixtures'; |
|
||||||
this.fixturesCache_ = {}; |
|
||||||
}; |
|
||||||
|
|
||||||
jasmine.Fixtures.prototype.set = function(html) { |
|
||||||
this.cleanUp(); |
|
||||||
this.createContainer_(html); |
|
||||||
}; |
|
||||||
|
|
||||||
jasmine.Fixtures.prototype.load = function() { |
|
||||||
this.cleanUp(); |
|
||||||
this.createContainer_(this.read.apply(this, arguments)); |
|
||||||
}; |
|
||||||
|
|
||||||
jasmine.Fixtures.prototype.read = function() { |
|
||||||
var htmlChunks = []; |
|
||||||
|
|
||||||
var fixtureUrls = arguments; |
|
||||||
for(var urlCount = fixtureUrls.length, urlIndex = 0; urlIndex < urlCount; urlIndex++) { |
|
||||||
htmlChunks.push(this.getFixtureHtml_(fixtureUrls[urlIndex])); |
|
||||||
} |
|
||||||
|
|
||||||
return htmlChunks.join(''); |
|
||||||
}; |
|
||||||
|
|
||||||
jasmine.Fixtures.prototype.clearCache = function() { |
|
||||||
this.fixturesCache_ = {}; |
|
||||||
}; |
|
||||||
|
|
||||||
jasmine.Fixtures.prototype.cleanUp = function() { |
|
||||||
$('#' + this.containerId).remove(); |
|
||||||
}; |
|
||||||
|
|
||||||
jasmine.Fixtures.prototype.sandbox = function(attributes) { |
|
||||||
var attributesToSet = attributes || {}; |
|
||||||
return $('<div id="sandbox" />').attr(attributesToSet); |
|
||||||
}; |
|
||||||
|
|
||||||
jasmine.Fixtures.prototype.createContainer_ = function(html) { |
|
||||||
var container = $('<div id="' + this.containerId + '" />'); |
|
||||||
container.html(html); |
|
||||||
$('body').append(container); |
|
||||||
}; |
|
||||||
|
|
||||||
jasmine.Fixtures.prototype.getFixtureHtml_ = function(url) {
|
|
||||||
if (typeof this.fixturesCache_[url] == 'undefined') { |
|
||||||
this.loadFixtureIntoCache_(url); |
|
||||||
} |
|
||||||
return this.fixturesCache_[url]; |
|
||||||
}; |
|
||||||
|
|
||||||
jasmine.Fixtures.prototype.loadFixtureIntoCache_ = function(url) { |
|
||||||
var self = this; |
|
||||||
$.ajax({ |
|
||||||
async: false, // must be synchronous to guarantee that no tests are run before fixture is loaded
|
|
||||||
cache: false, |
|
||||||
dataType: 'html', |
|
||||||
url: url, |
|
||||||
success: function(data) { |
|
||||||
self.fixturesCache_[url] = data; |
|
||||||
} |
|
||||||
}); |
|
||||||
}; |
|
||||||
|
|
||||||
jasmine.Fixtures.prototype.proxyCallTo_ = function(methodName, passedArguments) { |
|
||||||
return this[methodName].apply(this, passedArguments); |
|
||||||
}; |
|
||||||
|
|
||||||
|
|
||||||
jasmine.JQuery = function() {}; |
|
||||||
|
|
||||||
jasmine.JQuery.browserTagCaseIndependentHtml = function(html) { |
|
||||||
return $('<div/>').append(html).html(); |
|
||||||
}; |
|
||||||
|
|
||||||
jasmine.JQuery.elementToString = function(element) { |
|
||||||
return $('<div />').append(element.clone()).html(); |
|
||||||
}; |
|
||||||
|
|
||||||
jasmine.JQuery.matchersClass = {}; |
|
||||||
|
|
||||||
|
|
||||||
(function(){ |
|
||||||
var jQueryMatchers = { |
|
||||||
toHaveClass: function(className) { |
|
||||||
return this.actual.hasClass(className); |
|
||||||
}, |
|
||||||
|
|
||||||
toBeVisible: function() { |
|
||||||
return this.actual.is(':visible'); |
|
||||||
}, |
|
||||||
|
|
||||||
toBeHidden: function() { |
|
||||||
return this.actual.is(':hidden'); |
|
||||||
}, |
|
||||||
|
|
||||||
toBeSelected: function() { |
|
||||||
return this.actual.is(':selected'); |
|
||||||
}, |
|
||||||
|
|
||||||
toBeChecked: function() { |
|
||||||
return this.actual.is(':checked'); |
|
||||||
}, |
|
||||||
|
|
||||||
toBeEmpty: function() { |
|
||||||
return this.actual.is(':empty'); |
|
||||||
}, |
|
||||||
|
|
||||||
toExist: function() { |
|
||||||
return this.actual.size() > 0; |
|
||||||
}, |
|
||||||
|
|
||||||
toHaveAttr: function(attributeName, expectedAttributeValue) { |
|
||||||
return hasProperty(this.actual.attr(attributeName), expectedAttributeValue); |
|
||||||
}, |
|
||||||
|
|
||||||
toHaveId: function(id) { |
|
||||||
return this.actual.attr('id') == id; |
|
||||||
}, |
|
||||||
|
|
||||||
toHaveHtml: function(html) { |
|
||||||
return this.actual.html() == jasmine.JQuery.browserTagCaseIndependentHtml(html); |
|
||||||
}, |
|
||||||
|
|
||||||
toHaveText: function(text) { |
|
||||||
return this.actual.text() == text; |
|
||||||
}, |
|
||||||
|
|
||||||
toHaveValue: function(value) { |
|
||||||
return this.actual.val() == value; |
|
||||||
}, |
|
||||||
|
|
||||||
toHaveData: function(key, expectedValue) { |
|
||||||
return hasProperty(this.actual.data(key), expectedValue); |
|
||||||
}, |
|
||||||
|
|
||||||
toBe: function(selector) { |
|
||||||
return this.actual.is(selector); |
|
||||||
}, |
|
||||||
|
|
||||||
toContain: function(selector) { |
|
||||||
return this.actual.find(selector).size() > 0; |
|
||||||
} |
|
||||||
}; |
|
||||||
|
|
||||||
var hasProperty = function(actualValue, expectedValue) { |
|
||||||
if (expectedValue === undefined) { |
|
||||||
return actualValue !== undefined; |
|
||||||
} |
|
||||||
return actualValue == expectedValue; |
|
||||||
}; |
|
||||||
|
|
||||||
var bindMatcher = function(methodName) { |
|
||||||
var builtInMatcher = jasmine.Matchers.prototype[methodName]; |
|
||||||
|
|
||||||
jasmine.JQuery.matchersClass[methodName] = function() { |
|
||||||
if (this.actual instanceof jQuery) { |
|
||||||
var result = jQueryMatchers[methodName].apply(this, arguments); |
|
||||||
this.actual = jasmine.JQuery.elementToString(this.actual); |
|
||||||
return result; |
|
||||||
} |
|
||||||
|
|
||||||
if (builtInMatcher) { |
|
||||||
return builtInMatcher.apply(this, arguments); |
|
||||||
} |
|
||||||
|
|
||||||
return false; |
|
||||||
}; |
|
||||||
}; |
|
||||||
|
|
||||||
for(var methodName in jQueryMatchers) { |
|
||||||
bindMatcher(methodName); |
|
||||||
} |
|
||||||
})(); |
|
||||||
|
|
||||||
beforeEach(function() { |
|
||||||
this.addMatchers(jasmine.JQuery.matchersClass); |
|
||||||
}); |
|
||||||
|
|
||||||
afterEach(function() { |
|
||||||
jasmine.getFixtures().cleanUp(); |
|
||||||
}); |
|
||||||
@ -1,166 +0,0 @@ |
|||||||
body { |
|
||||||
font-family: "Helvetica Neue Light", "Lucida Grande", "Calibri", "Arial", sans-serif; |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
.jasmine_reporter a:visited, .jasmine_reporter a { |
|
||||||
color: #303; |
|
||||||
} |
|
||||||
|
|
||||||
.jasmine_reporter a:hover, .jasmine_reporter a:active { |
|
||||||
color: blue; |
|
||||||
} |
|
||||||
|
|
||||||
.run_spec { |
|
||||||
float:right; |
|
||||||
padding-right: 5px; |
|
||||||
font-size: .8em; |
|
||||||
text-decoration: none; |
|
||||||
} |
|
||||||
|
|
||||||
.jasmine_reporter { |
|
||||||
margin: 0 5px; |
|
||||||
} |
|
||||||
|
|
||||||
.banner { |
|
||||||
color: #303; |
|
||||||
background-color: #fef; |
|
||||||
padding: 5px; |
|
||||||
} |
|
||||||
|
|
||||||
.logo { |
|
||||||
float: left; |
|
||||||
font-size: 1.1em; |
|
||||||
padding-left: 5px; |
|
||||||
} |
|
||||||
|
|
||||||
.logo .version { |
|
||||||
font-size: .6em; |
|
||||||
padding-left: 1em; |
|
||||||
} |
|
||||||
|
|
||||||
.runner.running { |
|
||||||
background-color: yellow; |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
.options { |
|
||||||
text-align: right; |
|
||||||
font-size: .8em; |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.suite { |
|
||||||
border: 1px outset gray; |
|
||||||
margin: 5px 0; |
|
||||||
padding-left: 1em; |
|
||||||
} |
|
||||||
|
|
||||||
.suite .suite { |
|
||||||
margin: 5px; |
|
||||||
} |
|
||||||
|
|
||||||
.suite.passed { |
|
||||||
background-color: #dfd; |
|
||||||
} |
|
||||||
|
|
||||||
.suite.failed { |
|
||||||
background-color: #fdd; |
|
||||||
} |
|
||||||
|
|
||||||
.spec { |
|
||||||
margin: 5px; |
|
||||||
padding-left: 1em; |
|
||||||
clear: both; |
|
||||||
} |
|
||||||
|
|
||||||
.spec.failed, .spec.passed, .spec.skipped { |
|
||||||
padding-bottom: 5px; |
|
||||||
border: 1px solid gray; |
|
||||||
} |
|
||||||
|
|
||||||
.spec.failed { |
|
||||||
background-color: #fbb; |
|
||||||
border-color: red; |
|
||||||
} |
|
||||||
|
|
||||||
.spec.passed { |
|
||||||
background-color: #bfb; |
|
||||||
border-color: green; |
|
||||||
} |
|
||||||
|
|
||||||
.spec.skipped { |
|
||||||
background-color: #bbb; |
|
||||||
} |
|
||||||
|
|
||||||
.messages { |
|
||||||
border-left: 1px dashed gray; |
|
||||||
padding-left: 1em; |
|
||||||
padding-right: 1em; |
|
||||||
} |
|
||||||
|
|
||||||
.passed { |
|
||||||
background-color: #cfc; |
|
||||||
display: none; |
|
||||||
} |
|
||||||
|
|
||||||
.failed { |
|
||||||
background-color: #fbb; |
|
||||||
} |
|
||||||
|
|
||||||
.skipped { |
|
||||||
color: #777; |
|
||||||
background-color: #eee; |
|
||||||
display: none; |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
/*.resultMessage {*/ |
|
||||||
/*white-space: pre;*/ |
|
||||||
/*}*/ |
|
||||||
|
|
||||||
.resultMessage span.result { |
|
||||||
display: block; |
|
||||||
line-height: 2em; |
|
||||||
color: black; |
|
||||||
} |
|
||||||
|
|
||||||
.resultMessage .mismatch { |
|
||||||
color: black; |
|
||||||
} |
|
||||||
|
|
||||||
.stackTrace { |
|
||||||
white-space: pre; |
|
||||||
font-size: .8em; |
|
||||||
margin-left: 10px; |
|
||||||
max-height: 5em; |
|
||||||
overflow: auto; |
|
||||||
border: 1px inset red; |
|
||||||
padding: 1em; |
|
||||||
background: #eef; |
|
||||||
} |
|
||||||
|
|
||||||
.finished-at { |
|
||||||
padding-left: 1em; |
|
||||||
font-size: .6em; |
|
||||||
} |
|
||||||
|
|
||||||
.show-passed .passed, |
|
||||||
.show-skipped .skipped { |
|
||||||
display: block; |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
#jasmine_content { |
|
||||||
position:fixed; |
|
||||||
right: 100%; |
|
||||||
} |
|
||||||
|
|
||||||
.runner { |
|
||||||
border: 1px solid gray; |
|
||||||
display: block; |
|
||||||
margin: 5px 0; |
|
||||||
padding: 2px 0 2px 10px; |
|
||||||
} |
|
||||||
File diff suppressed because it is too large
Load Diff
@ -1,331 +0,0 @@ |
|||||||
/*! |
|
||||||
* jQuery Simulate v@VERSION - simulate browser mouse and keyboard events |
|
||||||
* https://github.com/jquery/jquery-simulate
|
|
||||||
* |
|
||||||
* Copyright jQuery Foundation and other contributors |
|
||||||
* Released under the MIT license. |
|
||||||
* http://jquery.org/license
|
|
||||||
* |
|
||||||
* Date: @DATE |
|
||||||
*/ |
|
||||||
|
|
||||||
;(function( $, undefined ) { |
|
||||||
|
|
||||||
var rkeyEvent = /^key/, |
|
||||||
rmouseEvent = /^(?:mouse|contextmenu)|click/; |
|
||||||
|
|
||||||
$.fn.simulate = function( type, options ) { |
|
||||||
return this.each(function() { |
|
||||||
new $.simulate( this, type, options ); |
|
||||||
}); |
|
||||||
}; |
|
||||||
|
|
||||||
$.simulate = function( elem, type, options ) { |
|
||||||
var method = $.camelCase( "simulate-" + type ); |
|
||||||
|
|
||||||
this.target = elem; |
|
||||||
this.options = options; |
|
||||||
|
|
||||||
if ( this[ method ] ) { |
|
||||||
this[ method ](); |
|
||||||
} else { |
|
||||||
this.simulateEvent( elem, type, options ); |
|
||||||
} |
|
||||||
}; |
|
||||||
|
|
||||||
$.extend( $.simulate, { |
|
||||||
|
|
||||||
keyCode: { |
|
||||||
BACKSPACE: 8, |
|
||||||
COMMA: 188, |
|
||||||
DELETE: 46, |
|
||||||
DOWN: 40, |
|
||||||
END: 35, |
|
||||||
ENTER: 13, |
|
||||||
ESCAPE: 27, |
|
||||||
HOME: 36, |
|
||||||
LEFT: 37, |
|
||||||
NUMPAD_ADD: 107, |
|
||||||
NUMPAD_DECIMAL: 110, |
|
||||||
NUMPAD_DIVIDE: 111, |
|
||||||
NUMPAD_ENTER: 108, |
|
||||||
NUMPAD_MULTIPLY: 106, |
|
||||||
NUMPAD_SUBTRACT: 109, |
|
||||||
PAGE_DOWN: 34, |
|
||||||
PAGE_UP: 33, |
|
||||||
PERIOD: 190, |
|
||||||
RIGHT: 39, |
|
||||||
SPACE: 32, |
|
||||||
TAB: 9, |
|
||||||
UP: 38 |
|
||||||
}, |
|
||||||
|
|
||||||
buttonCode: { |
|
||||||
LEFT: 0, |
|
||||||
MIDDLE: 1, |
|
||||||
RIGHT: 2 |
|
||||||
} |
|
||||||
}); |
|
||||||
|
|
||||||
$.extend( $.simulate.prototype, { |
|
||||||
|
|
||||||
simulateEvent: function( elem, type, options ) { |
|
||||||
var event = this.createEvent( type, options ); |
|
||||||
this.dispatchEvent( elem, type, event, options ); |
|
||||||
}, |
|
||||||
|
|
||||||
createEvent: function( type, options ) { |
|
||||||
if ( rkeyEvent.test( type ) ) { |
|
||||||
return this.keyEvent( type, options ); |
|
||||||
} |
|
||||||
|
|
||||||
if ( rmouseEvent.test( type ) ) { |
|
||||||
return this.mouseEvent( type, options ); |
|
||||||
} |
|
||||||
}, |
|
||||||
|
|
||||||
mouseEvent: function( type, options ) { |
|
||||||
var event, eventDoc, doc, body; |
|
||||||
options = $.extend({ |
|
||||||
bubbles: true, |
|
||||||
cancelable: (type !== "mousemove"), |
|
||||||
view: window, |
|
||||||
detail: 0, |
|
||||||
screenX: 0, |
|
||||||
screenY: 0, |
|
||||||
clientX: 1, |
|
||||||
clientY: 1, |
|
||||||
ctrlKey: false, |
|
||||||
altKey: false, |
|
||||||
shiftKey: false, |
|
||||||
metaKey: false, |
|
||||||
button: 0, |
|
||||||
relatedTarget: undefined |
|
||||||
}, options ); |
|
||||||
|
|
||||||
if ( document.createEvent ) { |
|
||||||
event = document.createEvent( "MouseEvents" ); |
|
||||||
event.initMouseEvent( type, options.bubbles, options.cancelable, |
|
||||||
options.view, options.detail, |
|
||||||
options.screenX, options.screenY, options.clientX, options.clientY, |
|
||||||
options.ctrlKey, options.altKey, options.shiftKey, options.metaKey, |
|
||||||
options.button, options.relatedTarget || document.body.parentNode ); |
|
||||||
|
|
||||||
// IE 9+ creates events with pageX and pageY set to 0.
|
|
||||||
// Trying to modify the properties throws an error,
|
|
||||||
// so we define getters to return the correct values.
|
|
||||||
if ( event.pageX === 0 && event.pageY === 0 && Object.defineProperty ) { |
|
||||||
eventDoc = event.relatedTarget.ownerDocument || document; |
|
||||||
doc = eventDoc.documentElement; |
|
||||||
body = eventDoc.body; |
|
||||||
|
|
||||||
Object.defineProperty( event, "pageX", { |
|
||||||
get: function() { |
|
||||||
return options.clientX + |
|
||||||
( doc && doc.scrollLeft || body && body.scrollLeft || 0 ) - |
|
||||||
( doc && doc.clientLeft || body && body.clientLeft || 0 ); |
|
||||||
} |
|
||||||
}); |
|
||||||
Object.defineProperty( event, "pageY", { |
|
||||||
get: function() { |
|
||||||
return options.clientY + |
|
||||||
( doc && doc.scrollTop || body && body.scrollTop || 0 ) - |
|
||||||
( doc && doc.clientTop || body && body.clientTop || 0 ); |
|
||||||
} |
|
||||||
}); |
|
||||||
} |
|
||||||
} else if ( document.createEventObject ) { |
|
||||||
event = document.createEventObject(); |
|
||||||
$.extend( event, options ); |
|
||||||
// standards event.button uses constants defined here: http://msdn.microsoft.com/en-us/library/ie/ff974877(v=vs.85).aspx
|
|
||||||
// old IE event.button uses constants defined here: http://msdn.microsoft.com/en-us/library/ie/ms533544(v=vs.85).aspx
|
|
||||||
// so we actually need to map the standard back to oldIE
|
|
||||||
event.button = { |
|
||||||
0: 1, |
|
||||||
1: 4, |
|
||||||
2: 2 |
|
||||||
}[ event.button ] || ( event.button === -1 ? 0 : event.button ); |
|
||||||
} |
|
||||||
|
|
||||||
return event; |
|
||||||
}, |
|
||||||
|
|
||||||
keyEvent: function( type, options ) { |
|
||||||
var event; |
|
||||||
options = $.extend({ |
|
||||||
bubbles: true, |
|
||||||
cancelable: true, |
|
||||||
view: window, |
|
||||||
ctrlKey: false, |
|
||||||
altKey: false, |
|
||||||
shiftKey: false, |
|
||||||
metaKey: false, |
|
||||||
keyCode: 0, |
|
||||||
charCode: undefined |
|
||||||
}, options ); |
|
||||||
|
|
||||||
if ( document.createEvent ) { |
|
||||||
try { |
|
||||||
event = document.createEvent( "KeyEvents" ); |
|
||||||
event.initKeyEvent( type, options.bubbles, options.cancelable, options.view, |
|
||||||
options.ctrlKey, options.altKey, options.shiftKey, options.metaKey, |
|
||||||
options.keyCode, options.charCode ); |
|
||||||
// initKeyEvent throws an exception in WebKit
|
|
||||||
// see: http://stackoverflow.com/questions/6406784/initkeyevent-keypress-only-works-in-firefox-need-a-cross-browser-solution
|
|
||||||
// and also https://bugs.webkit.org/show_bug.cgi?id=13368
|
|
||||||
// fall back to a generic event until we decide to implement initKeyboardEvent
|
|
||||||
} catch( err ) { |
|
||||||
event = document.createEvent( "Events" ); |
|
||||||
event.initEvent( type, options.bubbles, options.cancelable ); |
|
||||||
$.extend( event, { |
|
||||||
view: options.view, |
|
||||||
ctrlKey: options.ctrlKey, |
|
||||||
altKey: options.altKey, |
|
||||||
shiftKey: options.shiftKey, |
|
||||||
metaKey: options.metaKey, |
|
||||||
keyCode: options.keyCode, |
|
||||||
charCode: options.charCode |
|
||||||
}); |
|
||||||
} |
|
||||||
} else if ( document.createEventObject ) { |
|
||||||
event = document.createEventObject(); |
|
||||||
$.extend( event, options ); |
|
||||||
} |
|
||||||
|
|
||||||
if ( !!/msie [\w.]+/.exec( navigator.userAgent.toLowerCase() ) || (({}).toString.call( window.opera ) === "[object Opera]") ) { |
|
||||||
event.keyCode = (options.charCode > 0) ? options.charCode : options.keyCode; |
|
||||||
event.charCode = undefined; |
|
||||||
} |
|
||||||
|
|
||||||
return event; |
|
||||||
}, |
|
||||||
|
|
||||||
dispatchEvent: function( elem, type, event ) { |
|
||||||
if ( elem.dispatchEvent ) { |
|
||||||
elem.dispatchEvent( event ); |
|
||||||
} else if ( type === "click" && elem.click && elem.nodeName.toLowerCase() === "input" ) { |
|
||||||
elem.click(); |
|
||||||
} else if ( elem.fireEvent ) { |
|
||||||
elem.fireEvent( "on" + type, event ); |
|
||||||
} |
|
||||||
}, |
|
||||||
|
|
||||||
simulateFocus: function() { |
|
||||||
var focusinEvent, |
|
||||||
triggered = false, |
|
||||||
element = $( this.target ); |
|
||||||
|
|
||||||
function trigger() { |
|
||||||
triggered = true; |
|
||||||
} |
|
||||||
|
|
||||||
element.bind( "focus", trigger ); |
|
||||||
element[ 0 ].focus(); |
|
||||||
|
|
||||||
if ( !triggered ) { |
|
||||||
focusinEvent = $.Event( "focusin" ); |
|
||||||
focusinEvent.preventDefault(); |
|
||||||
element.trigger( focusinEvent ); |
|
||||||
element.triggerHandler( "focus" ); |
|
||||||
} |
|
||||||
element.unbind( "focus", trigger ); |
|
||||||
}, |
|
||||||
|
|
||||||
simulateBlur: function() { |
|
||||||
var focusoutEvent, |
|
||||||
triggered = false, |
|
||||||
element = $( this.target ); |
|
||||||
|
|
||||||
function trigger() { |
|
||||||
triggered = true; |
|
||||||
} |
|
||||||
|
|
||||||
element.bind( "blur", trigger ); |
|
||||||
element[ 0 ].blur(); |
|
||||||
|
|
||||||
// blur events are async in IE
|
|
||||||
setTimeout(function() { |
|
||||||
// IE won't let the blur occur if the window is inactive
|
|
||||||
if ( element[ 0 ].ownerDocument.activeElement === element[ 0 ] ) { |
|
||||||
element[ 0 ].ownerDocument.body.focus(); |
|
||||||
} |
|
||||||
|
|
||||||
// Firefox won't trigger events if the window is inactive
|
|
||||||
// IE doesn't trigger events if we had to manually focus the body
|
|
||||||
if ( !triggered ) { |
|
||||||
focusoutEvent = $.Event( "focusout" ); |
|
||||||
focusoutEvent.preventDefault(); |
|
||||||
element.trigger( focusoutEvent ); |
|
||||||
element.triggerHandler( "blur" ); |
|
||||||
} |
|
||||||
element.unbind( "blur", trigger ); |
|
||||||
}, 1 ); |
|
||||||
} |
|
||||||
}); |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/** complex events **/ |
|
||||||
|
|
||||||
function findCenter( elem ) { |
|
||||||
var offset, |
|
||||||
document = $( elem.ownerDocument ); |
|
||||||
elem = $( elem ); |
|
||||||
offset = elem.offset(); |
|
||||||
|
|
||||||
return { |
|
||||||
x: offset.left + elem.outerWidth() / 2 - document.scrollLeft(), |
|
||||||
y: offset.top + elem.outerHeight() / 2 - document.scrollTop() |
|
||||||
}; |
|
||||||
} |
|
||||||
|
|
||||||
function findCorner( elem ) { |
|
||||||
var offset, |
|
||||||
document = $( elem.ownerDocument ); |
|
||||||
elem = $( elem ); |
|
||||||
offset = elem.offset(); |
|
||||||
|
|
||||||
return { |
|
||||||
x: offset.left - document.scrollLeft(), |
|
||||||
y: offset.top - document.scrollTop() |
|
||||||
}; |
|
||||||
} |
|
||||||
|
|
||||||
$.extend( $.simulate.prototype, { |
|
||||||
simulateDrag: function() { |
|
||||||
var i = 0, |
|
||||||
target = this.target, |
|
||||||
eventDoc = target.ownerDocument, |
|
||||||
options = this.options, |
|
||||||
center = options.handle === "corner" ? findCorner( target ) : findCenter( target ), |
|
||||||
x = Math.floor( center.x ), |
|
||||||
y = Math.floor( center.y ), |
|
||||||
coord = { clientX: x, clientY: y }, |
|
||||||
dx = options.dx || ( options.x !== undefined ? options.x - x : 0 ), |
|
||||||
dy = options.dy || ( options.y !== undefined ? options.y - y : 0 ), |
|
||||||
moves = options.moves || 3; |
|
||||||
|
|
||||||
this.simulateEvent( target, "mousedown", coord ); |
|
||||||
|
|
||||||
for ( ; i < moves ; i++ ) { |
|
||||||
x += dx / moves; |
|
||||||
y += dy / moves; |
|
||||||
|
|
||||||
coord = { |
|
||||||
clientX: Math.round( x ), |
|
||||||
clientY: Math.round( y ) |
|
||||||
}; |
|
||||||
|
|
||||||
this.simulateEvent( eventDoc, "mousemove", coord ); |
|
||||||
} |
|
||||||
|
|
||||||
if ( $.contains( eventDoc, target ) ) { |
|
||||||
this.simulateEvent( target, "mouseup", coord ); |
|
||||||
this.simulateEvent( target, "click", coord ); |
|
||||||
} else { |
|
||||||
this.simulateEvent( eventDoc, "mouseup", coord ); |
|
||||||
} |
|
||||||
} |
|
||||||
}); |
|
||||||
|
|
||||||
})( jQuery ); |
|
||||||
@ -1,107 +0,0 @@ |
|||||||
describe("data options", function() { |
|
||||||
var $multiselect, |
|
||||||
$multiselect_to; |
|
||||||
|
|
||||||
beforeEach(function() { |
|
||||||
var html = '<div class="row">'+ |
|
||||||
' <div class="col-xs-5">'+ |
|
||||||
' <select name="from[]" class="multiselect form-control" size="8" multiple="multiple" data-right="#multiselect_to_1" data-right-all="#right_All_1" data-right-selected="#right_Selected_1" data-left-all="#left_All_1" data-left-selected="#left_Selected_1">'+ |
|
||||||
' <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="right_All_1" class="btn btn-block"><i class="glyphicon glyphicon-forward"></i></button>'+ |
|
||||||
' <button type="button" id="right_Selected_1" class="btn btn-block"><i class="glyphicon glyphicon-chevron-right"></i></button>'+ |
|
||||||
' <button type="button" id="left_Selected_1" class="btn btn-block"><i class="glyphicon glyphicon-chevron-left"></i></button>'+ |
|
||||||
' <button type="button" id="left_All_1" class="btn btn-block"><i class="glyphicon glyphicon-backward"></i></button>'+ |
|
||||||
' </div>'+ |
|
||||||
' '+ |
|
||||||
' <div class="col-xs-5">'+ |
|
||||||
' <select name="to[]" id="multiselect_to_1" class="form-control" size="8" multiple="multiple"></select>'+ |
|
||||||
' </div>'+ |
|
||||||
'</div>'; |
|
||||||
|
|
||||||
jasmine.getFixtures().set(html); |
|
||||||
|
|
||||||
$multiselect = $('.multiselect').multiselect(); |
|
||||||
$multiselect_to = $('#multiselect_to_1'); |
|
||||||
}); |
|
||||||
|
|
||||||
it("multiselect is instantiated and contains options", function() { |
|
||||||
expect($multiselect.hasClass('multiselect')).toBe(true); |
|
||||||
expect($multiselect.find('option').length).toBe(5); |
|
||||||
|
|
||||||
expect($multiselect_to.attr('id')).toBe('multiselect_to_1'); |
|
||||||
expect($multiselect_to.find('option').length).toBe(0); |
|
||||||
}); |
|
||||||
|
|
||||||
it("move all to right", function() { |
|
||||||
// Click move all to right
|
|
||||||
$('#right_All_1').trigger('click'); |
|
||||||
|
|
||||||
expect($multiselect.find('option').length).toBe(0); |
|
||||||
expect($multiselect_to.find('option').length).toBe(5); |
|
||||||
}); |
|
||||||
|
|
||||||
it("move one to right", function() { |
|
||||||
$multiselect.find('option:eq(0)').attr('selected', true); |
|
||||||
|
|
||||||
// Click move selected to right
|
|
||||||
$('#right_Selected_1').trigger('click'); |
|
||||||
|
|
||||||
expect($multiselect.find('option').length).toBe(4); |
|
||||||
expect($multiselect_to.find('option').length).toBe(1); |
|
||||||
}); |
|
||||||
|
|
||||||
it("move all selected to right", function() { |
|
||||||
$multiselect.find('option:nth-child(2n)').attr('selected', true); |
|
||||||
|
|
||||||
// Click move selected to right
|
|
||||||
$('#right_Selected_1').trigger('click'); |
|
||||||
|
|
||||||
expect($multiselect.find('option').length).toBe(3); |
|
||||||
expect($multiselect_to.find('option').length).toBe(2); |
|
||||||
}); |
|
||||||
|
|
||||||
it("move all to left", function() { |
|
||||||
// Click move all to right
|
|
||||||
$('#right_All_1').trigger('click'); |
|
||||||
|
|
||||||
// Click move all to left
|
|
||||||
$('#left_All_1').trigger('click'); |
|
||||||
|
|
||||||
expect($multiselect.find('option').length).toBe(5); |
|
||||||
expect($multiselect_to.find('option').length).toBe(0); |
|
||||||
}); |
|
||||||
|
|
||||||
it("move one to left", function() { |
|
||||||
// Click move all to right
|
|
||||||
$('#right_All_1').trigger('click'); |
|
||||||
|
|
||||||
$multiselect_to.find('option:eq(0)').attr('selected', true); |
|
||||||
|
|
||||||
// Click move selected to right
|
|
||||||
$('#left_Selected_1').trigger('click'); |
|
||||||
|
|
||||||
expect($multiselect.find('option').length).toBe(1); |
|
||||||
expect($multiselect_to.find('option').length).toBe(4); |
|
||||||
}); |
|
||||||
|
|
||||||
it("move all selected to left", function() { |
|
||||||
// Click move all to right
|
|
||||||
$('#right_All_1').trigger('click'); |
|
||||||
|
|
||||||
$multiselect_to.find('option:nth-child(2n)').attr('selected', true); |
|
||||||
|
|
||||||
// Click move selected to right
|
|
||||||
$('#left_Selected_1').trigger('click'); |
|
||||||
|
|
||||||
expect($multiselect.find('option').length).toBe(2); |
|
||||||
expect($multiselect_to.find('option').length).toBe(3); |
|
||||||
}); |
|
||||||
}); |
|
||||||
@ -1,113 +0,0 @@ |
|||||||
describe("javascript options", function() { |
|
||||||
var $multiselect, |
|
||||||
$multiselect_to; |
|
||||||
|
|
||||||
beforeEach(function() { |
|
||||||
var html = '<div class="row">'+ |
|
||||||
' <div class="col-xs-5">'+ |
|
||||||
' <select name="from[]" class="js-multiselect 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="js_right_All_1" class="btn btn-block"><i class="glyphicon glyphicon-forward"></i></button>'+ |
|
||||||
' <button type="button" id="js_right_Selected_1" class="btn btn-block"><i class="glyphicon glyphicon-chevron-right"></i></button>'+ |
|
||||||
' <button type="button" id="js_left_Selected_1" class="btn btn-block"><i class="glyphicon glyphicon-chevron-left"></i></button>'+ |
|
||||||
' <button type="button" id="js_left_All_1" class="btn btn-block"><i class="glyphicon glyphicon-backward"></i></button>'+ |
|
||||||
' </div>'+ |
|
||||||
' '+ |
|
||||||
' <div class="col-xs-5">'+ |
|
||||||
' <select name="to[]" id="js_multiselect_to_1" class="form-control" size="8" multiple="multiple"></select>'+ |
|
||||||
' </div>'+ |
|
||||||
'</div>'; |
|
||||||
|
|
||||||
jasmine.getFixtures().set(html); |
|
||||||
|
|
||||||
$multiselect = $('.js-multiselect').multiselect({ |
|
||||||
right: '#js_multiselect_to_1', |
|
||||||
rightAll: '#js_right_All_1', |
|
||||||
rightSelected: '#js_right_Selected_1', |
|
||||||
leftSelected: '#js_left_Selected_1', |
|
||||||
leftAll: '#js_left_All_1' |
|
||||||
}); |
|
||||||
$multiselect_to = $('#js_multiselect_to_1'); |
|
||||||
}); |
|
||||||
|
|
||||||
it("multiselect is instantiated and contains options", function() { |
|
||||||
expect($multiselect.hasClass('js-multiselect')).toBe(true); |
|
||||||
expect($multiselect.find('option').length).toBe(5); |
|
||||||
|
|
||||||
expect($multiselect_to.attr('id')).toBe('js_multiselect_to_1'); |
|
||||||
expect($multiselect_to.find('option').length).toBe(0); |
|
||||||
}); |
|
||||||
|
|
||||||
it("move all to right", function() { |
|
||||||
// Click move all to right
|
|
||||||
$('#js_right_All_1').trigger('click'); |
|
||||||
|
|
||||||
expect($multiselect.find('option').length).toBe(0); |
|
||||||
expect($multiselect_to.find('option').length).toBe(5); |
|
||||||
}); |
|
||||||
|
|
||||||
it("move one to right", function() { |
|
||||||
$multiselect.find('option:eq(0)').attr('selected', true); |
|
||||||
|
|
||||||
// Click move selected to right
|
|
||||||
$('#js_right_Selected_1').trigger('click'); |
|
||||||
|
|
||||||
expect($multiselect.find('option').length).toBe(4); |
|
||||||
expect($multiselect_to.find('option').length).toBe(1); |
|
||||||
}); |
|
||||||
|
|
||||||
it("move all selected to right", function() { |
|
||||||
$multiselect.find('option:nth-child(2n)').attr('selected', true); |
|
||||||
|
|
||||||
// Click move selected to right
|
|
||||||
$('#js_right_Selected_1').trigger('click'); |
|
||||||
|
|
||||||
expect($multiselect.find('option').length).toBe(3); |
|
||||||
expect($multiselect_to.find('option').length).toBe(2); |
|
||||||
}); |
|
||||||
|
|
||||||
it("move all to left", function() { |
|
||||||
// Click move all to right
|
|
||||||
$('#js_right_All_1').trigger('click'); |
|
||||||
|
|
||||||
// Click move all to left
|
|
||||||
$('#js_left_All_1').trigger('click'); |
|
||||||
|
|
||||||
expect($multiselect.find('option').length).toBe(5); |
|
||||||
expect($multiselect_to.find('option').length).toBe(0); |
|
||||||
}); |
|
||||||
|
|
||||||
it("move one to left", function() { |
|
||||||
// Click move all to right
|
|
||||||
$('#js_right_All_1').trigger('click'); |
|
||||||
|
|
||||||
$multiselect_to.find('option:eq(0)').attr('selected', true); |
|
||||||
|
|
||||||
// Click move selected to right
|
|
||||||
$('#js_left_Selected_1').trigger('click'); |
|
||||||
|
|
||||||
expect($multiselect.find('option').length).toBe(1); |
|
||||||
expect($multiselect_to.find('option').length).toBe(4); |
|
||||||
}); |
|
||||||
|
|
||||||
it("move all selected to left", function() { |
|
||||||
// Click move all to right
|
|
||||||
$('#js_right_All_1').trigger('click'); |
|
||||||
|
|
||||||
$multiselect_to.find('option:nth-child(2n)').attr('selected', true); |
|
||||||
|
|
||||||
// Click move selected to right
|
|
||||||
$('#js_left_Selected_1').trigger('click'); |
|
||||||
|
|
||||||
expect($multiselect.find('option').length).toBe(2); |
|
||||||
expect($multiselect_to.find('option').length).toBe(3); |
|
||||||
}); |
|
||||||
}); |
|
||||||
@ -1,128 +0,0 @@ |
|||||||
describe("keep rendering sort", function() { |
|
||||||
var $multiselect, |
|
||||||
$multiselect_to; |
|
||||||
|
|
||||||
beforeEach(function() { |
|
||||||
var html = '<div class="row">'+ |
|
||||||
' <div class="col-xs-5">'+ |
|
||||||
' <select name="from[]" id="keepRenderingSort" 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="keepRenderingSort_rightAll" class="btn btn-block"><i class="glyphicon glyphicon-forward"></i></button>'+ |
|
||||||
' <button type="button" id="keepRenderingSort_rightSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-right"></i></button>'+ |
|
||||||
' <button type="button" id="keepRenderingSort_leftSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-left"></i></button>'+ |
|
||||||
' <button type="button" id="keepRenderingSort_leftAll" class="btn btn-block"><i class="glyphicon glyphicon-backward"></i></button>'+ |
|
||||||
' </div>'+ |
|
||||||
' '+ |
|
||||||
' <div class="col-xs-5">'+ |
|
||||||
' <select name="to[]" id="keepRenderingSort_to" class="form-control" size="8" multiple="multiple"></select>'+ |
|
||||||
' </div>'+ |
|
||||||
'</div>'; |
|
||||||
|
|
||||||
jasmine.getFixtures().set(html); |
|
||||||
|
|
||||||
$multiselect = $('#keepRenderingSort').multiselect({ |
|
||||||
keepRenderingSort: true |
|
||||||
}); |
|
||||||
$multiselect_to = $('#keepRenderingSort_to'); |
|
||||||
}); |
|
||||||
|
|
||||||
it("multiselect is instantiated and contains options", function() { |
|
||||||
expect($multiselect.attr('id')).toBe('keepRenderingSort'); |
|
||||||
expect($multiselect.find('option').length).toBe(5); |
|
||||||
|
|
||||||
expect($multiselect_to.attr('id')).toBe('keepRenderingSort_to'); |
|
||||||
expect($multiselect_to.find('option').length).toBe(0); |
|
||||||
}); |
|
||||||
|
|
||||||
it("move all to right", function() { |
|
||||||
// Click move all to right
|
|
||||||
$('#keepRenderingSort_rightAll').trigger('click'); |
|
||||||
|
|
||||||
expect($multiselect.find('option').length).toBe(0); |
|
||||||
expect($multiselect_to.find('option').length).toBe(5); |
|
||||||
}); |
|
||||||
|
|
||||||
it("move one to right", function() { |
|
||||||
$multiselect.find('option:eq(0)').attr('selected', true); |
|
||||||
|
|
||||||
// Click move selected to right
|
|
||||||
$('#keepRenderingSort_rightSelected').trigger('click'); |
|
||||||
|
|
||||||
expect($multiselect.find('option').length).toBe(4); |
|
||||||
expect($multiselect_to.find('option').length).toBe(1); |
|
||||||
}); |
|
||||||
|
|
||||||
it("move all selected to right", function() { |
|
||||||
$multiselect.find('option:nth-child(2n)').attr('selected', true); |
|
||||||
|
|
||||||
// Click move selected to right
|
|
||||||
$('#keepRenderingSort_rightSelected').trigger('click'); |
|
||||||
|
|
||||||
expect($multiselect.find('option').length).toBe(3); |
|
||||||
expect($multiselect_to.find('option').length).toBe(2); |
|
||||||
}); |
|
||||||
|
|
||||||
it("move all to left", function() { |
|
||||||
// Click move all to right
|
|
||||||
$('#keepRenderingSort_rightAll').trigger('click'); |
|
||||||
|
|
||||||
// Click move all to left
|
|
||||||
$('#keepRenderingSort_leftAll').trigger('click'); |
|
||||||
|
|
||||||
expect($multiselect.find('option').length).toBe(5); |
|
||||||
expect($multiselect_to.find('option').length).toBe(0); |
|
||||||
}); |
|
||||||
|
|
||||||
it("move one to left", function() { |
|
||||||
// Click move all to right
|
|
||||||
$('#keepRenderingSort_rightAll').trigger('click'); |
|
||||||
|
|
||||||
$multiselect_to.find('option:eq(0)').attr('selected', true); |
|
||||||
|
|
||||||
// Click move selected to right
|
|
||||||
$('#keepRenderingSort_leftSelected').trigger('click'); |
|
||||||
|
|
||||||
expect($multiselect.find('option').length).toBe(1); |
|
||||||
expect($multiselect_to.find('option').length).toBe(4); |
|
||||||
}); |
|
||||||
|
|
||||||
it("move all selected to left", function() { |
|
||||||
// Click move all to right
|
|
||||||
$('#keepRenderingSort_rightAll').trigger('click'); |
|
||||||
|
|
||||||
$multiselect_to.find('option:nth-child(2n)').attr('selected', true); |
|
||||||
|
|
||||||
// Click move selected to right
|
|
||||||
$('#keepRenderingSort_leftSelected').trigger('click'); |
|
||||||
|
|
||||||
expect($multiselect.find('option').length).toBe(2); |
|
||||||
expect($multiselect_to.find('option').length).toBe(3); |
|
||||||
}); |
|
||||||
|
|
||||||
it("options in the left are displayed in the way they were rendered", function() { |
|
||||||
expect($multiselect.find('option:eq(0)').text()).toBe('Item 1'); |
|
||||||
expect($multiselect.find('option:eq(1)').text()).toBe('Item 5'); |
|
||||||
expect($multiselect.find('option:eq(2)').text()).toBe('Item 2'); |
|
||||||
expect($multiselect.find('option:eq(3)').text()).toBe('Item 4'); |
|
||||||
expect($multiselect.find('option:eq(4)').text()).toBe('Item 3'); |
|
||||||
}); |
|
||||||
|
|
||||||
it("options in the right are displayed in the way they were rendered", function() { |
|
||||||
// Click move all to right
|
|
||||||
$('#keepRenderingSort_rightAll').trigger('click'); |
|
||||||
|
|
||||||
expect($multiselect_to.find('option:eq(0)').text()).toBe('Item 1'); |
|
||||||
expect($multiselect_to.find('option:eq(1)').text()).toBe('Item 5'); |
|
||||||
expect($multiselect_to.find('option:eq(2)').text()).toBe('Item 2'); |
|
||||||
expect($multiselect_to.find('option:eq(3)').text()).toBe('Item 4'); |
|
||||||
expect($multiselect_to.find('option:eq(4)').text()).toBe('Item 3'); |
|
||||||
}); |
|
||||||
}); |
|
||||||
@ -1,300 +0,0 @@ |
|||||||
describe("multiple destinations", function() { |
|
||||||
var $multiselect, |
|
||||||
$multiselect_to, |
|
||||||
$multiselect_to_2; |
|
||||||
|
|
||||||
beforeEach(function() { |
|
||||||
var html = '<div class="row">'+ |
|
||||||
' <div class="col-xs-5">'+ |
|
||||||
' <select name="from[]" id="multi_d" class="form-control" size="26" multiple="multiple">'+ |
|
||||||
' <option value="1">C++</option>'+ |
|
||||||
' <option value="2">C#</option>'+ |
|
||||||
' <option value="3">Haskell</option>'+ |
|
||||||
' <option value="4">Java</option>'+ |
|
||||||
' <option value="5">JavaScript</option>'+ |
|
||||||
' <option value="6">Lisp</option>'+ |
|
||||||
' <option value="7">Lua</option>'+ |
|
||||||
' <option value="8">MATLAB</option>'+ |
|
||||||
' <option value="9">NewLISP</option>'+ |
|
||||||
' <option value="10">PHP</option>'+ |
|
||||||
' <option value="11">Perl</option>'+ |
|
||||||
' <option value="12">SQL</option>'+ |
|
||||||
' <option value="13">Unix shell</option>'+ |
|
||||||
' </select>'+ |
|
||||||
' </div>'+ |
|
||||||
' '+ |
|
||||||
' <div class="col-xs-2">'+ |
|
||||||
' <button type="button" id="multi_d_rightAll" class="btn btn-default btn-block" style="margin-top: 20px;"><i class="glyphicon glyphicon-forward"></i></button>'+ |
|
||||||
' <button type="button" id="multi_d_rightSelected" class="btn btn-default btn-block"><i class="glyphicon glyphicon-chevron-right"></i></button>'+ |
|
||||||
' <button type="button" id="multi_d_leftSelected" class="btn btn-default btn-block"><i class="glyphicon glyphicon-chevron-left"></i></button>'+ |
|
||||||
' <button type="button" id="multi_d_leftAll" class="btn btn-default btn-block"><i class="glyphicon glyphicon-backward"></i></button>'+ |
|
||||||
' '+ |
|
||||||
' <hr style="margin: 40px 0 60px;" />'+ |
|
||||||
' '+ |
|
||||||
' <button type="button" id="multi_d_rightAll_2" class="btn btn-default btn-block"><i class="glyphicon glyphicon-forward"></i></button>'+ |
|
||||||
' <button type="button" id="multi_d_rightSelected_2" class="btn btn-default btn-block"><i class="glyphicon glyphicon-chevron-right"></i></button>'+ |
|
||||||
' <button type="button" id="multi_d_leftSelected_2" class="btn btn-default btn-block"><i class="glyphicon glyphicon-chevron-left"></i></button>'+ |
|
||||||
' <button type="button" id="multi_d_leftAll_2" class="btn btn-default btn-block"><i class="glyphicon glyphicon-backward"></i></button>'+ |
|
||||||
' </div>'+ |
|
||||||
' '+ |
|
||||||
' <div class="col-xs-5">'+ |
|
||||||
' <b>Known languages</b>'+ |
|
||||||
' <select name="to[]" id="multi_d_to" class="form-control" size="8" multiple="multiple"></select>'+ |
|
||||||
' '+ |
|
||||||
' <br/><hr/><br/>'+ |
|
||||||
' '+ |
|
||||||
' <b>I want to learn</b>'+ |
|
||||||
' <select name="to_2[]" id="multi_d_to_2" class="form-control" size="8" multiple="multiple"></select>'+ |
|
||||||
' </div>'+ |
|
||||||
'</div>'; |
|
||||||
|
|
||||||
jasmine.getFixtures().set(html); |
|
||||||
|
|
||||||
$multiselect = $('#multi_d').multiselect({ |
|
||||||
right: '#multi_d_to, #multi_d_to_2', |
|
||||||
rightSelected: '#multi_d_rightSelected, #multi_d_rightSelected_2', |
|
||||||
leftSelected: '#multi_d_leftSelected, #multi_d_leftSelected_2', |
|
||||||
rightAll: '#multi_d_rightAll, #multi_d_rightAll_2', |
|
||||||
leftAll: '#multi_d_leftAll, #multi_d_leftAll_2', |
|
||||||
|
|
||||||
search: { |
|
||||||
left: '<input type="text" name="q" class="form-control" placeholder="Search..." />' |
|
||||||
}, |
|
||||||
|
|
||||||
moveToRight: function(Multiselect, $options, event, silent, skipStack) { |
|
||||||
var button = $(event.currentTarget).attr('id'); |
|
||||||
|
|
||||||
if (button == 'multi_d_rightSelected') { |
|
||||||
var $left_options = Multiselect.$left.find('> option:selected'); |
|
||||||
Multiselect.$right.eq(0).append($left_options); |
|
||||||
|
|
||||||
if ( typeof Multiselect.callbacks.sort == 'function' && !silent ) { |
|
||||||
Multiselect.$right.eq(0).find('> option').sort(Multiselect.callbacks.sort).appendTo(Multiselect.$right.eq(0)); |
|
||||||
} |
|
||||||
} else if (button == 'multi_d_rightAll') { |
|
||||||
var $left_options = Multiselect.$left.children(':visible'); |
|
||||||
Multiselect.$right.eq(0).append($left_options); |
|
||||||
|
|
||||||
if ( typeof Multiselect.callbacks.sort == 'function' && !silent ) { |
|
||||||
Multiselect.$right.eq(0).find('> option').sort(Multiselect.callbacks.sort).appendTo(Multiselect.$right.eq(0)); |
|
||||||
} |
|
||||||
} else if (button == 'multi_d_rightSelected_2') { |
|
||||||
var $left_options = Multiselect.$left.find('> option:selected'); |
|
||||||
Multiselect.$right.eq(1).append($left_options); |
|
||||||
|
|
||||||
if ( typeof Multiselect.callbacks.sort == 'function' && !silent ) { |
|
||||||
Multiselect.$right.eq(1).find('> option').sort(Multiselect.callbacks.sort).appendTo(Multiselect.$right.eq(1)); |
|
||||||
} |
|
||||||
} else if (button == 'multi_d_rightAll_2') { |
|
||||||
var $left_options = Multiselect.$left.children(':visible'); |
|
||||||
Multiselect.$right.eq(1).append($left_options); |
|
||||||
|
|
||||||
if ( typeof Multiselect.callbacks.sort == 'function' && !silent ) { |
|
||||||
Multiselect.$right.eq(1).eq(1).find('> option').sort(Multiselect.callbacks.sort).appendTo(Multiselect.$right.eq(1)); |
|
||||||
} |
|
||||||
} |
|
||||||
}, |
|
||||||
|
|
||||||
moveToLeft: function(Multiselect, $options, event, silent, skipStack) { |
|
||||||
var button = $(event.currentTarget).attr('id'); |
|
||||||
|
|
||||||
if (button == 'multi_d_leftSelected') { |
|
||||||
var $right_options = Multiselect.$right.eq(0).find('> option:selected'); |
|
||||||
Multiselect.$left.append($right_options); |
|
||||||
|
|
||||||
if ( typeof Multiselect.callbacks.sort == 'function' && !silent ) { |
|
||||||
Multiselect.$left.find('> option').sort(Multiselect.callbacks.sort).appendTo(Multiselect.$left); |
|
||||||
} |
|
||||||
} else if (button == 'multi_d_leftAll') { |
|
||||||
var $right_options = Multiselect.$right.eq(0).children(':visible'); |
|
||||||
Multiselect.$left.append($right_options); |
|
||||||
|
|
||||||
if ( typeof Multiselect.callbacks.sort == 'function' && !silent ) { |
|
||||||
Multiselect.$left.find('> option').sort(Multiselect.callbacks.sort).appendTo(Multiselect.$left); |
|
||||||
} |
|
||||||
} else if (button == 'multi_d_leftSelected_2') { |
|
||||||
var $right_options = Multiselect.$right.eq(1).find('> option:selected'); |
|
||||||
Multiselect.$left.append($right_options); |
|
||||||
|
|
||||||
if ( typeof Multiselect.callbacks.sort == 'function' && !silent ) { |
|
||||||
Multiselect.$left.find('> option').sort(Multiselect.callbacks.sort).appendTo(Multiselect.$left); |
|
||||||
} |
|
||||||
} else if (button == 'multi_d_leftAll_2') { |
|
||||||
var $right_options = Multiselect.$right.eq(1).children(':visible'); |
|
||||||
Multiselect.$left.append($right_options); |
|
||||||
|
|
||||||
if ( typeof Multiselect.callbacks.sort == 'function' && !silent ) { |
|
||||||
Multiselect.$left.find('> option').sort(Multiselect.callbacks.sort).appendTo(Multiselect.$left); |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
}); |
|
||||||
$multiselect_to = $('#multi_d_to'); |
|
||||||
$multiselect_to_2 = $('#multi_d_to_2'); |
|
||||||
}); |
|
||||||
|
|
||||||
it("multiselect is instantiated and contains options", function() { |
|
||||||
expect($multiselect.attr('id')).toBe('multi_d'); |
|
||||||
expect($multiselect.find('option').length).toBe(13); |
|
||||||
|
|
||||||
expect($multiselect_to.attr('id')).toBe('multi_d_to'); |
|
||||||
expect($multiselect_to.find('option').length).toBe(0); |
|
||||||
|
|
||||||
expect($multiselect_to_2.attr('id')).toBe('multi_d_to_2'); |
|
||||||
expect($multiselect_to_2.find('option').length).toBe(0); |
|
||||||
}); |
|
||||||
|
|
||||||
it("move all to right 1", function() { |
|
||||||
// Click move all to right
|
|
||||||
$('#multi_d_rightAll').trigger('click'); |
|
||||||
|
|
||||||
expect($multiselect.find('option').length).toBe(0); |
|
||||||
expect($multiselect_to.find('option').length).toBe(13); |
|
||||||
}); |
|
||||||
|
|
||||||
it("move one to right 1", function() { |
|
||||||
$multiselect.find('option:eq(0)').attr('selected', true); |
|
||||||
|
|
||||||
// Click move selected to right
|
|
||||||
$('#multi_d_rightSelected').trigger('click'); |
|
||||||
|
|
||||||
expect($multiselect.find('option').length).toBe(12); |
|
||||||
expect($multiselect_to.find('option').length).toBe(1); |
|
||||||
}); |
|
||||||
|
|
||||||
it("move all selected to right 1", function() { |
|
||||||
$multiselect.find('option:nth-child(2n)').attr('selected', true); |
|
||||||
|
|
||||||
// Click move selected to right
|
|
||||||
$('#multi_d_rightSelected').trigger('click'); |
|
||||||
|
|
||||||
expect($multiselect.find('option').length).toBe(7); |
|
||||||
expect($multiselect_to.find('option').length).toBe(6); |
|
||||||
}); |
|
||||||
|
|
||||||
it("move all to left 1", function() { |
|
||||||
// Click move all to right
|
|
||||||
$('#multi_d_rightAll').trigger('click'); |
|
||||||
|
|
||||||
// Click move all to left
|
|
||||||
$('#multi_d_leftAll').trigger('click'); |
|
||||||
|
|
||||||
expect($multiselect.find('option').length).toBe(13); |
|
||||||
expect($multiselect_to.find('option').length).toBe(0); |
|
||||||
}); |
|
||||||
|
|
||||||
it("move one to left 1", function() { |
|
||||||
// Click move all to right
|
|
||||||
$('#multi_d_rightAll').trigger('click'); |
|
||||||
|
|
||||||
$multiselect_to.find('option:eq(0)').attr('selected', true); |
|
||||||
|
|
||||||
// Click move selected to right
|
|
||||||
$('#multi_d_leftSelected').trigger('click'); |
|
||||||
|
|
||||||
expect($multiselect.find('option').length).toBe(1); |
|
||||||
expect($multiselect_to.find('option').length).toBe(12); |
|
||||||
}); |
|
||||||
|
|
||||||
it("move all selected to left 1", function() { |
|
||||||
// Click move all to right
|
|
||||||
$('#multi_d_rightAll').trigger('click'); |
|
||||||
|
|
||||||
$multiselect_to.find('option:nth-child(2n)').attr('selected', true); |
|
||||||
|
|
||||||
// Click move selected to right
|
|
||||||
$('#multi_d_leftSelected').trigger('click'); |
|
||||||
|
|
||||||
expect($multiselect.find('option').length).toBe(6); |
|
||||||
expect($multiselect_to.find('option').length).toBe(7); |
|
||||||
}); |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
it("move all to right 2", function() { |
|
||||||
// Click move all to right
|
|
||||||
$('#multi_d_rightAll_2').trigger('click'); |
|
||||||
|
|
||||||
expect($multiselect.find('option').length).toBe(0); |
|
||||||
expect($multiselect_to_2.find('option').length).toBe(13); |
|
||||||
}); |
|
||||||
|
|
||||||
it("move one to right 2", function() { |
|
||||||
$multiselect.find('option:eq(0)').attr('selected', true); |
|
||||||
|
|
||||||
// Click move selected to right
|
|
||||||
$('#multi_d_rightSelected_2').trigger('click'); |
|
||||||
|
|
||||||
expect($multiselect.find('option').length).toBe(12); |
|
||||||
expect($multiselect_to_2.find('option').length).toBe(1); |
|
||||||
}); |
|
||||||
|
|
||||||
it("move all selected to right 2", function() { |
|
||||||
$multiselect.find('option:nth-child(2n)').attr('selected', true); |
|
||||||
|
|
||||||
// Click move selected to right
|
|
||||||
$('#multi_d_rightSelected_2').trigger('click'); |
|
||||||
|
|
||||||
expect($multiselect.find('option').length).toBe(7); |
|
||||||
expect($multiselect_to_2.find('option').length).toBe(6); |
|
||||||
}); |
|
||||||
|
|
||||||
it("move all to left 2", function() { |
|
||||||
// Click move all to right
|
|
||||||
$('#multi_d_rightAll_2').trigger('click'); |
|
||||||
|
|
||||||
// Click move all to left
|
|
||||||
$('#multi_d_leftAll_2').trigger('click'); |
|
||||||
|
|
||||||
expect($multiselect.find('option').length).toBe(13); |
|
||||||
expect($multiselect_to_2.find('option').length).toBe(0); |
|
||||||
}); |
|
||||||
|
|
||||||
it("move one to left 2", function() { |
|
||||||
// Click move all to right
|
|
||||||
$('#multi_d_rightAll_2').trigger('click'); |
|
||||||
|
|
||||||
$multiselect_to_2.find('option:eq(0)').attr('selected', true); |
|
||||||
|
|
||||||
// Click move selected to right
|
|
||||||
$('#multi_d_leftSelected_2').trigger('click'); |
|
||||||
|
|
||||||
expect($multiselect.find('option').length).toBe(1); |
|
||||||
expect($multiselect_to_2.find('option').length).toBe(12); |
|
||||||
}); |
|
||||||
|
|
||||||
it("move all selected to left 2", function() { |
|
||||||
// Click move all to right
|
|
||||||
$('#multi_d_rightAll_2').trigger('click'); |
|
||||||
|
|
||||||
$multiselect_to_2.find('option:nth-child(2n)').attr('selected', true); |
|
||||||
|
|
||||||
// Click move selected to right
|
|
||||||
$('#multi_d_leftSelected_2').trigger('click'); |
|
||||||
|
|
||||||
expect($multiselect.find('option').length).toBe(6); |
|
||||||
expect($multiselect_to_2.find('option').length).toBe(7); |
|
||||||
}); |
|
||||||
|
|
||||||
it("move one to right 1 and one to right 2", function() { |
|
||||||
$multiselect.find('option:eq(0)').attr('selected', true); |
|
||||||
|
|
||||||
// Click move selected to right
|
|
||||||
$('#multi_d_rightSelected').trigger('click'); |
|
||||||
|
|
||||||
expect($multiselect.find('option').length).toBe(12); |
|
||||||
expect($multiselect_to.find('option').length).toBe(1); |
|
||||||
expect($multiselect_to_2.find('option').length).toBe(0); |
|
||||||
|
|
||||||
$multiselect.find('option:eq(0)').attr('selected', true); |
|
||||||
|
|
||||||
// Click move selected to right
|
|
||||||
$('#multi_d_rightSelected_2').trigger('click'); |
|
||||||
|
|
||||||
expect($multiselect.find('option').length).toBe(11); |
|
||||||
expect($multiselect_to.find('option').length).toBe(1); |
|
||||||
expect($multiselect_to_2.find('option').length).toBe(1); |
|
||||||
}); |
|
||||||
}); |
|
||||||
@ -1,142 +0,0 @@ |
|||||||
describe("with search", function() { |
|
||||||
var $multiselect, |
|
||||||
$multiselect_to; |
|
||||||
|
|
||||||
beforeEach(function() { |
|
||||||
var html = '<div class="row">'+ |
|
||||||
' <div class="col-xs-5">'+ |
|
||||||
' <select name="from[]" id="search" 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="search_rightAll" class="btn btn-block"><i class="glyphicon glyphicon-forward"></i></button>'+ |
|
||||||
' <button type="button" id="search_rightSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-right"></i></button>'+ |
|
||||||
' <button type="button" id="search_leftSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-left"></i></button>'+ |
|
||||||
' <button type="button" id="search_leftAll" class="btn btn-block"><i class="glyphicon glyphicon-backward"></i></button>'+ |
|
||||||
' </div>'+ |
|
||||||
' '+ |
|
||||||
' <div class="col-xs-5">'+ |
|
||||||
' <select name="to[]" id="search_to" class="form-control" size="8" multiple="multiple"></select>'+ |
|
||||||
' </div>'+ |
|
||||||
'</div>'; |
|
||||||
|
|
||||||
jasmine.getFixtures().set(html); |
|
||||||
|
|
||||||
$multiselect = $('#search').multiselect({ |
|
||||||
search: { |
|
||||||
left: '<input type="text" name="q" class="form-control" placeholder="Search..." />', |
|
||||||
right: '<input type="text" name="q" class="form-control" placeholder="Search..." />', |
|
||||||
}, |
|
||||||
fireSearch: function(value) { |
|
||||||
return value.length > 3; |
|
||||||
} |
|
||||||
}); |
|
||||||
$multiselect_to = $('#search_to'); |
|
||||||
}); |
|
||||||
|
|
||||||
it("multiselect is instantiated and contains options", function() { |
|
||||||
expect($multiselect.attr('id')).toBe('search'); |
|
||||||
expect($multiselect.find('option').length).toBe(5); |
|
||||||
|
|
||||||
expect($multiselect_to.attr('id')).toBe('search_to'); |
|
||||||
expect($multiselect_to.find('option').length).toBe(0); |
|
||||||
}); |
|
||||||
|
|
||||||
it("move all to right", function() { |
|
||||||
// Click move all to right
|
|
||||||
$('#search_rightAll').trigger('click'); |
|
||||||
|
|
||||||
expect($multiselect.find('option').length).toBe(0); |
|
||||||
expect($multiselect_to.find('option').length).toBe(5); |
|
||||||
}); |
|
||||||
|
|
||||||
it("move one to right", function() { |
|
||||||
$multiselect.find('option:eq(0)').attr('selected', true); |
|
||||||
|
|
||||||
// Click move selected to right
|
|
||||||
$('#search_rightSelected').trigger('click'); |
|
||||||
|
|
||||||
expect($multiselect.find('option').length).toBe(4); |
|
||||||
expect($multiselect_to.find('option').length).toBe(1); |
|
||||||
}); |
|
||||||
|
|
||||||
it("move all selected to right", function() { |
|
||||||
$multiselect.find('option:nth-child(2n)').attr('selected', true); |
|
||||||
|
|
||||||
// Click move selected to right
|
|
||||||
$('#search_rightSelected').trigger('click'); |
|
||||||
|
|
||||||
expect($multiselect.find('option').length).toBe(3); |
|
||||||
expect($multiselect_to.find('option').length).toBe(2); |
|
||||||
}); |
|
||||||
|
|
||||||
it("move all to left", function() { |
|
||||||
// Click move all to right
|
|
||||||
$('#search_rightAll').trigger('click'); |
|
||||||
|
|
||||||
// Click move all to left
|
|
||||||
$('#search_leftAll').trigger('click'); |
|
||||||
|
|
||||||
expect($multiselect.find('option').length).toBe(5); |
|
||||||
expect($multiselect_to.find('option').length).toBe(0); |
|
||||||
}); |
|
||||||
|
|
||||||
it("move one to left", function() { |
|
||||||
// Click move all to right
|
|
||||||
$('#search_rightAll').trigger('click'); |
|
||||||
|
|
||||||
$multiselect_to.find('option:eq(0)').attr('selected', true); |
|
||||||
|
|
||||||
// Click move selected to right
|
|
||||||
$('#search_leftSelected').trigger('click'); |
|
||||||
|
|
||||||
expect($multiselect.find('option').length).toBe(1); |
|
||||||
expect($multiselect_to.find('option').length).toBe(4); |
|
||||||
}); |
|
||||||
|
|
||||||
it("move all selected to left", function() { |
|
||||||
// Click move all to right
|
|
||||||
$('#search_rightAll').trigger('click'); |
|
||||||
|
|
||||||
$multiselect_to.find('option:nth-child(2n)').attr('selected', true); |
|
||||||
|
|
||||||
// Click move selected to right
|
|
||||||
$('#search_leftSelected').trigger('click'); |
|
||||||
|
|
||||||
expect($multiselect.find('option').length).toBe(2); |
|
||||||
expect($multiselect_to.find('option').length).toBe(3); |
|
||||||
}); |
|
||||||
|
|
||||||
it("search on the left side", function() { |
|
||||||
// Search for "Item 1"
|
|
||||||
$('#search').prev('[name="q"]').val('Item 1').trigger('keyup'); |
|
||||||
|
|
||||||
expect($multiselect.find('option:visible').length).toBe(1); |
|
||||||
|
|
||||||
// Search for "Item"
|
|
||||||
$('#search').prev('[name="q"]').val('Item').trigger('keyup'); |
|
||||||
|
|
||||||
expect($multiselect.find('option:visible').length).toBe(5); |
|
||||||
}); |
|
||||||
|
|
||||||
it("search on the right side", function() { |
|
||||||
// Click move all to right
|
|
||||||
$('#search_rightAll').trigger('click'); |
|
||||||
|
|
||||||
// Search for "Item 1"
|
|
||||||
$('#search_to').prev('[name="q"]').val('Item 1').trigger('keyup'); |
|
||||||
|
|
||||||
expect($multiselect_to.find('option:visible').length).toBe(1); |
|
||||||
|
|
||||||
// Search for "Item"
|
|
||||||
$('#search_to').prev('[name="q"]').val('Item').trigger('keyup'); |
|
||||||
|
|
||||||
expect($multiselect_to.find('option:visible').length).toBe(5); |
|
||||||
}); |
|
||||||
}); |
|
||||||
@ -1,193 +0,0 @@ |
|||||||
describe("undo redo", function() { |
|
||||||
var $multiselect, |
|
||||||
$multiselect_to; |
|
||||||
|
|
||||||
beforeEach(function() { |
|
||||||
var html = '<div class="row">'+ |
|
||||||
' <div class="col-xs-5">'+ |
|
||||||
' <select name="from[]" id="undo_redo" class="form-control" size="13" multiple="multiple">'+ |
|
||||||
' <option value="1">C++</option>'+ |
|
||||||
' <option value="2">C#</option>'+ |
|
||||||
' <option value="3">Haskell</option>'+ |
|
||||||
' <option value="4">Java</option>'+ |
|
||||||
' <option value="5">JavaScript</option>'+ |
|
||||||
' <option value="6">Lisp</option>'+ |
|
||||||
' <option value="7">Lua</option>'+ |
|
||||||
' <option value="8">MATLAB</option>'+ |
|
||||||
' <option value="9">NewLISP</option>'+ |
|
||||||
' <option value="10">PHP</option>'+ |
|
||||||
' <option value="11">Perl</option>'+ |
|
||||||
' <option value="12">SQL</option>'+ |
|
||||||
' <option value="13">Unix shell</option>'+ |
|
||||||
' </select>'+ |
|
||||||
' </div>'+ |
|
||||||
' '+ |
|
||||||
' <div class="col-xs-2">'+ |
|
||||||
' <button type="button" id="undo_redo_undo" class="btn btn-primary btn-block">undo</button>'+ |
|
||||||
' <button type="button" id="undo_redo_rightAll" class="btn btn-default btn-block"><i class="glyphicon glyphicon-forward"></i></button>'+ |
|
||||||
' <button type="button" id="undo_redo_rightSelected" class="btn btn-default btn-block"><i class="glyphicon glyphicon-chevron-right"></i></button>'+ |
|
||||||
' <button type="button" id="undo_redo_leftSelected" class="btn btn-default btn-block"><i class="glyphicon glyphicon-chevron-left"></i></button>'+ |
|
||||||
' <button type="button" id="undo_redo_leftAll" class="btn btn-default btn-block"><i class="glyphicon glyphicon-backward"></i></button>'+ |
|
||||||
' <button type="button" id="undo_redo_redo" class="btn btn-warning btn-block">redo</button>'+ |
|
||||||
' </div>'+ |
|
||||||
' '+ |
|
||||||
' <div class="col-xs-5">'+ |
|
||||||
' <select name="to[]" id="undo_redo_to" class="form-control" size="13" multiple="multiple"></select>'+ |
|
||||||
' </div>'+ |
|
||||||
'</div>'; |
|
||||||
|
|
||||||
jasmine.getFixtures().set(html); |
|
||||||
|
|
||||||
$multiselect = $('#undo_redo').multiselect(); |
|
||||||
$multiselect_to = $('#undo_redo_to'); |
|
||||||
}); |
|
||||||
|
|
||||||
it("multiselect is instantiated and contains options", function() { |
|
||||||
expect($multiselect.attr('id')).toBe('undo_redo'); |
|
||||||
expect($multiselect.find('option').length).toBe(13); |
|
||||||
|
|
||||||
expect($multiselect_to.attr('id')).toBe('undo_redo_to'); |
|
||||||
expect($multiselect_to.find('option').length).toBe(0); |
|
||||||
}); |
|
||||||
|
|
||||||
it("move all to right", function() { |
|
||||||
// Click move all to right
|
|
||||||
$('#undo_redo_rightAll').trigger('click'); |
|
||||||
|
|
||||||
expect($multiselect.find('option').length).toBe(0); |
|
||||||
expect($multiselect_to.find('option').length).toBe(13); |
|
||||||
}); |
|
||||||
|
|
||||||
it("move one to right", function() { |
|
||||||
$multiselect.find('option:eq(0)').attr('selected', true); |
|
||||||
|
|
||||||
// Click move selected to right
|
|
||||||
$('#undo_redo_rightSelected').trigger('click'); |
|
||||||
|
|
||||||
expect($multiselect.find('option').length).toBe(12); |
|
||||||
expect($multiselect_to.find('option').length).toBe(1); |
|
||||||
}); |
|
||||||
|
|
||||||
it("move all selected to right", function() { |
|
||||||
$multiselect.find('option:nth-child(2n)').attr('selected', true); |
|
||||||
|
|
||||||
// Click move selected to right
|
|
||||||
$('#undo_redo_rightSelected').trigger('click'); |
|
||||||
|
|
||||||
expect($multiselect.find('option').length).toBe(7); |
|
||||||
expect($multiselect_to.find('option').length).toBe(6); |
|
||||||
}); |
|
||||||
|
|
||||||
it("move all to left", function() { |
|
||||||
// Click move all to right
|
|
||||||
$('#undo_redo_rightAll').trigger('click'); |
|
||||||
|
|
||||||
// Click move all to left
|
|
||||||
$('#undo_redo_leftAll').trigger('click'); |
|
||||||
|
|
||||||
expect($multiselect.find('option').length).toBe(13); |
|
||||||
expect($multiselect_to.find('option').length).toBe(0); |
|
||||||
}); |
|
||||||
|
|
||||||
it("move one to left", function() { |
|
||||||
// Click move all to right
|
|
||||||
$('#undo_redo_rightAll').trigger('click'); |
|
||||||
|
|
||||||
$multiselect_to.find('option:eq(0)').attr('selected', true); |
|
||||||
|
|
||||||
// Click move selected to right
|
|
||||||
$('#undo_redo_leftSelected').trigger('click'); |
|
||||||
|
|
||||||
expect($multiselect.find('option').length).toBe(1); |
|
||||||
expect($multiselect_to.find('option').length).toBe(12); |
|
||||||
}); |
|
||||||
|
|
||||||
it("move all selected to left", function() { |
|
||||||
// Click move all to right
|
|
||||||
$('#undo_redo_rightAll').trigger('click'); |
|
||||||
|
|
||||||
$multiselect_to.find('option:nth-child(2n)').attr('selected', true); |
|
||||||
|
|
||||||
// Click move selected to right
|
|
||||||
$('#undo_redo_leftSelected').trigger('click'); |
|
||||||
|
|
||||||
expect($multiselect.find('option').length).toBe(6); |
|
||||||
expect($multiselect_to.find('option').length).toBe(7); |
|
||||||
}); |
|
||||||
|
|
||||||
it("move one to right then undo", function() { |
|
||||||
$multiselect.find('option:eq(0)').attr('selected', true); |
|
||||||
|
|
||||||
// Click move selected to right
|
|
||||||
$('#undo_redo_rightSelected').trigger('click'); |
|
||||||
|
|
||||||
expect($multiselect.find('option').length).toBe(12); |
|
||||||
expect($multiselect_to.find('option').length).toBe(1); |
|
||||||
|
|
||||||
// Click undo
|
|
||||||
$('#undo_redo_undo').trigger('click'); |
|
||||||
|
|
||||||
expect($multiselect.find('option').length).toBe(13); |
|
||||||
expect($multiselect_to.find('option').length).toBe(0); |
|
||||||
}); |
|
||||||
|
|
||||||
it("move one to right then undo then redo", function() { |
|
||||||
$multiselect.find('option:eq(0)').attr('selected', true); |
|
||||||
|
|
||||||
// Click move selected to right
|
|
||||||
$('#undo_redo_rightSelected').trigger('click'); |
|
||||||
|
|
||||||
expect($multiselect.find('option').length).toBe(12); |
|
||||||
expect($multiselect_to.find('option').length).toBe(1); |
|
||||||
|
|
||||||
// Click undo
|
|
||||||
$('#undo_redo_undo').trigger('click'); |
|
||||||
|
|
||||||
expect($multiselect.find('option').length).toBe(13); |
|
||||||
expect($multiselect_to.find('option').length).toBe(0); |
|
||||||
|
|
||||||
// Click redo
|
|
||||||
$('#undo_redo_redo').trigger('click'); |
|
||||||
|
|
||||||
expect($multiselect.find('option').length).toBe(12); |
|
||||||
expect($multiselect_to.find('option').length).toBe(1); |
|
||||||
}); |
|
||||||
|
|
||||||
it("move all selected to right then undo", function() { |
|
||||||
$multiselect.find('option:nth-child(2n)').attr('selected', true); |
|
||||||
|
|
||||||
// Click move selected to right
|
|
||||||
$('#undo_redo_rightSelected').trigger('click'); |
|
||||||
|
|
||||||
expect($multiselect.find('option').length).toBe(7); |
|
||||||
expect($multiselect_to.find('option').length).toBe(6); |
|
||||||
|
|
||||||
// Click undo
|
|
||||||
$('#undo_redo_undo').trigger('click'); |
|
||||||
|
|
||||||
expect($multiselect.find('option').length).toBe(13); |
|
||||||
expect($multiselect_to.find('option').length).toBe(0); |
|
||||||
}); |
|
||||||
|
|
||||||
it("move all selected to right then undo then redo", function() { |
|
||||||
$multiselect.find('option:nth-child(2n)').attr('selected', true); |
|
||||||
|
|
||||||
// Click move selected to right
|
|
||||||
$('#undo_redo_rightSelected').trigger('click'); |
|
||||||
|
|
||||||
expect($multiselect.find('option').length).toBe(7); |
|
||||||
expect($multiselect_to.find('option').length).toBe(6); |
|
||||||
|
|
||||||
// Click undo
|
|
||||||
$('#undo_redo_undo').trigger('click'); |
|
||||||
|
|
||||||
expect($multiselect.find('option').length).toBe(13); |
|
||||||
expect($multiselect_to.find('option').length).toBe(0); |
|
||||||
|
|
||||||
// Click redo
|
|
||||||
$('#undo_redo_redo').trigger('click'); |
|
||||||
|
|
||||||
expect($multiselect.find('option').length).toBe(7); |
|
||||||
expect($multiselect_to.find('option').length).toBe(6); |
|
||||||
}); |
|
||||||
}); |
|
||||||
@ -1,115 +0,0 @@ |
|||||||
if (typeof window === 'undefined') { |
|
||||||
var jsdom = require("jsdom"); |
|
||||||
global.document = jsdom.jsdom(); |
|
||||||
global.window = global.document.defaultView; |
|
||||||
var navigator = {userAgent: "node-js", platform: "Linux i686"}; |
|
||||||
global.window.navigator = global.navigator = navigator; |
|
||||||
navigator.platform = "Linux i686"; |
|
||||||
global.jQuery = global.$ = require("jquery"); |
|
||||||
} |
|
||||||
|
|
||||||
describe("zero configuration", function() { |
|
||||||
var $multiselect, |
|
||||||
$multiselect_to; |
|
||||||
|
|
||||||
beforeEach(function() { |
|
||||||
var html = '<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>'; |
|
||||||
|
|
||||||
jasmine.getFixtures().set(html); |
|
||||||
|
|
||||||
$multiselect = $('#multiselect').multiselect(); |
|
||||||
$multiselect_to = $('#multiselect_to'); |
|
||||||
}); |
|
||||||
|
|
||||||
it("multiselect is instantiated and contains options", function() { |
|
||||||
expect($multiselect.attr('id')).toBe('multiselect'); |
|
||||||
expect($multiselect.find('option').length).toBe(5); |
|
||||||
|
|
||||||
expect($multiselect_to.attr('id')).toBe('multiselect_to'); |
|
||||||
expect($multiselect_to.find('option').length).toBe(0); |
|
||||||
}); |
|
||||||
|
|
||||||
it("move all to right", function() { |
|
||||||
// Click move all to right
|
|
||||||
$('#multiselect_rightAll').trigger('click'); |
|
||||||
|
|
||||||
expect($multiselect.find('option').length).toBe(0); |
|
||||||
}); |
|
||||||
|
|
||||||
it("move one to right", function() { |
|
||||||
$multiselect.find('option:eq(0)').attr('selected', true); |
|
||||||
|
|
||||||
// Click move selected to right
|
|
||||||
$('#multiselect_rightSelected').trigger('click'); |
|
||||||
|
|
||||||
expect($multiselect.find('option').length).toBe(4); |
|
||||||
expect($multiselect_to.find('option').length).toBe(1); |
|
||||||
}); |
|
||||||
|
|
||||||
it("move all selected to right", function() { |
|
||||||
$multiselect.find('option:nth-child(2n)').attr('selected', true); |
|
||||||
|
|
||||||
// Click move selected to right
|
|
||||||
$('#multiselect_rightSelected').trigger('click'); |
|
||||||
|
|
||||||
expect($multiselect.find('option').length).toBe(3); |
|
||||||
expect($multiselect_to.find('option').length).toBe(2); |
|
||||||
}); |
|
||||||
|
|
||||||
it("move all to left", function() { |
|
||||||
// Click move all to right
|
|
||||||
$('#multiselect_rightAll').trigger('click'); |
|
||||||
|
|
||||||
// Click move all to left
|
|
||||||
$('#multiselect_leftAll').trigger('click'); |
|
||||||
|
|
||||||
expect($multiselect.find('option').length).toBe(5); |
|
||||||
}); |
|
||||||
|
|
||||||
it("move one to left", function() { |
|
||||||
// Click move all to right
|
|
||||||
$('#multiselect_rightAll').trigger('click'); |
|
||||||
|
|
||||||
$multiselect_to.find('option:eq(0)').attr('selected', true); |
|
||||||
|
|
||||||
// Click move selected to right
|
|
||||||
$('#multiselect_leftSelected').trigger('click'); |
|
||||||
|
|
||||||
expect($multiselect.find('option').length).toBe(1); |
|
||||||
expect($multiselect_to.find('option').length).toBe(4); |
|
||||||
}); |
|
||||||
|
|
||||||
it("move all selected to left", function() { |
|
||||||
// Click move all to right
|
|
||||||
$('#multiselect_rightAll').trigger('click'); |
|
||||||
|
|
||||||
$multiselect_to.find('option:nth-child(2n)').attr('selected', true); |
|
||||||
|
|
||||||
// Click move selected to right
|
|
||||||
$('#multiselect_leftSelected').trigger('click'); |
|
||||||
|
|
||||||
expect($multiselect.find('option').length).toBe(2); |
|
||||||
expect($multiselect_to.find('option').length).toBe(3); |
|
||||||
}); |
|
||||||
}); |
|
||||||
@ -1,36 +0,0 @@ |
|||||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" |
|
||||||
"http://www.w3.org/TR/html4/loose.dtd"> |
|
||||||
<html> |
|
||||||
<head> |
|
||||||
<title>Jasmine Test Runner</title> |
|
||||||
<link rel="stylesheet" type="text/css" href="lib/jasmine.css"> |
|
||||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> |
|
||||||
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script> |
|
||||||
<script type="text/javascript" src="lib/jasmine.js"></script> |
|
||||||
<script type="text/javascript" src="lib/jasmine-html.js"></script> |
|
||||||
<script type="text/javascript" src="lib/jasmine-jquery-1.1.2.js"></script> |
|
||||||
<script type="text/javascript" src="lib/jquery.simulate.js"></script> |
|
||||||
|
|
||||||
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> |
|
||||||
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> |
|
||||||
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.js"></script> |
|
||||||
<script type="text/javascript" src="dist/js/multiselect.min.js"></script> |
|
||||||
|
|
||||||
<!-- include spec files here... --> |
|
||||||
<script type="text/javascript" src="spec/zero-configuration.spec.js"></script> |
|
||||||
<script type="text/javascript" src="spec/data-options.spec.js"></script> |
|
||||||
<script type="text/javascript" src="spec/javascript-options.spec.js"></script> |
|
||||||
<script type="text/javascript" src="spec/search.spec.js"></script> |
|
||||||
<script type="text/javascript" src="spec/keep-rendering-sort.spec.js"></script> |
|
||||||
<script type="text/javascript" src="spec/undo-redo.spec.js"></script> |
|
||||||
<script type="text/javascript" src="spec/multiple-destinations.spec.js"></script> |
|
||||||
</head> |
|
||||||
<body> |
|
||||||
|
|
||||||
<script type="text/javascript"> |
|
||||||
jasmine.getEnv().addReporter(new jasmine.TrivialReporter()); |
|
||||||
jasmine.getEnv().execute(); |
|
||||||
</script> |
|
||||||
|
|
||||||
</body> |
|
||||||
</html> |
|
||||||
Loading…
Reference in new issue