52 lines
No EOL
1.5 KiB
HTML
Executable file
52 lines
No EOL
1.5 KiB
HTML
Executable file
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<link rel="stylesheet" href="menu.css">
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js"></script>
|
|
<script src="https://cdn.polyfill.io/v1/polyfill.js?features=Element.prototype.closest"></script>
|
|
<script src="menu.js"></script>
|
|
</head>
|
|
<body>
|
|
|
|
<script type="text/template" id="menu-template">
|
|
<div class="menu">
|
|
<span class="title"><%-title%></span>
|
|
</div>
|
|
</script>
|
|
|
|
<!--
|
|
встроенная браузерная функция encodeURIComponent кодирует спец-символы для URL,
|
|
например русские буквы и пробелы
|
|
в этом примере русских букв в ключах items нет, но потенциально они возможны
|
|
-->
|
|
<script type="text/template" id="menu-list-template">
|
|
<ul>
|
|
<% for(var name in items) { %>
|
|
<li><a href="#<%=encodeURIComponent(name)%>"><%-items[name]%></a></li>
|
|
<% } %>
|
|
</ul>
|
|
</script>
|
|
|
|
<script>
|
|
var menu = new Menu({
|
|
title: "Сладости",
|
|
template: _.template( document.getElementById('menu-template').innerHTML.trim()),
|
|
listTemplate: _.template( document.getElementById('menu-list-template').innerHTML.trim()),
|
|
items: {
|
|
cake: "Торт", // cake <a href="#cake">Торт</a>
|
|
donut: "Пончик", // donut
|
|
chokolate: "Шоколадка" // chokolate
|
|
},
|
|
onselect: showSelected
|
|
});
|
|
|
|
function showSelected(itemName) {
|
|
alert(itemName);
|
|
}
|
|
|
|
document.body.appendChild(menu.getElem());
|
|
</script>
|
|
|
|
</body>
|
|
</html> |