ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Tree Table CSS
20 сообщений из 45, страница 2 из 2
  2  все
Tree Table CSS
    #38720265
7Lexus
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
7Lexus
Гость
user89,

Здравствуйте
Очень понравилось как вы сделали такое красивое решение.

Прошу Вас помочь и мне.
У меня уже есть готовое решение, оно меня устраивает по контексту и разметке, но..... помогите ещё выравнять картинку (плюс/минус) относительно текста и границ таблицы, чтоб было ровненько.

КОД + Пример

Спасибо большое заранее!
...
Рейтинг: 0 / 0
14.08.2014, 14:06
| Ответить | Цитировать | Написать  
Tree Table CSS
    #38720564
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
user89
Участник
7Lexus,

я сейчас занят сильно, когда освобожусь не знаю...
Посмотрите еще универсальный алгоритм, который делает любое количество групп на выбор.
Здесь группировка реализуется на JavaScript. На входе имеем обычную, простую таблицу безо всяких идентификаторов строки, стилей и т.д. На сервере не делаем ничего (клиенту отдаем обычный HTML вида <tr> <td> </td> </tr>) 16127786   Результат: http://jsfiddle.net/NZaw4/55/embedded/result/
...
Рейтинг: 0 / 0
14.08.2014, 16:56
| Ответить | Цитировать | Написать  
Tree Table CSS
    #38720584
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
я бы первые <td></td> <td></td> <td></td> в каждой строке заменил бы на colspan=3 или 2
...
Рейтинг: 0 / 0
14.08.2014, 17:09
| Ответить | Цитировать | Написать  
Tree Table CSS
    #38720628
7Lexus
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
7Lexus
Гость
user89,

Спасибо вам - это решение просто прекрасно, я уже оценил...

Но у меня у же всё как бы сделано и то, что уже есть - меня устраивает.
Мне нужна только "косметическая" доработка.

Я не могу сообразить как поставить надпись "Отчеты" рядом с плюсиком (минусиком) и ровно относительно верхней и нижней границы таблицы. И всё.

.. не.. ну если некогда, тогда что уж.. я понимаю
...
Рейтинг: 0 / 0
14.08.2014, 17:40
| Ответить | Цитировать | Написать  
Tree Table CSS
    #38720799
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
user89
Участник
7Lexus,

тут у картинок был большой размер. Поменял на свои. Также сделал display:inline-block;
http://learn.javascript.ru/play/B8h1p

ИМХО
- картинки лучше передавать не через тег <img>, а через base64 или спрайты
- эффект замедления при сворачивании/разворачивании раздражает сотрудников (им нужно быстрее увидеть результат, а тут тормоза, особенно если часто пользуются деревом при работе)
- jQuery здесь не нужен, даже ради эффекта замедления :))
...
Рейтинг: 0 / 0
14.08.2014, 23:03
| Ответить | Цитировать | Написать  
Tree Table CSS
    #38720866
7Lexus
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
7Lexus
Гость
user89,

Отменный результат!!!
Даже не высказать словами! Самое, что доктор прописал!

Огромное спасибо.
Про задержку абсолютно согласен. Тоже считаю, что в таких именно решениях она ни к чему.
...
Рейтинг: 0 / 0
15.08.2014, 06:00
| Ответить | Цитировать | Написать  
Tree Table CSS
    #38721548
7Lexus
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
7Lexus
Гость
user89,

У меня сайт на Битриксе и это меня бесит просто

После сохранения в редакторе код скрипта
Код: javascript
1.
2.
3.
4.
5.
6.
$(window).load(function(){
$(document).ready(function(){
$('.spoiler').prepend('<img class="plus" src="http://f6.s.qip.ru/IRG4yukf.png"><img class="minus" src="http://f5.s.qip.ru/IRG4yukg.png"> ').addClass('plus');
$('.spoiler').click(function() {$(this).toggleClass('plus minus').next().slideToggle(300);});
});
});



превращается в
Код: javascript
1.
2.
3.
4.
5.
6.
$(window).load(function(){
$(document).ready(function(){
$('.spoiler').prepend('<img id="bxid_495307" class="plus" src="http://f6.s.qip.ru/IRG4yukf.png"  /><img id="bxid_903419" class="minus" src="http://f5.s.qip.ru/IRG4yukg.png"  /> ').addClass('plus');
$('.spoiler').click(function() {$(this).toggleClass('plus minus').next().slideToggle(300);});
});
});



и перестает работать открытие закрытие и не отображаются значки плюс/минус

как быть? кто подскажет?
...
Рейтинг: 0 / 0
15.08.2014, 19:08
| Ответить | Цитировать | Написать  
Tree Table CSS
    #38721572
7Lexus
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
7Lexus
Гость
И ещё...

если в первых ветках поставить body open (чтобы по при открытии страницы эти ветки были сразу открыты), то по идее должен стоять значок "минус" (потому что уже открыто), а стоит значок "плюс"

например так:
Код: html
1.
2.
3.
4.
5.
6.
7.
<body>
<div class="header">
<div class="spoiler" style="background:#F8FBEF;">Отчеты</div>
<div class="body open">
<div class="spoiler">2014</div>
<div class="body open">
<table>
...
Рейтинг: 0 / 0
15.08.2014, 20:04
| Ответить | Цитировать | Написать  
Tree Table CSS
    #38721661
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
user89
Участник
7Lexus,

когда-то рисовал простое дерево без JavaScript http://jsfiddle.net/NZaw4/1/   (работает в нормальных браузерах и IE9+)
С jQuery я не работал... Он точно нужен в этом проекте?

Пока есть время, переделайте архитектуру. вадя дал правильный совет (сверстать на таблицах и объединить ячейки через colspan )
Для сворачивания/разворачивания узлов достаточно простого JavaScript...
Переделать на основе шаблона, думаю займет около часа.
 
