Permalink
Fetching contributors…
Cannot retrieve contributors at this time
109 lines (95 sloc) 3.34 KB
<!DOCTYPE 5>
<html>
<head>
<title>Dropdown component</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="../build/build.css" />
<style>
ul.custom-menu {
background-color: #333;
color: white;
}
ul.custom-menu li a {
color: #8cc;
}
</style>
</head>
<body>
<h2>Dropdown</h2>
<p>Click <a id="dropdown" href="#">here</a> to open an inline dropdown.</p>
<p>Dropdown menu: <span class="dropdown-link menu1">Fruits</span></p>
<p>Dropdown menu (multiple): <span class="dropdown-link multiple">Fruits</span></p>
<p>No-selectable dropdown menu: <span class="dropdown-link menu2"><em>Select</em></span></p>
<p>Into input element: <input class="dropdown-link dropdown-input" value ="Fruits" /></p>
<script src="../build/build.js"></script>
<script>
var Dropdown = require('dropdown');
var n = 0;
// 1 - simple dropdown
var dropdown = Dropdown('#dropdown')
.option('selectable', false)
.option('menu', false)
.add('Add item', function(){ n++; dropdown.add('new ' + n + ' item'); })
.add('edit-item', 'Edit <em>item</em>', function(){ console.log('edit'); })
.add('Remove "Add item"', function(){ dropdown.remove('add-item'); })
.on('select', function(slug) { console.log(slug); })
// 2 - dropdown menu
var dropdownMenu = Dropdown('.menu1', {
menu: 'right',
items: [
['apple', '<em>Apple</em>', function(){ console.log('Apple !!') }]
, ['orange', '<strong style="color: #f86">orange</strong>']
, ['banana']
, ['strawberry', function() {
console.log('remove the orange');
dropdownMenu.remove('orange');
}
]
]
, classname: 'custom-menu'
});
// 3 - dropdown menu (multiple)
var multiDropdown = Dropdown('.multiple', {
items: [
['apple', '<em>Apple</em>', function(){ console.log('Apple !!') }]
, ['orange', '<strong style="color: #f86">orange</strong>']
, 'banana'
, 'strawberry'
, ['empty', 'Empty Dropdown', function() { multiDropdown.empty(); }]
]
, classname: 'custom-menu'
, selectable: false
, multiple: true
});
multiDropdown.on('focus', function(item) {
console.log('focus `%s`', item);
});
multiDropdown.on('select', function(item) {
console.log('select `%s`', item);
});
multiDropdown.on('check', function(item, checked) {
console.log('check `%s` - checked: ', item, checked);
});
multiDropdown.on('uncheck', function(item, checked) {
console.log('uncheck `%s` - cheched: ', item, checked);
});
// 4 - no selectable dropdown menu
Dropdown('.menu2', {
items: [
['car']
, ['trucks']
, ['aeroplanes', function(slug){ console.log('Aero !!') }]
]
, selectable: false
});
// 5 - into an input element
Dropdown('.dropdown-input', {
items: [
['car']
, ['trucks']
, ['aeroplanes', function(slug){ console.log('Aero !!') }]
]
});
</script>
</body>
</html>