46 lines
1.9 KiB
HTML
46 lines
1.9 KiB
HTML
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<script src="multiselectcomponent.js"></script>
|
|
</head>
|
|
<body>
|
|
<div style="width: 50%; float: left;" id="left"></div>
|
|
<div style="width: 50%; float: right;" id="right"></div>
|
|
|
|
<script type="application/javascript">
|
|
// Sample data.
|
|
var data1 = [
|
|
{id: 1, name: 'Peter', surname: 'Hrdlica'},
|
|
{id: 6, name: 'Vojtěch', surname: 'Hrdlica'},
|
|
{id: 2, name: 'Michal', surname: 'Kváček'},
|
|
{id: 19, name: 'Miček', surname: 'Je kokot!'},
|
|
{id: 13, name: 'Mirek', surname: 'Mráček'},
|
|
{id: 11, name: 'Naděžda', surname: 'Zímová'}
|
|
];
|
|
|
|
var data2 = [
|
|
{id: 2, name: 'wanna', surname: 'know'},
|
|
{id: 6, name: 'Batman', surname: 'insulted'},
|
|
{id: 58, name: 'scream', surname: 'pushed'},
|
|
{id: 19, name: 'Mob', surname: 'why'},
|
|
{id: 63, name: 'eight', surname: 'begin'},
|
|
{id: 4, name: 'you', surname: 'emotions'}
|
|
];
|
|
data1.sort(function(a, b) { return a.id > b.id; }); // Sort by ID, lowest first.
|
|
data2.sort(function(a, b) { return a.id > b.id; }); // Sort by ID, lowest first.
|
|
|
|
// Js component instance
|
|
var mscL = new MultiSelectComponent('contacts', data1, 'id', function(item) { return item.name + ' ' + item.surname; });
|
|
var mscR = new MultiSelectComponent('users', data2, 'id', function(item) { return item.name + ' ' + item.surname; });
|
|
// Generated data added to template
|
|
var left = document.getElementById('left');
|
|
var right = document.getElementById('right');
|
|
left.innerHTML = mscL.createTemplate();
|
|
right.innerHTML = mscR.createTemplate();
|
|
|
|
// Initialization. May be done in more elegant way if the template is created ie. on server.
|
|
mscL.init();
|
|
mscR.init();
|
|
</script>
|
|
</body>
|
|
</html> |