Шаблончик
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<style>
.treetable {
	border-collapse:collapse;
	table-layout:fixed;
	width:500px;
}
.treetable th {display:none;}
.treetable td {
	padding:3px;
	border:1px solid #D3D3D3;
}
.treetable label a{
	cursor:pointer;
	color:#FFFFFF;
	font-weight:bold;
	padding-left:16px;
}
.treetable tr {display:none;}
.treetable .lev1 {
	background:#6E9ECA;
	display:table-row;
}
.lev2 {background:#708090;}
.lev3 {background:#8FA0B0;}
input[type="checkbox"]{display:none;}
input + a {
	background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAIAAAAmzuBxAAAACXBIWXMAAAsSAAALEgHS3X78AAAAkElEQVQYlXWOvRWDQAyDv/DYK2wQSro8OkpGuRFcUjJCRmEE0TldCpsjPy9qzj7Jki62Pgh4vnqbbbEWuN+use/PlArwHccWGg780psENGFY6W4YgxZIAM339WmT3m397YYxxn6aASslFfVotYLTT3NwcuTKlFpNR2sdEak4acdKeafPlE2SZ7sw/1BEtX94AXYTVmyR94mPAAAAAElFTkSuQmCC)
	no-repeat 0px 5px;
}
input:checked + a{
	background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAIAAAAmzuBxAAAACXBIWXMAAAsSAAALEgHS3X78AAAAeklEQVQYlX2PsRGDMAxFX3zeK9mAlHRcupSM4hFUUjJCRpI70VHIJr7D8BtJ977+SQ9Zf7isVG16WSQC0/D0OW/FqoBlDFkIVJ2xAhA8sI/NHbcYiFrPfI0fGklKagDx2F4ltdtaM0J9L3dxcVxi+zv62E+MwPs7c60dClRP6iug7wUAAAAASUVORK5CYII=)
	no-repeat 0px 5px;
}
</style>
</head>
<body>
<button onclick="SwapAll(false);">Свернуть все</button></a>
<button onclick="SwapAll(true);">Развернуть все</button></a>
<br><br>
<table class="treetable">
<col width=10> <col width=10>
<thead>
	<tr><th></th> <th></th> <th></th> <th></th> <th></th> </tr>
</thead>
<tr class="lev1"> <td colspan=5><label><input type="checkbox"><a onclick="sh(this)">Иванов</a></label></td> </tr>
<tr class="lev2"> <td></td> <td colspan=4><label><input type="checkbox"><a onclick="sh(this)">Проект 1</a></label></td> </tr>
<tr class="lev3"> <td colspan=2></td> <td colspan=3><label><input type="checkbox"><a onclick="sh(this)">Задача 1_1</a></label></td>	</tr>
<tr class="lev4"> <td colspan=2></td> <td>Бронебойный</td> <td>10</td> <td>20</td> </tr>
<tr class="lev4"> <td colspan=2></td> <td>Парящий</td> <td>20</td> <td>40</td> </tr>
<tr class="lev4"> <td colspan=2></td> <td>Танк</td> <td>30</td> <td>60</td> </tr>
<tr class="lev3"> <td colspan=2></td> <td colspan=3><label><input type="checkbox"><a onclick="sh(this)">Задача 1_2</a></label></td> </tr>
<tr class="lev4"> <td colspan=2></td> <td></td> <td>90</td> <td>99</td> </tr>
<tr class="lev4"> <td colspan=2></td> <td></td> <td>80</td> <td>88</td> </tr>
<tr class="lev2"> <td></td> <td colspan=4><label><input type="checkbox"><a onclick="sh(this)">Проект 2</a></label></td> </tr>
<tr class="lev3"> <td colspan=2></td> <td colspan=3><label><input type="checkbox"><a onclick="sh(this)">Задача 2_1</a></label></td> </tr>
<tr class="lev4"> <td colspan=2></td> <td></td> <td>12</td> <td>12</td> </tr>
<tr class="lev4"> <td colspan=2></td> <td></td> <td>15</td> <td>15</td> </tr>

<tr class="lev1"> <td colspan=5><label><input type="checkbox"><a onclick="sh(this)">Петров</a></label></td> </tr>
<tr class="lev2"> <td></td> <td colspan=4><label><input type="checkbox"><a onclick="sh(this)">Проект А</a></label></td> </tr>
<tr class="lev3"> <td colspan=2></td> <td colspan=3><label><input type="checkbox"><a onclick="sh(this)">Задача А</a></label></td> </tr>
<tr class="lev4"> <td colspan=2></td> <td></td> <td>100</td><td>200</td> </tr>
</table>
</body>

<script>
function ResetAll() {
	var cs = document.getElementsByTagName('input');
	for (i=0; i < cs.length; i++) {
		if (cs[i].type == 'checkbox') {
			cs[i].checked = false;
		}
	}
}

function ShowLevel(row,lv) {
	var tBody = row.parentNode;
	var i = row.rowIndex;
	row = tBody.rows[i]; // Попытка перейти к следующей строке
	while (row && row.className.substring(3)*1 > lv) {
		if (row.className.substring(3)*1 == lv+1) {
			row.style.display = 'table-row';
			if ((row.querySelector('td input')) && row.querySelector('td input').checked) {
				ShowLevel(row,lv+1);
			}
		}
		i+=1;
		row = tBody.rows[i];
	}
}

function HideLevel(row,lv) {
	var i = row.rowIndex;
	var tBody = row.parentNode;
	row = tBody.rows[i]; // Попытка перейти к следующей строке
	while (row && row.className.substring(3)*1 > lv) {
		row.style.display = 'none';
		i+=1;
		row = tBody.rows[i];
	}
}

function sh(el) {
	var row = el.parentNode.parentNode.parentNode;
	var lv = row.className.substring(3)*1; // Уровень строки, циферка после 'lev'
	if (row.querySelector('td input').checked) {
		HideLevel(row,lv);
	} else {
		ShowLevel(row,lv);
	}
}

function SwapAll(b) {
	var tbl = document.getElementsByClassName('treetable')[0];
	for (i=1; i < tbl.rows.length; i++) {
		if (tbl.rows[i].className != 'lev1') {
			if (b) {tbl.rows[i].style.display = 'table-row';}
			else {tbl.rows[i].style.display = 'none';}
		}

		if (tbl.rows[i].querySelector('td input')) {tbl.rows[i].querySelector('td input').checked = b;}
	}
}
</script>
</html>

...
Рейтинг: 0 / 0
16.08.2014, 00:26
| Ответить | Цитировать | Написать  
Tree Table CSS
    #38721747
7Lexus
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
7Lexus
Гость
user89,

Буквально вчера я именно этот проект переделал под свои нужды. Очень, между прочим, прекрасно. Правда.

Если вы ещё подскажете, как сделать чтобы при открытии изначально сразу был такой вид - было бы вообще шоколад

Именно вот так

...
Рейтинг: 0 / 0
16.08.2014, 14:51
| Ответить | Цитировать | Написать  
Tree Table CSS
    #38721762
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
user89
Участник
7Lexus,
 
