jeena/en.javascript.info
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

init

Browse source
This commit is contained in:
Ilya Kantor 2014-10-26 22:10:13 +03:00
parent 06f61d8ce8
commit f301cb744d
2271 changed files with 103162 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

1
02-ui/05-widgets/04-template-lodash/03-menu-template/solution/.plnkr Executable file
View file

@ -0,0 +1 @@
{"name":"menu-template-a","plunk":"kTkuJd7oCcI1i3AtfFCw"}

44
02-ui/05-widgets/04-template-lodash/03-menu-template/solution/index.html Executable file
View file

@ -0,0 +1,44 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="menu.css">
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></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>
<script type="text/template" id="menu-list-template">
<ul>
<% for(var key in items) { %>
<li><a href="#<%-key%>"><%-items[key]%></li>
<% } %>
</ul>
</script>
<script>
var menu = new Menu({
title: "Сладости",
template: _.template($('#menu-template').html()),
listTemplate: _.template($('#menu-list-template').html()),
items: {
"donut": "Пончик",
"cake": "Пирожное",
"chocolate": "Шоколадка"
}
});
$(document.body).append(menu.getElem());
menu.open();
</script>
</body>
</html>

1
02-ui/05-widgets/04-template-lodash/03-menu-template/solution/menu-template-a/.plnkr Executable file
View file

@ -0,0 +1 @@
{"name":"menu-template-a","plunk":"kTkuJd7oCcI1i3AtfFCw"}

44
02-ui/05-widgets/04-template-lodash/03-menu-template/solution/menu-template-a/index.html Executable file
View file

@ -0,0 +1,44 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="menu.css">
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></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>
<script type="text/template" id="menu-list-template">
<ul>
<% for(var key in items) { %>
<li><a href="#<%-key%>"><%-items[key]%></li>
<% } %>
</ul>
</script>
<script>
var menu = new Menu({
title: "Сладости",
template: _.template($('#menu-template').html()),
listTemplate: _.template($('#menu-list-template').html()),
items: {
"donut": "Пончик",
"cake": "Пирожное",
"chocolate": "Шоколадка"
}
});
$(document.body).append(menu.getElem());
menu.open();
</script>
</body>
</html>

20
02-ui/05-widgets/04-template-lodash/03-menu-template/solution/menu-template-a/menu.css Executable file
View file

@ -0,0 +1,20 @@
.menu ul {
display: none;
margin: 0;
}
.menu .title {
font-weight: bold;
cursor: pointer;
background: url(http://js.cx/clipart/arrow-right.png) left center no-repeat;
padding-left: 18px;
}
.menu.open ul {
display: block;
}
.menu.open .title {
background-image: url(http://js.cx/clipart/arrow-down.png);
}

55
02-ui/05-widgets/04-template-lodash/03-menu-template/solution/menu-template-a/menu.js Executable file
View file

@ -0,0 +1,55 @@
function Menu(options) {
var elem;
function getElem() {
if (!elem) render();
return elem;
}
function render() {
var elemHtml = options.template({title: options.title});
elem = $(elemHtml);
elem.on('mousedown selectstart', false);
elem.on('click', '.title', onTitleClick);
elem.on('click', 'a', onItemClick)
}
function renderItems() {
if (elem.find('ul').length) return;
var listHtml = options.listTemplate({items: options.items});
elem.append(listHtml);
}
function onItemClick(e) {
alert(e.currentTarget.getAttribute('href').slice(1));
e.preventDefault();
}
function onTitleClick(e) {
toggle();
}
function open() {
renderItems();
elem.addClass('open');
};
function close() {
elem.removeClass('open');
};
function toggle() {
if (elem.hasClass('open')) close();
else open();
};
this.getElem = getElem;
this.toggle = toggle;
this.close = close;
this.open = open;
}

20
02-ui/05-widgets/04-template-lodash/03-menu-template/solution/menu.css Executable file
View file

@ -0,0 +1,20 @@
.menu ul {
display: none;
margin: 0;
}
.menu .title {
font-weight: bold;
cursor: pointer;
background: url(http://js.cx/clipart/arrow-right.png) left center no-repeat;
padding-left: 18px;
}
.menu.open ul {
display: block;
}
.menu.open .title {
background-image: url(http://js.cx/clipart/arrow-down.png);
}

55
02-ui/05-widgets/04-template-lodash/03-menu-template/solution/menu.js Executable file
View file

@ -0,0 +1,55 @@
function Menu(options) {
var elem;
function getElem() {
if (!elem) render();
return elem;
}
function render() {
var elemHtml = options.template({title: options.title});
elem = $(elemHtml);
elem.on('mousedown selectstart', false);
elem.on('click', '.title', onTitleClick);
elem.on('click', 'a', onItemClick)
}
function renderItems() {
if (elem.find('ul').length) return;
var listHtml = options.listTemplate({items: options.items});
elem.append(listHtml);
}
function onItemClick(e) {
alert(e.currentTarget.getAttribute('href').slice(1));
e.preventDefault();
}
function onTitleClick(e) {
toggle();
}
function open() {
renderItems();
elem.addClass('open');
};
function close() {
elem.removeClass('open');
};
function toggle() {
if (elem.hasClass('open')) close();
else open();
};
this.getElem = getElem;
this.toggle = toggle;
this.close = close;
this.open = open;
}