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

renovations

Browse source
This commit is contained in:
Ilya Kantor 2015-03-07 19:26:10 +03:00
parent dceccedb58
commit 6ac9e3a500
182 changed files with 275 additions and 324 deletions
Download patch file Download diff file Expand all files Collapse all files

2
8-css-for-js/4-float/2-tree-with-multiline-nodes/solution.md Normal file
View file

@ -0,0 +1,2 @@
Для решения можно применить принцип двухколоночной верстки `float` + `margin`. Иконка будет левой колонкой, а содержимое -- правой.

63
8-css-for-js/4-float/2-tree-with-multiline-nodes/solution.view/index.html Normal file
View file

@ -0,0 +1,63 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.icon {
width: 16px;
height: 16px;
float: left;
}
.open .icon {
cursor: pointer;
background: url(https://js.cx/sprite-tree/minus.gif);
}
.closed .icon {
cursor: pointer;
background: url(https://js.cx/sprite-tree/plus.gif);
}
.leaf .icon {
cursor: text;
background: url(https://js.cx/sprite-tree/article.gif);
}
li {
list-style: none;
}
.text {
margin: 6px 0 6px 16px;
}
</style>
</head>
<body>
<ul>
<li class="open">
<div class="icon"></div>
<div class="text">Раздел 1<br>(занимает две строки)</div>
<ul>
<li class="closed">
<div class="icon"></div>
<div class="text">Раздел 1.1</div>
</li>
<li class="leaf">
<div class="icon"></div>
<div class="text">Страница 1.2<br>(занимает две строки)</div>
</li>
</ul>
</li>
<li class="closed">
<div class="icon"></div>
<div class="text">Раздел 2<br>(занимает две строки)</div>
</li>
</ul>
</body>
</html>

39
8-css-for-js/4-float/2-tree-with-multiline-nodes/source.view/index.html Normal file
View file

@ -0,0 +1,39 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
/* ваш стиль */
</style>
</head>
<body>
<!-- картинки для узлов -->
<img src="https://js.cx/sprite-tree/minus.gif" width="16" height="16">
<img src="https://js.cx/sprite-tree/plus.gif" width="16" height="16">
<img src="https://js.cx/sprite-tree/article.gif" width="16" height="16">
<ul>
<li class="open">
<div class="icon"></div>
<div class="text">Раздел 1<br>(занимает две строки)</div>
<ul>
<li class="closed">
<div class="icon"></div>
<div class="text">Раздел 1.1</div>
</li>
<li class="leaf">
<div class="icon"></div>
<div class="text">Страница 1.2<br>(занимает две строки)</div>
</li>
</ul>
</li>
<li class="closed">
<div class="icon"></div>
<div class="text">Раздел 2<br>(занимает две строки)</div>
</li>
</ul>
</body>
</html>

18
8-css-for-js/4-float/2-tree-with-multiline-nodes/task.md Normal file
View file

@ -0,0 +1,18 @@
# Дерево с многострочными узлами
[importance 3]
Сделайте дерево при помощи семантической вёрстки и CSS-спрайта с иконками (есть готовый).
Выглядеть должно так (не кликабельно):
[iframe src="solution" border="1" height=200 link edit]
<ul>
<li>Поддержка многострочных названий узлов</li>
<li>Над иконкой курсор становится указателем.</li>
</ul>
Исходный документ содержит список UL/LI и ссылку на картинку.
P.S. Достаточно сделать HTML/CSS-структуру, действия добавим позже.