так?
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<style>
.treetable {
	border-collapse:collapse;
	table-layout:fixed;
	width:700px;
}
.treetable th {display:none;}
.treetable td {
	padding:3px;
	border:1px solid #D3D3D3;
}
.treetable label a{
	cursor:pointer;
	color:#FFFFFF;
	font-weight:bold;
	padding-left:16px;
}
.treetable tr {display:none;}
.treetable .lev1 {
	background:#6E9ECA;
	display:table-row;
}
.lev2 {background:#708090;}
.lev2 td:first-child {padding-left:10px;}
input[type="checkbox"] {display:none;}
input + a {
	background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAIAAAAmzuBxAAAACXBIWXMAAAsSAAALEgHS3X78AAAAkElEQVQYlXWOvRWDQAyDv/DYK2wQSro8OkpGuRFcUjJCRmEE0TldCpsjPy9qzj7Jki62Pgh4vnqbbbEWuN+use/PlArwHccWGg780psENGFY6W4YgxZIAM339WmT3m397YYxxn6aASslFfVotYLTT3NwcuTKlFpNR2sdEak4acdKeafPlE2SZ7sw/1BEtX94AXYTVmyR94mPAAAAAElFTkSuQmCC)
	no-repeat 0px 5px;
}
input:checked + a{
	background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAIAAAAmzuBxAAAACXBIWXMAAAsSAAALEgHS3X78AAAAeklEQVQYlX2PsRGDMAxFX3zeK9mAlHRcupSM4hFUUjJCRpI70VHIJr7D8BtJ977+SQ9Zf7isVG16WSQC0/D0OW/FqoBlDFkIVJ2xAhA8sI/NHbcYiFrPfI0fGklKagDx2F4ltdtaM0J9L3dxcVxi+zv62E+MwPs7c60dClRP6iug7wUAAAAASUVORK5CYII=)
	no-repeat 0px 5px;
}
</style>
</head>
<body onload="ShowOnLoad('MyTable')">
<button onclick="SwapAll(false);">Свернуть все</button></a>
<button onclick="SwapAll(true);">Развернуть все</button></a>
<br><br>
<table class="treetable" id="MyTable">
<col width=84><col width=480>
<thead>
	<tr><th></th> <th></th> <th></th> <th></th> <th></th> </tr>
</thead>
<tr class="lev1"> <td colspan=3><label><input type="checkbox" checked><a onclick="sh(this)">Отчеты</a></label></td> </tr>
<tr class="lev2"> <td colspan=3><label><input type="checkbox" checked><a onclick="sh(this)">2014</a></label></td> </tr>
<tr class="lev3"> <td>23.01.2014</td> <td>Защитить Исследовательский центр Парения</td> <td>Империя</td> </tr>
<tr class="lev3"> <td>23.01.2014</td> <td>Освободить Комплекс по добыче воды</td> <td>Империя</td> </tr>
<tr class="lev3"> <td>24.05.2014</td> <td>Уничтожить дессикатор</td> <td>Страж свободы</td> </tr>
<tr class="lev2"> <td colspan=3><label><input type="checkbox"><a onclick="sh(this)">2013</a></label></td> </tr>
<tr class="lev3"> <td>01.04.2013</td> <td>Начало 2-го квартала</td> <td>Весна</td> </tr>
<tr class="lev3"> <td>30.06.2013</td> <td>Конец 2-го квартала</td> <td>Лето</td> </tr>
<tr class="lev3"> <td>01.10.2013</td> <td>Начало 4-го квартала</td> <td>Осень</td> </tr>
<tr class="lev2"> <td colspan=3><label><input type="checkbox"><a onclick="sh(this)">2012</a></label></td> </tr>
<tr class="lev3"> <td>А здесь</td> <td>ничего</td> <td>нет</td> </tr>
<tr class="lev3"> <td>&#160;</td> <td>&#160;</td> <td>&#160;</td> </tr>

<tr class="lev1"> <td colspan=3><label><input type="checkbox"><a onclick="sh(this)">Нормальные герои</a></label></td> </tr>
<tr class="lev2"> <td colspan=3><label><input type="checkbox"><a onclick="sh(this)">всегда идут в обход</a></label></td> </tr>
<tr class="lev3"> <td>Ходы</td> <td>кривые роет подземный умный крот.</td> <td>Нормальные</td> </tr>
<tr class="lev3"> <td>герои</td> <td>всегда идут в обход. Нормальные герои всегда идут</td> <td>в обход.</td> </tr>
<tr class="lev3"> <td>&#160;</td> <td>&#160;</td> <td>&#160;</td> </tr>
<tr class="lev2"> <td colspan=3><label><input type="checkbox"><a onclick="sh(this)">Смайлики с SQL.ru</a></label></td> </tr>
<tr class="lev3"> <td>&#160;</td> <td><a href="http://www.sql.ru/forum/actualutils.aspx?action=gotomsg&tid=394314&msg=7343885">Здесь</a></td> <td>&#160;</td> </tr>
<tr class="lev3"> <td>&#160;</td> <td>&#160;</td> <td>&#160;</td> </tr>
</table>
</body>

<script>
function ResetAll() {
	var cs = document.getElementsByTagName('input');
	for (i=0; i < cs.length; i++) {
		if (cs[i].type == 'checkbox') {
			cs[i].checked = false;
		}
	}
}

function ShowLevel(row,lv) {
	var tBody = row.parentNode;
	var i = row.rowIndex;
	row = tBody.rows[i]; // Попытка перейти к следующей строке
	while (row && row.className.substring(3)*1 > lv) {
		if (row.className.substring(3)*1 == lv+1) {
			row.style.display = 'table-row';
			if ((row.querySelector('td input')) && row.querySelector('td input').checked) {
				ShowLevel(row,lv+1);
			}
		}
		i+=1;
		row = tBody.rows[i];
	}
}

function HideLevel(row,lv) {
	var i = row.rowIndex;
	var tBody = row.parentNode;
	row = tBody.rows[i]; // Попытка перейти к следующей строке
	while (row && row.className.substring(3)*1 > lv) {
		row.style.display = 'none';
		i+=1;
		row = tBody.rows[i];
	}
}

function sh(el) {
	var row = el.parentNode.parentNode.parentNode;
	var lv = row.className.substring(3)*1; // Уровень строки, циферка после 'lev'
	if (row.querySelector('td input').checked) {
		HideLevel(row,lv);
	} else {
		ShowLevel(row,lv);
	}
}

function SwapAll(b) {
	var tbl = document.getElementsByClassName('treetable')[0];
	for (i=1; i < tbl.rows.length; i++) {
		if (tbl.rows[i].className != 'lev1') {
			if (b) {tbl.rows[i].style.display = 'table-row';}
			else {tbl.rows[i].style.display = 'none';}
		}

		if (tbl.rows[i].querySelector('td input')) {tbl.rows[i].querySelector('td input').checked = b;}
	}
}

