|
Поговорим о...
|
|
| AleXStam | Дата: Четверг, 2025-06-19, 09:37 | Сообщение # 16 |
Генералиссимус
Группа: Администраторы
Сообщений: 200
Награды: 1
Репутация: 10003
Статус: Оффлайн
| document.addEventListener('DOMContentLoaded', function() {
// Обработка кликов по переключателям
document.querySelectorAll('.tree-toggle').forEach(toggle => {
toggle.addEventListener('click', function(e) {
e.stopPropagation();
const parentLi = this.closest('li');
parentLi.classList.toggle('open');
parentLi.classList.toggle('closed');
});
});
// Программно открываем элементы с state: "open"
document.querySelectorAll('.has-children.open').forEach(item => {
const childUl = item.querySelector('ul');
if (childUl) {
childUl.style.display = 'block';
}
});
});
|
|
|
| |
| AleXStam | Дата: Четверг, 2025-06-19, 13:35 | Сообщение # 17 |
|
Генералиссимус
Группа: Администраторы
Сообщений: 200
Награды: 1
Репутация: 10003
Статус: Оффлайн
| {{ $level := .level | default 1 }}
<ul class="tree level-{{ $level }}">
{{ range .nodes }}
<li class="{{ if .children }}has-children{{ end }} {{ .state | default "closed" }}">
{{ if .children }}
<span class="toggle">▶</span>
{{ end }}
<span class="item">{{ .name }}</span>
{{ if .children }}
{{ partial "tree" (dict "nodes" .children "level" (add $level 1)) }}
{{ end }}
</li>
{{ end }}
</ul>
<style>
.tree {
list-style: none;
padding-left: 20px;
}
.tree li {
margin: 5px 0;
position: relative;
}
.toggle {
cursor: pointer;
position: absolute;
left: -15px;
user-select: none;
}
.tree ul {
display: none;
}
.tree .open > ul {
display: block;
}
.tree .open > .toggle {
transform: rotate(90deg);
}
</style>
<script>
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('.toggle').forEach(toggle => {
toggle.addEventListener('click', (e) => {
e.target.parentElement.classList.toggle('open');
e.target.parentElement.classList.toggle('closed');
});
});
});
</script>
|
|
|
| |
| AleXStam | Дата: Четверг, 2025-06-19, 13:35 | Сообщение # 18 |
|
Генералиссимус
Группа: Администраторы
Сообщений: 200
Награды: 1
Репутация: 10003
Статус: Оффлайн
| <div class="tree-container">
{{ partial "tree" (dict "nodes" .Page.Params.tree) }}
</div>
|
|
|
| |
| AleXStam | Дата: Четверг, 2025-06-19, 14:10 | Сообщение # 19 |
|
Генералиссимус
Группа: Администраторы
Сообщений: 200
Награды: 1
Репутация: 10003
Статус: Оффлайн
| {{ $level := .level | default 1 }}
<ul class="tree-menu level-{{ $level }}">
{{ range .nodes }}
<li class="tree-item {{ if .children }}has-children{{ end }} {{ .state | default "closed" }}">
<div class="tree-node">
{{ if .children }}
<span class="tree-toggle">▶</span>
{{ else }}
<span class="tree-spacer">•</span>
{{ end }}
<span class="tree-label">{{ .name }}</span>
</div>
{{ if .children }}
{{ partial "tree" (dict "nodes" .children "level" (add $level 1)) }}
{{ end }}
</li>
{{ end }}
</ul>
<style>
/* Основные стили дерева */
.tree-menu {
list-style: none;
padding-left: 0;
margin: 0;
line-height: 1.6;
}
.tree-item {
position: relative;
padding-left: 20px;
margin: 4px 0;
}
.tree-node {
display: flex;
align-items: center;
min-height: 24px;
}
.tree-toggle, .tree-spacer {
position: absolute;
left: 0;
width: 16px;
text-align: center;
font-size: 12px;
color: #666;
cursor: pointer;
user-select: none;
transition: transform 0.2s;
}
.tree-toggle {
left: 2px;
}
.tree-label {
margin-left: 5px;
}
/* Состояния */
.tree-item.open > .tree-toggle {
transform: rotate(90deg);
}
.tree-item.has-children > .tree-label {
font-weight: 500;
}
/* Вложенные уровни */
.tree-menu ul {
display: none;
padding-left: 20px;
margin: 4px 0;
}
.tree-item.open > ul {
display: block;
}
/* Подсветка при наведении */
.tree-node:hover {
color: #0066cc;
}
.tree-node:hover .tree-toggle,
.tree-node:hover .tree-spacer {
color: #0066cc;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('.tree-toggle').forEach(toggle => {
toggle.addEventListener('click', (e) => {
e.stopPropagation();
const parent = e.target.closest('.tree-item');
parent.classList.toggle('open');
parent.classList.toggle('closed');
});
});
});
</script>
|
|
|
| |
| AleXStam | Дата: Четверг, 2025-06-19, 14:10 | Сообщение # 20 |
|
Генералиссимус
Группа: Администраторы
Сообщений: 200
Награды: 1
Репутация: 10003
Статус: Оффлайн
| <div class="tree-wrapper">
{{ partial "tree" (dict "nodes" .Page.Params.tree) }}
</div>
|
|
|
| |
| AleXStam | Дата: Четверг, 2025-06-19, 14:10 | Сообщение # 21 |
|
Генералиссимус
Группа: Администраторы
Сообщений: 200
Награды: 1
Репутация: 10003
Статус: Оффлайн
| /* Дополнительные стили для контейнера */
.tree-wrapper {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-size: 15px;
color: #333;
padding: 15px;
background: #f9f9f9;
border-radius: 6px;
border: 1px solid #eee;
max-width: 100%;
overflow-x: auto;
}
/* Вертикальные линии для древовидной структуры */
.tree-menu .tree-item {
position: relative;
}
.tree-menu .tree-item:before {
content: "";
position: absolute;
top: -4px;
bottom: 50%;
left: 10px;
width: 1px;
background: #ddd;
}
.tree-menu .tree-item:after {
content: "";
position: absolute;
top: 50%;
bottom: -4px;
left: 10px;
width: 1px;
background: #ddd;
}
.tree-menu .tree-item:last-child:after {
display: none;
}
.tree-menu .tree-item .tree-node:before {
content: "";
position: absolute;
top: 50%;
left: 10px;
width: 10px;
height: 1px;
background: #ddd;
}
|
|
|
| |
| AleXStam | Дата: Четверг, 2025-06-19, 14:31 | Сообщение # 22 |
|
Генералиссимус
Группа: Администраторы
Сообщений: 200
Награды: 1
Репутация: 10003
Статус: Оффлайн
| {{ $level := .level | default 1 }}
<ul class="tree-menu level-{{ $level }}">
{{ range .nodes }}
<li class="tree-item {{ if .children }}has-children{{ end }} {{ .state | default "closed" }}">
<div class="tree-node">
{{ if .children }}
<span class="tree-toggle">▶</span>
{{ else }}
<span class="tree-spacer"></span>
{{ end }}
<span class="tree-label">{{ .name }}</span>
</div>
{{ if .children }}
{{ partial "tree" (dict "nodes" .children "level" (add $level 1)) }}
{{ end }}
</li>
{{ end }}
</ul>
<style>
/* Базовые стили */
.tree-menu {
list-style: none;
padding-left: 0;
margin: 0;
line-height: 1.6;
position: relative;
}
.tree-item {
position: relative;
padding-left: 24px;
margin: 2px 0;
}
.tree-node {
display: flex;
align-items: center;
min-height: 24px;
cursor: pointer;
position: relative;
}
.tree-toggle, .tree-spacer {
position: absolute;
left: 0;
width: 16px;
height: 16px;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
color: #555;
transition: all 0.2s;
user-select: none;
}
.tree-spacer {
color: #999;
}
.tree-spacer:before {
content: "•";
}
.tree-label {
margin-left: 6px;
padding: 2px 0;
}
/* Состояния */
.tree-item.open > .tree-node > .tree-toggle {
transform: rotate(90deg);
color: #0066cc;
}
.tree-item.has-children > .tree-node > .tree-label {
font-weight: 500;
}
/* Вложенные уровни */
.tree-menu ul {
display: none;
padding-left: 20px;
margin: 2px 0;
}
.tree-item.open > ul {
display: block;
}
/* Линии соединения */
.tree-item:not(:first-child):before {
content: "";
position: absolute;
top: -12px;
left: 12px;
height: 100%;
border-left: 1px solid #ddd;
}
.tree-item:after {
content: "";
position: absolute;
top: 12px;
left: 12px;
width: 12px;
border-bottom: 1px solid #ddd;
}
/* Убираем лишние линии */
.tree-menu > .tree-item:first-child:before {
display: none;
}
.tree-item:last-child:before {
height: 12px;
}
/* Подсветка */
.tree-node:hover {
color: #0066cc;
}
.tree-node:hover .tree-toggle,
.tree-node:hover .tree-spacer {
color: #0066cc;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('.tree-node').forEach(node => {
node.addEventListener('click', (e) => {
const parentItem = node.closest('.tree-item');
if (parentItem.classList.contains('has-children')) {
e.stopPropagation();
parentItem.classList.toggle('open');
parentItem.classList.toggle('closed');
}
});
});
});
</script>
|
|
|
| |
| AleXStam | Дата: Четверг, 2025-06-19, 14:31 | Сообщение # 23 |
|
Генералиссимус
Группа: Администраторы
Сообщений: 200
Награды: 1
Репутация: 10003
Статус: Оффлайн
| <div class="tree-container">
{{ partial "tree" (dict "nodes" .Page.Params.tree) }}
</div>
<style>
.tree-container {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-size: 15px;
color: #333;
padding: 10px 15px;
background: #f9f9f9;
border-radius: 6px;
border: 1px solid #eee;
max-width: 100%;
}
</style>
|
|
|
| |
| AleXStam | Дата: Четверг, 2025-06-19, 14:36 | Сообщение # 24 |
|
Генералиссимус
Группа: Администраторы
Сообщений: 200
Награды: 1
Репутация: 10003
Статус: Оффлайн
| {{ $level := .level | default 1 }}
<ul class="tree-menu level-{{ $level }}">
{{ range .nodes }}
<li class="tree-item {{ if .children }}has-children{{ end }} {{ .state | default "closed" }}">
<div class="tree-node">
{{ if .children }}
<span class="tree-toggle">▶</span>
{{ else }}
<span class="tree-spacer"></span>
{{ end }}
<span class="tree-label">{{ .name }}</span>
</div>
{{ if .children }}
{{ partial "tree" (dict "nodes" .children "level" (add $level 1)) }}
{{ end }}
</li>
{{ end }}
</ul>
<style>
/* Базовые стили */
.tree-menu {
list-style: none;
padding-left: 24px;
margin: 0;
line-height: 1.8;
position: relative;
}
.tree-item {
position: relative;
padding-left: 8px;
margin: 0;
}
.tree-node {
display: flex;
align-items: center;
min-height: 24px;
cursor: pointer;
position: relative;
padding: 2px 0;
}
.tree-toggle, .tree-spacer {
position: absolute;
left: -20px;
width: 16px;
height: 16px;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
color: #555;
transition: all 0.2s;
user-select: none;
background: white;
z-index: 1;
}
.tree-spacer {
color: #999;
}
.tree-spacer:before {
content: "•";
}
.tree-label {
margin-left: 0;
padding: 0 4px;
position: relative;
z-index: 2;
}
/* Состояния */
.tree-item.open > .tree-node > .tree-toggle {
transform: rotate(90deg);
color: #0066cc;
}
.tree-item.has-children > .tree-node > .tree-label {
font-weight: 500;
}
/* Вложенные уровни */
.tree-menu ul {
display: none;
margin: 2px 0;
}
.tree-item.open > ul {
display: block;
}
/* Вертикальные линии соединения */
.tree-menu:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 12px;
border-left: 1px solid #ddd;
}
/* Горизонтальные линии */
.tree-item:before {
content: "";
position: absolute;
top: 16px;
left: 12px;
width: 12px;
border-bottom: 1px solid #ddd;
}
/* Подсветка */
.tree-node:hover {
color: #0066cc;
}
.tree-node:hover .tree-toggle,
.tree-node:hover .tree-spacer {
color: #0066cc;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('.tree-node').forEach(node => {
node.addEventListener('click', (e) => {
const parentItem = node.closest('.tree-item');
if (parentItem.classList.contains('has-children')) {
e.stopPropagation();
parentItem.classList.toggle('open');
parentItem.classList.toggle('closed');
}
});
});
// Инициализация открытых элементов
document.querySelectorAll('.tree-item.open').forEach(item => {
const childrenList = item.querySelector('ul');
if (childrenList) childrenList.style.display = 'block';
});
});
</script>
|
|
|
| |
| AleXStam | Дата: Четверг, 2025-06-19, 14:41 | Сообщение # 25 |
|
Генералиссимус
Группа: Администраторы
Сообщений: 200
Награды: 1
Репутация: 10003
Статус: Оффлайн
| {{ $level := .level | default 1 }}
<ul class="tree-menu level-{{ $level }}">
{{ range .nodes }}
<li class="tree-item {{ if .children }}has-children{{ end }} {{ .state | default "closed" }}">
<div class="tree-node">
{{ if .children }}
<span class="tree-toggle">▶</span>
{{ else }}
<span class="tree-spacer"></span>
{{ end }}
<span class="tree-label">{{ .name }}</span>
</div>
{{ if .children }}
{{ partial "tree" (dict "nodes" .children "level" (add $level 1)) }}
{{ end }}
</li>
{{ end }}
</ul>
<style>
/* Базовые стили */
.tree-menu {
list-style: none;
padding-left: 24px;
margin: 0;
line-height: 1.8;
position: relative;
}
.tree-item {
position: relative;
padding-left: 4px;
margin: 0;
}
.tree-node {
display: flex;
align-items: center;
min-height: 26px;
cursor: pointer;
position: relative;
padding: 2px 0;
}
.tree-toggle, .tree-spacer {
position: absolute;
left: -20px;
width: 16px;
height: 16px;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
color: #555;
transition: all 0.2s;
user-select: none;
background: white;
z-index: 2;
}
.tree-spacer {
color: #999;
}
.tree-spacer:before {
content: "•";
font-size: 14px;
}
.tree-label {
margin-left: 0;
padding: 0 4px;
position: relative;
z-index: 1;
}
/* Состояния */
.tree-item.open > .tree-node > .tree-toggle {
transform: rotate(90deg);
color: #0066cc;
}
.tree-item.has-children > .tree-node > .tree-label {
font-weight: 500;
}
/* Вложенные уровни */
.tree-menu ul {
display: none;
margin: 2px 0;
}
.tree-item.open > ul {
display: block;
}
/* Вертикальные линии */
.tree-menu:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 12px;
border-left: 1px solid #e0e0e0;
}
/* Горизонтальные линии */
.tree-item:before {
content: "";
position: absolute;
top: 50%;
left: 12px;
width: 8px;
margin-top: -1px;
border-bottom: 1px solid #e0e0e0;
}
/* Убираем лишние линии для последнего элемента */
.tree-item:last-child:before {
height: 50%;
bottom: auto;
}
/* Подсветка */
.tree-node:hover {
color: #0066cc;
}
.tree-node:hover .tree-toggle,
.tree-node:hover .tree-spacer {
color: #0066cc;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('.tree-node').forEach(node => {
node.addEventListener('click', (e) => {
const parentItem = node.closest('.tree-item');
if (parentItem.classList.contains('has-children')) {
e.stopPropagation();
parentItem.classList.toggle('open');
parentItem.classList.toggle('closed');
}
});
});
});
</script>
|
|
|
| |
| AleXStam | Дата: Четверг, 2025-06-19, 14:51 | Сообщение # 26 |
|
Генералиссимус
Группа: Администраторы
Сообщений: 200
Награды: 1
Репутация: 10003
Статус: Оффлайн
| {{ $level := .level | default 1 }}
<ul class="custom-tree level-{{ $level }}">
{{ range .nodes }}
<li class="tree-node {{ if .children }}has-children{{ end }} {{ .state | default "closed" }}">
<div class="tree-item">
{{ if .children }}
<span class="tree-arrow">›</span>
{{ end }}
<span class="tree-content">{{ .name }}</span>
</div>
{{ if .children }}
{{ partial "tree" (dict "nodes" .children "level" (add $level 1)) }}
{{ end }}
</li>
{{ end }}
</ul>
<style>
/* Базовый сброс стилей */
.custom-tree {
list-style: none;
padding-left: 0;
margin: 0;
position: relative;
}
/* Стили узла */
.tree-node {
position: relative;
padding-left: 24px;
margin: 0;
line-height: 1.6;
}
.tree-item {
display: flex;
align-items: center;
padding: 4px 0;
cursor: pointer;
position: relative;
min-height: 24px;
}
/* Стрелки */
.tree-arrow {
position: absolute;
left: 4px;
width: 16px;
height: 16px;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
color: #666;
transition: transform 0.2s;
transform-origin: center;
}
.tree-node.open > .tree-item > .tree-arrow {
transform: rotate(90deg);
color: #0066cc;
}
.tree-content {
padding-left: 8px;
position: relative;
}
/* Вертикальные линии */
.tree-node:not(:last-child)::after {
content: "";
position: absolute;
top: 20px;
bottom: 0;
left: 12px;
width: 1px;
background: #e0e0e0;
}
/* Горизонтальные линии */
.tree-node::before {
content: "";
position: absolute;
top: 16px;
left: 12px;
width: 12px;
height: 1px;
background: #e0e0e0;
}
/* Скрытие вложенных уровней */
.tree-node > ul {
display: none;
padding-left: 24px;
}
.tree-node.open > ul {
display: block;
}
/* Убираем лишние линии для последнего элемента */
.tree-node:last-child::after {
display: none;
}
/* Подсветка при наведении */
.tree-item:hover {
color: #0066cc;
}
.tree-item:hover .tree-arrow {
color: #0066cc;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Делегирование событий для работы с динамическим контентом
document.querySelectorAll('.custom-tree').forEach(tree => {
tree.addEventListener('click', function(e) {
const item = e.target.closest('.tree-item');
if (!item) return;
const node = item.parentElement;
if (node.classList.contains('has-children')) {
e.stopPropagation();
node.classList.toggle('open');
node.classList.toggle('closed');
}
});
});
});
</script>
|
|
|
| |
| AleXStam | Дата: Четверг, 2025-06-19, 14:51 | Сообщение # 27 |
|
Генералиссимус
Группа: Администраторы
Сообщений: 200
Награды: 1
Репутация: 10003
Статус: Оффлайн
| <div class="tree-viewer">
{{ partial "tree" (dict "nodes" .Page.Params.tree) }}
</div>
<style>
.tree-viewer {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 15px;
color: #333;
padding: 12px 16px;
background: #fff;
border-radius: 8px;
border: 1px solid #eee;
max-width: 100%;
overflow-x: auto;
}
/* Улучшенные стрелки */
.tree-arrow {
font-family: 'Courier New', monospace;
font-weight: bold;
}
</style>
|
|
|
| |
| AleXStam | Дата: Четверг, 2025-06-19, 14:55 | Сообщение # 28 |
|
Генералиссимус
Группа: Администраторы
Сообщений: 200
Награды: 1
Репутация: 10003
Статус: Оффлайн
| tree:
- name: "Основной раздел"
state: "open"
children:
- name: "Подраздел A"
children:
- name: "Элемент 1"
- name: "Элемент 2"
children:
- name: "Подэлемент a"
- name: "Подэлемент b"
- name: "Подраздел B"
state: "closed"
children:
- name: "Элемент X"
- name: "Элемент Y"
|
|
|
| |
| AleXStam | Дата: Четверг, 2025-06-19, 15:01 | Сообщение # 29 |
|
Генералиссимус
Группа: Администраторы
Сообщений: 200
Награды: 1
Репутация: 10003
Статус: Оффлайн
| {{ $level := .level | default 1 }}
<ul class="isolated-tree" data-level="{{ $level }}">
{{ range .nodes }}
<li class="tree-li {{ if .children }}has-children{{ end }} {{ .state | default 'closed' }}">
<div class="tree-row">
{{ if .children }}
<span class="tree-arrow">▸</span>
{{ else }}
<span class="tree-bullet">•</span>
{{ end }}
<span class="tree-text">{{ .name }}</span>
</div>
{{ if .children }}
{{ partial "tree" (dict "nodes" .children "level" (add $level 1)) }}
{{ end }}
</li>
{{ end }}
</ul>
<style>
/* Полная изоляция стилей */
.isolated-tree {
all: initial;
list-style: none;
padding-left: 0;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 15px;
line-height: 1.5;
color: #333;
}
.tree-li {
all: initial;
display: block;
position: relative;
padding-left: 28px;
margin: 0;
min-height: 26px;
}
.tree-row {
all: initial;
display: flex;
align-items: center;
position: relative;
padding: 3px 0;
cursor: pointer;
}
/* Стрелки с абсолютным позиционированием */
.tree-arrow, .tree-bullet {
all: initial;
position: absolute;
left: 8px;
width: 16px;
height: 16px;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
color: #666;
pointer-events: none;
background: white;
z-index: 2;
}
.tree-bullet {
color: #999;
font-size: 18px;
left: 7px;
}
.tree-text {
all: initial;
display: inline-block;
padding-left: 8px;
position: relative;
z-index: 1;
}
/* Линии соединения */
.tree-li::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 16px;
width: 1px;
background: #e0e0e0;
z-index: 1;
}
.tree-li::after {
content: "";
position: absolute;
top: 16px;
left: 16px;
width: 12px;
height: 1px;
background: #e0e0e0;
z-index: 1;
}
/* Убираем лишние линии */
.tree-li:last-child::before {
height: 16px;
}
/* Состояния */
.tree-li.open > .tree-row > .tree-arrow {
transform: rotate(90deg);
color: #0066cc;
}
.tree-li.open > .tree-row {
font-weight: 500;
}
.tree-li > ul {
display: none;
}
.tree-li.open > ul {
display: block;
}
/* Подсветка */
.tree-row:hover {
color: #0066cc;
}
.tree-row:hover .tree-arrow,
.tree-row:hover .tree-bullet {
color: #0066cc;
}
</style>
<script>
(function() {
document.addEventListener('DOMContentLoaded', function() {
document.querySelectorAll('.isolated-tree').forEach(function(tree) {
tree.addEventListener('click', function(e) {
const row = e.target.closest('.tree-row');
if (!row) return;
const li = row.closest('.tree-li');
if (li.classList.contains('has-children')) {
e.stopPropagation();
li.classList.toggle('open');
li.classList.toggle('closed');
}
});
});
});
})();
</script>
|
|
|
| |
| AleXStam | Дата: Четверг, 2025-06-19, 15:03 | Сообщение # 30 |
|
Генералиссимус
Группа: Администраторы
Сообщений: 200
Награды: 1
Репутация: 10003
Статус: Оффлайн
| <div class="tree-container" style="all:initial;display:block;padding:15px;background:#fff;border-radius:8px;border:1px solid #eee;margin:10px 0;">
{{ partial "tree" (dict "nodes" .Page.Params.tree) }}
</div>
|
|
|
| |
