OrderList is applied to select element. Items
can either be populated from the option elements or using the datasource that can be a local javascript array or function to load the array.
$('#list').puiorderlist();
<select id="list"></select>
$(function() {
var themes = new Array('afterdark', 'afternoon', 'afterwork', 'aristo', 'black-tie', 'blitzer', 'bluesky', 'bootstrap', 'casablanca', 'cruze',
'cupertino', 'dark-hive', 'dot-luv', 'eggplant', 'excite-bike', 'flick', 'glass-x', 'home', 'hot-sneaks', 'humanity', 'le-frog', 'midnight',
'mint-choc', 'overcast', 'pepper-grinder', 'redmond', 'rocket', 'sam', 'smoothness', 'south-street', 'start', 'sunny', 'swanky-purse', 'trontastic',
'ui-darkness', 'ui-lightness', 'vader');
$('#basic').puiorderlist();
$('#advanced').puiorderlist({
controlsLocation: 'left',
caption: 'Themes',
effect: 'bounce',
responsive: true,
datasource: themes,
content: function(option) {
return $('<div class="ui-helper-clearfix"><img src="resources/demo/images/themes/' + option.text() + '.png" alt="" style="float:left"/><span style="float:left; margin-left:15px; font-size:20px">' + option.text() + '</span></div>');
}
});
$('#doc').puitabview();
});
<div class="pui-grid pui-grid-responsive">
<div class="pui-grid-row">
<div class="pui-grid-col-6">
<h3 class="first">Basic</h3>
<select id="basic">
<option value="1">Volkswagen</option>
<option value="2">Ford</option>
<option value="3">Mercedes</option>
<option value="4">Audi</option>
<option value="5">BMW</option>
<option value="6">Honda</option>
<option value="7">Porsche</option>
<option value="8">Chevrolet</option>
<option value="9">Jaguar</option>
</select>
</div>
<div class="pui-grid-col-6">
<h3>Advanced</h3>
<select id="advanced"></select>
</div>
</div>
</div>