function ShowOnLoad(idx) {
	var tbl = document.getElementById(idx);
	for (i=1; i<3; i++) {ShowLevel(tbl.rows[i],i);}
}
</script>
</html>

...
Рейтинг: 0 / 0
16.08.2014, 16:10
| Ответить | Цитировать | Написать  
Tree Table CSS
    #38721782
7Lexus
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
7Lexus
Гость
user89,

Это просто охрененно!
Спасибо огромное.!
...
Рейтинг: 0 / 0
16.08.2014, 18:24
| Ответить | Цитировать | Написать  
Tree Table CSS
    #38721783
7Lexus
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
7Lexus
Гость
7Lexususer89,

Спасибо огромное.!

 
=И ещё...mssasha@rambler.ru - если "спасибо" - это мало
...
Рейтинг: 0 / 0
16.08.2014, 18:56
| Ответить | Цитировать | Написать  
Период между сообщениями больше года.
Tree Table CSS
    #39034428
7Lexus
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
7Lexus
Гость
user897Lexus,
 
так?
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<style>
.treetable {
	border-collapse:collapse;
	table-layout:fixed;
	width:700px;
}
.treetable th {display:none;}
.treetable td {
	padding:3px;
	border:1px solid #D3D3D3;
}
.treetable label a{
	cursor:pointer;
	color:#FFFFFF;
	font-weight:bold;
	padding-left:16px;
}
.treetable tr {display:none;}
.treetable .lev1 {
	background:#6E9ECA;
	display:table-row;
}
.lev2 {background:#708090;}
.lev2 td:first-child {padding-left:10px;}
input[type="checkbox"] {display:none;}
input + a {
	background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAIAAAAmzuBxAAAACXBIWXMAAAsSAAALEgHS3X78AAAAkElEQVQYlXWOvRWDQAyDv/DYK2wQSro8OkpGuRFcUjJCRmEE0TldCpsjPy9qzj7Jki62Pgh4vnqbbbEWuN+use/PlArwHccWGg780psENGFY6W4YgxZIAM339WmT3m397YYxxn6aASslFfVotYLTT3NwcuTKlFpNR2sdEak4acdKeafPlE2SZ7sw/1BEtX94AXYTVmyR94mPAAAAAElFTkSuQmCC)
	no-repeat 0px 5px;
}
input:checked + a{
	background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAIAAAAmzuBxAAAACXBIWXMAAAsSAAALEgHS3X78AAAAeklEQVQYlX2PsRGDMAxFX3zeK9mAlHRcupSM4hFUUjJCRpI70VHIJr7D8BtJ977+SQ9Zf7isVG16WSQC0/D0OW/FqoBlDFkIVJ2xAhA8sI/NHbcYiFrPfI0fGklKagDx2F4ltdtaM0J9L3dxcVxi+zv62E+MwPs7c60dClRP6iug7wUAAAAASUVORK5CYII=)
	no-repeat 0px 5px;
}
</style>
</head>
<body onload="ShowOnLoad('MyTable')">
<button onclick="SwapAll(false);">Свернуть все</button></a>
<button onclick="SwapAll(true);">Развернуть все</button></a>
<br><br>
<table class="treetable" id="MyTable">
<col width=84><col width=480>
<thead>
	<tr><th></th> <th></th> <th></th> <th></th> <th></th> </tr>
</thead>
<tr class="lev1"> <td colspan=3><label><input type="checkbox" checked><a onclick="sh(this)">Отчеты</a></label></td> </tr>
<tr class="lev2"> <td colspan=3><label><input type="checkbox" checked><a onclick="sh(this)">2014</a></label></td> </tr>
<tr class="lev3"> <td>23.01.2014</td> <td>Защитить Исследовательский центр Парения</td> <td>Империя</td> </tr>
<tr class="lev3"> <td>23.01.2014</td> <td>Освободить Комплекс по добыче воды</td> <td>Империя</td> </tr>
<tr class="lev3"> <td>24.05.2014</td> <td>Уничтожить дессикатор</td> <td>Страж свободы</td> </tr>
<tr class="lev2"> <td colspan=3><label><input type="checkbox"><a onclick="sh(this)">2013</a></label></td> </tr>
<tr class="lev3"> <td>01.04.2013</td> <td>Начало 2-го квартала</td> <td>Весна</td> </tr>
<tr class="lev3"> <td>30.06.2013</td> <td>Конец 2-го квартала</td> <td>Лето</td> </tr>
<tr class="lev3"> <td>01.10.2013</td> <td>Начало 4-го квартала</td> <td>Осень</td> </tr>
<tr class="lev2"> <td colspan=3><label><input type="checkbox"><a onclick="sh(this)">2012</a></label></td> </tr>
<tr class="lev3"> <td>А здесь</td> <td>ничего</td> <td>нет</td> </tr>
<tr class="lev3"> <td> </td> <td> </td> <td> </td> </tr>

<tr class="lev1"> <td colspan=3><label><input type="checkbox"><a onclick="sh(this)">Нормальные герои</a></label></td> </tr>
<tr class="lev2"> <td colspan=3><label><input type="checkbox"><a onclick="sh(this)">всегда идут в обход</a></label></td> </tr>
<tr class="lev3"> <td>Ходы</td> <td>кривые роет подземный умный крот.</td> <td>Нормальные</td> </tr>
<tr class="lev3"> <td>герои</td> <td>всегда идут в обход. Нормальные герои всегда идут</td> <td>в обход.</td> </tr>
<tr class="lev3"> <td> </td> <td> </td> <td> </td> </tr>
<tr class="lev2"> <td colspan=3><label><input type="checkbox"><a onclick="sh(this)">Смайлики с SQL.ru</a></label></td> </tr>
<tr class="lev3"> <td> </td> <td><a href="http://www.sql.ru/forum/actualutils.aspx?action=gotomsg&tid=394314&msg=7343885">Здесь</a></td> <td> </td> </tr>
<tr class="lev3"> <td> </td> <td> </td> <td> </td> </tr>
</table>
</body>

<script>
function ResetAll() {
	var cs = document.getElementsByTagName('input');
	for (i=0; i < cs.length; i++) {
		if (cs[i].type == 'checkbox') {
			cs[i].checked = false;
		}
	}
}

function ShowLevel(row,lv) {
	var tBody = row.parentNode;
	var i = row.rowIndex;
	row = tBody.rows[i]; // Попытка перейти к следующей строке
	while (row && row.className.substring(3)*1 > lv) {
		if (row.className.substring(3)*1 == lv+1) {
			row.style.display = 'table-row';
			if ((row.querySelector('td input')) && row.querySelector('td input').checked) {
				ShowLevel(row,lv+1);
			}
		}
		i+=1;
		row = tBody.rows[i];
	}
}

