1. Include the latest version of jQuery library and jQuery UI from google CDN.
2. Include jQuery fieldChooser plugin after jQuery javascript library.
view source:
3.Markup html structure.
view source:
<pre lang="text">
Item 1
Item 2
Item 3
Item 4
Item 5
...
4.The javascript.
view source
<script>
$(document).ready(function () {
var $chooser = $("#fieldChooser").fieldChooser();
var $sourceFields = $("#sourceFields").children();
$chooser.getSourceList().add($sourceFields);
});
</script>
5. Using CSS as per required
div#sourceFields {
display: none;
}
div#fieldChooser {
width: 350px;
}
.fc-field {
margin: 0 0 0 0;
padding: 5px;
font-size: 1.2em;
width: 120px;
outline: #777777 ridge thin;
background-color: #cccccc;
}
.fc-selected {
background-color: #999999;
}
.fc-field-list {
margin: 0;
padding: 3px 3px 3px 3px;
margin-right: 10px;
outline: #333333 solid thin;
height: 600px;
width: 150px;
overflow: scroll;
}
.fc-source-fields {
float: left;
}
.fc-destination-fields {
float: right;
}