function HideLevel(row,lv) {
	var i = row.rowIndex;
	var tBody = row.parentNode;
	row = tBody.rows[i]; // Попытка перейти к следующей строке
	while (row && row.className.substring(3)*1 > lv) {
		row.style.display = 'none';
		i+=1;
		row = tBody.rows[i];
	}
}

function sh(el) {
	var row = el.parentNode.parentNode.parentNode;
	var lv = row.className.substring(3)*1; // Уровень строки, циферка после 'lev'
	if (row.querySelector('td input').checked) {
		HideLevel(row,lv);
	} else {
		ShowLevel(row,lv);
	}
}

function SwapAll(b) {
	var tbl = document.getElementsByClassName('treetable')[0];
	for (i=1; i < tbl.rows.length; i++) {
		if (tbl.rows[i].className != 'lev1') {
			if (b) {tbl.rows[i].style.display = 'table-row';}
			else {tbl.rows[i].style.display = 'none';}
		}

		if (tbl.rows[i].querySelector('td input')) {tbl.rows[i].querySelector('td input').checked = b;}
	}
}

function ShowOnLoad(idx) {
	var tbl = document.getElementById(idx);
	for (i=1; i<3; i++) {ShowLevel(tbl.rows[i],i);}
}
</script>
</html>



user89,
Этот битрикс ломает код.
и всё из-за этой строчки (всё дело в body)

Код: html
1.
<body onload="ShowOnLoad('MyTable')">



Можно ли как-то сделать, чтобы было без слова body?
...
Рейтинг: 0 / 0
22.08.2015, 20:07
| Ответить | Цитировать | Написать  
Tree Table CSS
    #39034441
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
user89
Участник
7Lexus,

можно через тег script , в самый конец документа, типа такого
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
<body>
  ...

<script>
  ShowOnLoad('MyTable');
</script>
</body>
</html>
...
Рейтинг: 0 / 0
22.08.2015, 21:45
| Ответить | Цитировать | Написать  
Tree Table CSS
    #39034450
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
user89
Участник
Можно еще через попробовать через window onload


Я тут малость улучшил свои разработки по таблицам, может чего и пригодится...
Древовидная группирующая таблица, вариант 3
Hint подсказка всплывает, если текст не помещается в ячейке
Таблица. Фиксированный заголовок, столбец.
...
Рейтинг: 0 / 0
22.08.2015, 22:15
| Ответить | Цитировать | Написать  
Tree Table CSS
    #39039649
7Lexus
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
7Lexus
Гость
user89,

Ну всё оказывается просто.
Скрипт в конце кода решил проблему.
Спасибо.

Теперь заинтересовала тема фиксации строк и столбцов. Однако, неплохо.

Спасибо, что делаете благое дело для нас.
...
Рейтинг: 0 / 0
31.08.2015, 12:10
| Ответить | Цитировать | Написать  
Tree Table CSS
    #39040107
Фёдор К
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Фёдор К
Гость
user89...
Сделал еще вариант древовидной таблицы http://jsfiddle.net/NZaw4/10
...)
Лучше изменить стиль
Код: css
1.
2.
3.
4.
input[type="checkbox"]
{
     display: none;
}

на
Код: css
1.
2.
3.
4.
label input[type="checkbox"]
{
     display: none;
}

иначе другие чекбоксы исчезают.
...
Рейтинг: 0 / 0
01.09.2015, 01:06
| Ответить | Цитировать | Написать  
Tree Table CSS
    #39040262
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
user89
Участник
Фёдор К,

в общем, да. Просто я давно не использую стандартные Button, CheckBox, RadioButton. Каждый браузер отображает их по своему, да и располагает на экране криво. Во всех проектах я им ставлю display:none; и рисую через background
 
Самодельный Checkbox
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
<!DOCTYPE HTML>
<html>
<head>
<title>Самодельный Checkbox</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
* {font:11px Verdana,Arial;}
input[type="checkbox"] {display:none;}
input[type="checkbox"] + span {
  padding-left:16px;
  background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAIAAAD9iXMrAAAACXBIWXMAAAsSAAALEgHS3X78AAAAYklEQVQoz43RsQ2AQAwDQMfOGmzANBT0jEJLyUKsRsFDvsHgLtLFUpQYphU/kgCObb4GtkhKSZkpidS47Hw23hBJAPxEpJrzqPo86p1D5TzqnUMRt/MoIqrPo7rDIwDx878ncvgH6gjXVecAAAAASUVORK5CYII=') no-repeat;
}
input[type="checkbox"]:checked + span {
  background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAIAAAD9iXMrAAAACXBIWXMAAAsSAAALEgHS3X78AAAAnElEQVQoz43ROwoCMRAG4P/hNbyAnQiCWHgFEQsLwbN4gz2KjY29pYgIeh2LCUl0d2WnCCT5MpNMON4cMSBGAK7NPiakImxLjlHS5NAon+hDkgDoD5qeZrGWXB8CECmTC7S8rH5QbJEszjaA+XlRo/fuRbLkixyx10ZkqWvb9/Utv71GpW5uwXP7aKP6fqlPkjvR13tDdyIAHPi/H8GqHHTeOs1YAAAAAElFTkSuQmCC') no-repeat;
}
</style>
</head>
<body>
<br>
<label><input type="checkbox" checked><span>Первый checkbox</span></label>
<br><br>
<label><input type="checkbox"><span>Второй checkbox</span></label>
<br><br>
<label><input type="checkbox"><span>Третий checkbox</span></label>
<br><br><br>
<a href="http://jsfiddle.net/g78oh3cu/2/" target="_blank">http://jsfiddle.net/g78oh3cu/2/</a>
</body>
</html>

 
Самодельный Radiobutton
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
<!DOCTYPE html>
<html>
<head>
<title>Самодельный Radiobutton</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
* {font:11px Verdana,Arial;}
input[type="radio"] {display:none;}
input[type="radio"] + span {
  padding-left:16px;
  background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAA6UlEQVR42nWS74qCQBTFff21p/AZ+lLLCpsERSkumaAMgR/8IAUl+AB3+R2YoTZ34DB6zzn3z8xE0dNKksTixeIFxKK59RHHtlqvrW1bG8dR4JsY3Js4yzK73m623R1tuUqF3aFQDC6YKEmWYRgk+vre2r44CZj5x4RG7eF0zolMs72Exc/Z6saZu3RWVZWARlUYjH7JjrCqG5F936sqKMtSGrTB8JlulLXrOonu90cACdiDgYDP7sXTNAn0TwyNDH5oiDzPVcEbqEycPQz9fKwQGHz/3vhyrHMX59uhjdmL++9pIPz7NH4B18qNZO9hj3YAAAAASUVORK5CYII=') no-repeat 0 1px;
}
input[type="radio"]:checked + span {
  background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAABUElEQVR42mNgQALTFyz9n9k67X9oywIwBrFBYgzYQErL9P99247/33Pnyf9bX7+DMYgNEgPJYSieffD8/0uff/6fePrN/6R5x8AYxAaJgeTgmkBWgkw59+Hn/9RFp/+ruif+d02u/G8SmP5f1j4SLAaSA6kBOw/kTpDVINOUnWP+z955+v+Lb3//1z19+1/ENfm/jG34/xmX3oHVgNQygDwHcm/krD3/9b3i/m/4+vN/8b9//w1P/vsvs/LTf3Ej9//ZC/aD1YDUomgASWqu//hf/fC//7J7//0XXPgRLFa55MD/65+//g9vnvufIaN1OtxJIOtBzgAp5Jn/6T+PUxpYbO99iJNAasGenrD9BNhjGavOghWIG3uCMYgN8hPIBSA18DhBDtZ1N9/8790ElNx28v+xR2//3/mOFqzIcQEyBWQ1SBEIg9ggMQzFpCQNAK7TVNaTo7+RAAAAAElFTkSuQmCC') no-repeat 0 1px;
}
</style>
</head>
<body>
<br>
<label><input type="radio" name="r1"><span>Первый radiobutton</span></label>
<br><br>
<label><input type="radio" name="r1"><span>Второй radiobutton</span></label>
<br><br>
<label><input type="radio" name="r1" checked><span>Третий radiobutton</span></label>
</body>
</html>

 
Самодельный Combobox
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
<!DOCTYPE html>
<head>
<title>Самодельный Combobox</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<style>
* {margin:0; padding:0;}
.Combobox {
  background:#fff;
  font:8pt Verdana,Arial,'MS Sans Serif','sans-serif';
}
.Combobox .DivForInput {
  margin:0;
  padding:0 0 0 4px;
  height:19px;
  overflow:hidden;
  border:1px solid #B5B8C8;
}
.Combobox .DivForInput input {
  font:8pt Verdana,Arial,'MS Sans Serif','sans-serif';
  margin:0; padding:0; border:0;
  outline:none;
  height:19px;
  line-height:18px;
  float:left;
}
.cmdList {
  background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAUCAIAAAAP9fodAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAOJJREFUOE+9kEEKgmAQhes4LSJcBh0hqluVxwk6QttKCoNUcFtp4kJFd73XkPymLYagh8w/vnnfP2h/vdlOxoOeVsAeevV+xWKNuC3Si9jdkKyM4rj25NV0MGpg+DVlWVZVhYoe47Yj1xG7vYSXoiishT2cLkezFcgkSVDRw4GPKTISJnZ9C99Y55DGWmHkFkzrJLGLoTAM8zyXtDzo4cA3Y8TOTQVBkGVZvQc9HDPiui4xHB/yfZLW3EZF3w4QO3XJ87w0TVE7p8SOX4QlnRPHcYjh0IrYQS9ie72I7fT6L/YELEZQH9hMDiwAAAAASUVORK5CYII=') no-repeat 0 0;
  width:18px;
  height:20px;
  cursor:pointer;
  float:right;
}
.Combobox .ComboCont {position:absolute;  margin-top:-9999px;}
.Combobox .ComboFocused {
  display:block;
  position:absolute;
  margin-top:-1px;
  z-index:2;
  background:#fff;
  border:1px solid #B5B8C8;
  outline:none;
}
.Combobox .ComboFocused div {padding:4px 4px;}
.Combobox .ComboFocused div:hover {background:#ECF3FC;}
</style>
</head>

<body>
<button style="margin:20px;" onclick="run();">Сделать выпадающие списки</button>

<table><tr>
  <td style="width:20px;"></td>
  <td> <div class="Combobox">Исполнение,Поддержка,Управление карьерой подчинённых,Участие в наборе персонала</div> </td>
  <td style="width:50px;"></td>
  <td> <div class="Combobox" id="cbo1">a > b,a < b,a & b</div> </td>
</tr></table>

<script>
function InitCombobox() {
  var d = document.getElementsByClassName('Combobox');
  for (i=0; i < d.length; i++) {
    var s = '<div class="DivForInput"> <input type="text"> <div class="cmdList" onclick="ShowComboBox(this);"></div> </div>' +
    '<div class="ComboCont" onblur="this.className=\'ComboCont\';">';
    var arr = d[i].innerHTML.split(',');
    for (j=0; j < arr.length; j++) {s = s + '<div onclick="SetComboText(this);">' + arr[j] + '</div>';}
    s = s + '</div>';
    d[i].innerHTML = s;
    d[i].children[0].style.width = d[i].offsetWidth - 4 + 'px';    
    d[i].children[0].children[0].style.width = d[i].offsetWidth - 25 + 'px';
    d[i].children[1].style.minWidth = d[i].offsetWidth -2 + 'px';
  }
}
function SetComboText(el) {
  el.parentNode.parentNode.children[0].children[0].value = el.innerHTML.replace(/&amp;/gi,'&').replace(/&gt;/,'>').replace(/&lt;/,'<');
  el.parentNode.className = 'ComboCont';
}

function ShowComboBox(el) {
  el = el.parentNode.parentNode.children[1];
  el.className = 'ComboFocused';
  el.tabIndex = '-1';  el.focus();
}
function SetItemIndex(el,idx) {el.children[1].children[idx].click();}


function run() {
  InitCombobox();
  SetItemIndex(document.getElementById('cbo1'),2); // Установим 3-й элемент списка (нумерация с нуля)"
}
</script>
</body>
</html>

 
Самодельный CheckCombobox
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.
155.
156.
157.
158.
159.
160.
161.
162.
163.
164.
165.
166.
167.
168.
169.
170.
171.
172.
173.
174.
175.
176.
177.
178.
179.
180.
181.
182.
183.
184.
185.
186.
187.
188.
189.
190.
191.
192.
193.
194.
195.
196.
197.
198.
199.
200.
201.
202.
203.
204.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CheckCombobox</title>
<style>
.CheckCombobox, .CheckCombobox div, .CheckCombobox input {
  background-color:#fff;
  font:11px Verdana,Arial,'MS Sans Serif','sans-serif';
  margin:0; padding:0;
  box-sizing:border-box;
  position:absolute;
}
.CheckCombobox {
  width:210px; height:22px;
  border:1px solid #B5B8C8;
  position:relative;
}
.CheckCombobox .divJoinString {
  border:0;
  top:0; left:2px; bottom:2px;
  line-height:19px;
  overflow:hidden;
}
.CheckCombobox .cmdExpandList {
  background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAUCAIAAAAP9fodAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAOJJREFUOE+9kEEKgmAQhes4LSJcBh0hqluVxwk6QttKCoNUcFtp4kJFd73XkPymLYagh8w/vnnfP2h/vdlOxoOeVsAeevV+xWKNuC3Si9jdkKyM4rj25NV0MGpg+DVlWVZVhYoe47Yj1xG7vYSXoiishT2cLkezFcgkSVDRw4GPKTISJnZ9C99Y55DGWmHkFkzrJLGLoTAM8zyXtDzo4cA3Y8TOTQVBkGVZvQc9HDPiui4xHB/yfZLW3EZF3w4QO3XJ87w0TVE7p8SOX4QlnRPHcYjh0IrYQS9ie72I7fT6L/YELEZQH9hMDiwAAAAASUVORK5CYII=') no-repeat 0 0;
  width:18px; height:20px;
  cursor:pointer;
  top:0; right:0;
}
.CheckCombobox .ChkBoxFocused {
  display:block;
  left:-1px;
  z-index:2;
  border:1px solid #B5B8C8;
  outline:none;
}
.CheckCombobox .search {
  display:block;
  font-style:italic;
  width:100%; height:19px; padding:2px;
  border:0; outline:none;
  border-bottom:1px solid #eee;
}
.CheckCombobox .CheckTable {
  border-collapse:collapse;
  position:absolute;
}
.CheckCombobox td {
  padding:5px !important;
  white-space:nowrap;
}
.CheckCombobox input {display:none;}
.CheckCombobox input + span {
  padding-left:16px;
  background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAIAAAD9iXMrAAAACXBIWXMAAAsSAAALEgHS3X78AAAAYklEQVQoz43RsQ2AQAwDQMfOGmzANBT0jEJLyUKsRsFDvsHgLtLFUpQYphU/kgCObb4GtkhKSZkpidS47Hw23hBJAPxEpJrzqPo86p1D5TzqnUMRt/MoIqrPo7rDIwDx878ncvgH6gjXVecAAAAASUVORK5CYII=') no-repeat;
}
.CheckCombobox input:checked + span {
  background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAIAAAD9iXMrAAAACXBIWXMAAAsSAAALEgHS3X78AAAAnElEQVQoz43ROwoCMRAG4P/hNbyAnQiCWHgFEQsLwbN4gz2KjY29pYgIeh2LCUl0d2WnCCT5MpNMON4cMSBGAK7NPiakImxLjlHS5NAon+hDkgDoD5qeZrGWXB8CECmTC7S8rH5QbJEszjaA+XlRo/fuRbLkixyx10ZkqWvb9/Utv71GpW5uwXP7aKP6fqlPkjvR13tDdyIAHPi/H8GqHHTeOs1YAAAAAElFTkSuQmCC') no-repeat;
}
.noDisplay {left:-999999px;} /* Есть глюк в Мозилле, почему-то display:none срабатывает при щелчке в любой input, поэтому делаем большой отрицательный отступ */

#t1 td{padding:7px 2px;}
</style>
</head>
<body>
<table id="t1">
  <tr>
    <td>Широкий список, вертикальная прокрутка</td>
    <td> <div class="CheckCombobox" id="chkBox1">Строка 1&#2;Строка 2&#2;Длинное название, состоящее из многих слов&#2;Управление карьерой подчинённых&#2;Участие в наборе персонала&#2;Некий пункт 1&#2;Некий пункт 2&#2;Некий пункт 3&#2;Некий пункт 4&#2;Некий пункт 5</div> </td>
  <tr>
    <td> <button onclick="SelectItemsChk(gid('chkBox2'),'Пункт 4Пункт 1', '');">Выделить часть пунктов программно</button> </td>
    <td> <div class="CheckCombobox" id="chkBox2">Пункт 1&#2;Пункт 2&#2;Пункт 3&#2;Пункт 4</div> </td>
  </tr>
  <tr>
    <td> <button onclick="SelectAllChk(gid('chkBox3'));">Выделить все пункты программно</button> </td>
    <td> <div class="CheckCombobox" id="chkBox3">1&#2;2&#2;3</div> </td>
  </tr>
</table>

<script>
function gid(idx) {return document.getElementById(idx);}
function CEL(s) {return document.createElement(s);}
function ACH(p,c) {p.appendChild(c);}

function getScrollWidth() {
  var dv = CEL('div');
  dv.style.overflowY = 'scroll'; dv.style.width = '50px'; dv.style.height = '50px'; dv.style.position = 'absolute';
  dv.style.visibility = 'hidden';//при display:none размеры нельзя узнать. visibility:hidden - сохраняет геометрию, а выше было position=absolute - не сломает разметку
  ACH(document.body,dv);
  var sw = dv.offsetWidth - dv.clientWidth;
  document.body.removeChild(dv);
  return (sw);
}
var ScrollWidth = getScrollWidth();


function InitCheckCombobox(separator) {
  var d = document.getElementsByClassName('CheckCombobox');
  for (var i=0; i < d.length; i++) {
    var cmdExpandList = CEL('div'), divJoinString = CEL('div'); search = CEL('input'); tbl = CEL('table'); chkBox = CEL('div');//тот самый выпадающий список
    var arr = d[i].innerHTML.split(separator);
    d[i].innerHTML = '';

    cmdExpandList.className = 'cmdExpandList';
    cmdExpandList.onclick = ShowChkBox;
    ACH(d[i],cmdExpandList);

    divJoinString.className = 'divJoinString'; divJoinString.style.right = cmdExpandList.offsetWidth + 3 + 'px';
    ACH(d[i],divJoinString);

    search.className = 'search'; search.setAttribute('placeholder', 'Быстрый поиск по фрагменту...'); search.onkeyup = RunFilter;

    tbl.className = 'CheckTable';
    var NewCell = tbl.insertRow(-1).insertCell(-1);
    NewCell.innerHTML = '<label><input type="checkbox"><span>(Выделить всё)</span></label>';
    NewCell.children[0].children[0].onclick = SelectAll;
    for (var j=0; j<arr.length; j++) {
      NewCell = tbl.insertRow(-1).insertCell(-1);
      NewCell.innerHTML = '<label><input type="checkbox"><span>' + arr[j] + '</span></label>';
      NewCell.children[0].children[0].onclick = GetJoinStringChk;
    }
    chkBox.className = 'noDisplay';
    var st = chkBox.style;
    st.top = d[i].offsetHeight - 2 + 'px'; st.minWidth = d[i].offsetWidth + 'px';  st.maxHeight = '243px';
    st.overflowY = 'auto'; st.overflowX = 'hidden';

    ACH(chkBox,search);
    ACH(chkBox,tbl);
    ACH(d[i],chkBox);

    tbl.style.top = search.offsetHeight + 2 + 'px';
    st.height = search.offsetHeight + tbl.offsetHeight + 4 + 'px';
    st.width = tbl.offsetWidth + ScrollWidth + 'px';

    // Добавим события к выпадающему списку
    chkBox.addEventListener('focus', onChkBoxFocus, true);
    chkBox.addEventListener('blur', onChkBoxBlur, true);
  }//for (i=0; i < d.length; i++) закончили перебор всех DIV с классом CheckCombobox

  function ShowChkBox() {
    var el = this.parentNode.children[2];
    el.className = 'ChkBoxFocused';
    el.tabIndex = '-1';  el.focus();
    el.children[0].value = '';

    var rows = el.children[1].rows, len = rows.length;
    for (var i=1; i<len; i++) {rows[i].style.display = 'table-row';}
  }

  function onChkBoxFocus() {this.className = 'ChkBoxFocused';}
  function onChkBoxBlur() {this.className = 'noDisplay';}

  function RunFilter(event) {
    var text = this.value.toUpperCase();
    var rows = this.nextSibling.rows, len = rows.length, TD_txt = '';
    if ((event.keyCode < 32) && (event.keyCode != 8)) return;

    for (var i=1; i<len; i++) {
      TD_txt = rows[i].cells[0].innerHTML.toUpperCase();
      if (TD_txt.indexOf(text) != -1) {rows[i].style.display = 'table-row';}
      else {rows[i].style.display = 'none';}
    }
  }

  function SelectAll(event) {
    var rows = this.parentNode.parentNode.parentNode.parentNode.parentNode.rows;
    for (var j=1; j < rows.length; j++) {
      if (rows[j].style.display=='table-row') {rows[j].cells[0].children[0].children[0].checked = this.checked;}
    }
    GetJoinStringChk(event);
  }

  function GetJoinStringChk(event) {
    var chk = event.target, rows = chk.parentNode.parentNode.parentNode.parentNode.parentNode.rows, s = '';
    for (var j=1; j < rows.length; j++) {
      if (rows[j].cells[0].children[0].children[0].checked) {s = s + ',' + rows[j].cells[0].children[0].children[1].innerHTML};
    }
    chk.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.children[1].innerHTML = s.substring(1);
  }
} // InitCheckCombobox


function SelectAllChk(el) {
  el.children[0].click();
  el.children[2].children[1].rows[0].cells[0].children[0].children[0].click();
  el.children[2].blur();
}

function SelectItemsChk(el, str, separator) {
  var str = str.toUpperCase(), arr = str.split(separator), i=0, j=0;
  var rows = el.children[2].children[1].rows;
  for (i=0; i < arr.length; i++) {
    for (j=1; j < rows.length; j++) {
      if (rows[j].cells[0].children[0].children[1].innerHTML.toUpperCase() == arr[i]) {rows[j].cells[0].children[0].children[0].click()};
    }
  }
}


InitCheckCombobox('');
</script>
</body>
</html>

 
Самодельные кнопки
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<style>
body {background:#dfe8f6;}
.cmdParams {
  border:1px solid #d1d1d1;
  border-radius:4px;
  font:8pt Tahoma,Arial,'MS Sans Serif','sans-serif';
  cursor:pointer;
  width:90px;
  padding:4px 5px;
  text-align:center;
  color:333333;
  background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2Y5ZjlmOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iI2VjZWNlYyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlNmU2ZTYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
}
.cmdParams:active {padding:5px 4px 3px 6px;}


.cmdParams2 {
  border:1px solid #999;
  border-radius:4px;
  font:8pt Tahoma,Arial,'MS Sans Serif','sans-serif';
  cursor:pointer;
  width:97px;
  padding:5px;
  text-align:center;
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZkZmRmZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2ViZWJlYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iI2RkZGRkZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjZmNmY2YiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
}
.cmdParams2:active {padding:6px 4px 4px 6px;}

.GradCmd {
  display:table-cell;
  border:1px solid #999;
  border-radius:5px;
  font:8pt Tahoma,Arial,'MS Sans Serif','sans-serif';
  cursor:pointer;
  width:105px;
  padding:5px 1px;
  text-align:center;
  background:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIHZpZXdCb3g9JzAgMCAxIDEnIHByZXNlcnZlQXNwZWN0UmF0aW89J25vbmUnPjxsaW5lYXJHcmFkaWVudCBpZD0nR3JhZENtZCcgZ3JhZGllbnRVbml0cz0ndXNlclNwYWNlT25Vc2UnIHgxPScwJScgeTE9JzAlJyB4Mj0nMCUnIHkyPScxMDAlJz48c3RvcCBzdG9wLWNvbG9yPScjRkRGREZEJyBvZmZzZXQ9JzAnLz48c3RvcCBzdG9wLWNvbG9yPScjRDFEMUQxJyBvZmZzZXQ9JzEnLz48L2xpbmVhckdyYWRpZW50PjxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPScxJyBoZWlnaHQ9JzEnIGZpbGw9J3VybCgjR3JhZENtZCknLz48L3N2Zz4=);
}
.GradCmd:active {padding:6px 0px 4px 2px;}
</style>
<body>
<div style="margin:50px 200px;">
  <div class="cmdParams">Unigui button</div>
</div>
<div style="margin:50px 200px;">
  <div class="cmdParams2">Просмотр отчета</div>
</div>
<div style="margin:50px 200px;">
  <div class="GradCmd">Просмотр отчета</div>
</div>
</body>
</html>

...
Рейтинг: 0 / 0
01.09.2015, 10:36
| Ответить | Цитировать | Написать  
Tree Table CSS
    #39049993
7Lexus
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
7Lexus
Гость
user89,

Кнопки хороши!
...
Рейтинг: 0 / 0
12.09.2015, 18:19
| Ответить | Цитировать | Написать  
20 сообщений из 45, страница 2 из 2
  2  все
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Tree Table CSS
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&gotonew=1&tid=1445738]:
 0ms
get settings:
 6ms
get forum list:
 10ms
check forum access:
 2ms
check topic access:
 2ms
track hit:
 15ms
get topic data:
 8ms
get first new msg:
 5ms
get forum data:
 2ms
get page messages:
 56ms
get tp. blocked users:
 1ms
others: 258ms
total:  365ms
созд. / загр.: 365ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]