ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Реализация дерева средствами css.
15 сообщений из 15, страница 1 из 1
Реализация дерева средствами css.
    #38931172
son456
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
son456
Гость
Здравствуйте! Нужно реализовать дерево из полей базы. Пишу на PHP. Вопрос можно ли обойтись без javascript, если нужно чтобы по клику мыши открывались другие поля базы.
...
Рейтинг: 0 / 0
08.04.2015, 21:22
| Ответить | Цитировать | Написать  
Реализация дерева средствами css.
    #38931200
Оливер Куин
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Оливер Куин
Гость
son456,
 
Дерево без 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.
<!DOCTYPE html>
<html>
<head>
<title>Дерево без javascript</title>
<style>
* {font:11pt Arial;}
li, ul{
  list-style:none;
  margin:0; padding:0;
  overflow:hidden;
}
li ul{
  margin-left:16px;    
  height:0px;
}
li input{display:none;}
li input:checked ~ ul {height:auto;}
li label {cursor:pointer;}
input + label:before {
  content:"";
  display:inline-block;
  height:16px;
  width:16px;
  background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAIAAAAmzuBxAAAACXBIWXMAAAsSAAALEgHS3X78AAAAkElEQVQYlXWOvRWDQAyDv/DYK2wQSro8OkpGuRFcUjJCRmEE0TldCpsjPy9qzj7Jki62Pgh4vnqbbbEWuN+use/PlArwHccWGg780psENGFY6W4YgxZIAM339WmT3m397YYxxn6aASslFfVotYLTT3NwcuTKlFpNR2sdEak4acdKeafPlE2SZ7sw/1BEtX94AXYTVmyR94mPAAAAAElFTkSuQmCC)
  no-repeat 0px 5px;
}
input:checked + label:before{
  background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAIAAAAmzuBxAAAACXBIWXMAAAsSAAALEgHS3X78AAAAeklEQVQYlX2PsRGDMAxFX3zeK9mAlHRcupSM4hFUUjJCRpI70VHIJr7D8BtJ977+SQ9Zf7isVG16WSQC0/D0OW/FqoBlDFkIVJ2xAhA8sI/NHbcYiFrPfI0fGklKagDx2F4ltdtaM0J9L3dxcVxi+zv62E+MwPs7c60dClRP6iug7wUAAAAASUVORK5CYII=)
  no-repeat 0px 5px;
}
</style>
</head>
<body>
<ul>
  <li>
    <input type="checkbox" id="chk1_1"><label for="chk1_1">Малкольм Мерлин</label>
    <ul>
      <li>
        <input type="checkbox" id="chk1_1_1"><label for="chk1_1_1">Ты подвел этот город</label>
        <ul>
          <li>
            <input type="checkbox" id="chk1_1_1_1"><label for="chk1_1_1_1">И как это я умудрился?</label>
            <ul>
              <li>Предприятие.</li>
              <li>Я его остановлю.</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li>
    <input type="checkbox" id="chk2_1"><label for="chk2_1">Кто же убил Сару Лэнс?</label>
    <ul>
      <li>
        <input type="checkbox" id="chk2_1_1"><label for="chk2_1_1">Варианты зрителей</label>
        <ul>
          <li>Тея Куин</li>
          <li>Малкольм Мерлин</li>
          <li>Слейд Уилсон</li>
          <li>По приказу А.Р.Г.У.С.А</li>
        </ul>
      </li>
      <li>
        <input type="checkbox" id="chk2_2_1"><label for="chk2_2_1">Что нам показали в 9 серии</label>
        <ul>
          <li>Тея Куин, под влиянием Малкольма</li>
          <li>Но по логике очень не сходится</li>
        </ul>
      </li>
    </ul>  
  </li>
</ul>
</body>
</html>

...
Рейтинг: 0 / 0
08.04.2015, 22:51
| Ответить | Цитировать | Написать  
Реализация дерева средствами css.
    #38931347
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Оливер Куин
Код: css
1.
li input:checked ~ ul


Что означает символ "~"?
...
Рейтинг: 0 / 0
09.04.2015, 08:14
| Ответить | Цитировать | Написать  
Реализация дерева средствами css.
    #38931410
Оливер Куин
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Оливер Куин
Гость
krvsa,

родственный селектор http://htmlbook.ru/css/selector/sibling
...
Рейтинг: 0 / 0
09.04.2015, 09:19
| Ответить | Цитировать | Написать  
Реализация дерева средствами css.
    #38931414
Фотография -k2-
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
-k2-
Участник
<style>li input:checked ~ ul {color:red;}</style>
<ul>
<li><input type="checkbox" checked value="">test
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
</ul>
<ul>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>

все элементы ul, расположенные внутри отмеченного инпута
...
Рейтинг: 0 / 0
09.04.2015, 09:22
| Ответить | Цитировать | Написать  
Реализация дерева средствами css.
    #38931440
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Оливер Куинродственный селектор http://htmlbook.ru/css/selector/sibling
Спасибо.
...
Рейтинг: 0 / 0
09.04.2015, 09:39
| Ответить | Цитировать | Написать  
Реализация дерева средствами css.
    #38931482
son456
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
son456
Гость
Как такой код заставить работать в IE8?
...
Рейтинг: 0 / 0
09.04.2015, 10:02
| Ответить | Цитировать | Написать  
Реализация дерева средствами css.
    #38931516
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
son456Как такой код заставить работать в IE8?
Никак...
...
Рейтинг: 0 / 0
09.04.2015, 10:25
| Ответить | Цитировать | Написать  
Реализация дерева средствами css.
    #38931526
Оливер Куин
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Оливер Куин
Гость
son456,

на IE8 никак. Здесь скрытие/отображение узлов работает через псевдокласс checked , а он поддерживается, начиная с IE9.
Тут или javascript или обновить IE.
...
Рейтинг: 0 / 0
09.04.2015, 10:29
| Ответить | Цитировать | Написать  
Реализация дерева средствами css.
    #38931536
Фотография -k2-
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
-k2-
Участник
дерево на javascript
http://javascript.ru/ui/tree
...
Рейтинг: 0 / 0
09.04.2015, 10:36
| Ответить | Цитировать | Написать  
Реализация дерева средствами css.
    #38931575
son456
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
son456
Гость
А если через ссылки попробовать?
Код: css
1.
2.
3.
4.
5.
6.
a:active{
height:auto;
content:"";
  display:inline-block;
  height:16px;
  width:16px;
...
Рейтинг: 0 / 0
09.04.2015, 11:00
| Ответить | Цитировать | Написать  
Реализация дерева средствами css.
    #38931595
son456
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
son456
Гость
<input type="checkbox" id="chk1_1"><label for="chk1_1"><a href="#">Малкольм Мерлин</a></label>
...
Рейтинг: 0 / 0
09.04.2015, 11:13
| Ответить | Цитировать | Написать  
Реализация дерева средствами css.
    #38931725
Оливер Куин
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Оливер Куин
Гость
son456,

псевдокласс active работает в короткий момент щелчка мышью. Пример
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
<!DOCTYPE html>
<html>
<head> <meta charset="windows-1251"> <title>active</title>
<style>
  a:active {color:red;} /* Цвет активной ссылки */ 
</style>
</head>
<body>
<a href="#">Нажать на ссылку, не отпускать мышь 2 сек, потом отпустить</a>
</body>
</html>


Для ссылок есть псевдокласс target , но он опять-таки работает начиная с IE9.
...
Рейтинг: 0 / 0
09.04.2015, 12:09
| Ответить | Цитировать | Написать  
Реализация дерева средствами css.
    #38931817
Фотография Antonariy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Antonariy
Участник
Оливер Куинson456,
 
Дерево без 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.
<!DOCTYPE html>
<html>
<head>
<title>Дерево без javascript</title>
<style>
* {font:11pt Arial;}
li, ul{
  list-style:none;
  margin:0; padding:0;
  overflow:hidden;
}
li ul{
  margin-left:16px;    
  height:0px;
}
li input{display:none;}
li input:checked ~ ul {height:auto;}
li label {cursor:pointer;}
input + label:before {
  content:"";
  display:inline-block;
  height:16px;
  width:16px;
  background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAIAAAAmzuBxAAAACXBIWXMAAAsSAAALEgHS3X78AAAAkElEQVQYlXWOvRWDQAyDv/DYK2wQSro8OkpGuRFcUjJCRmEE0TldCpsjPy9qzj7Jki62Pgh4vnqbbbEWuN+use/PlArwHccWGg780psENGFY6W4YgxZIAM339WmT3m397YYxxn6aASslFfVotYLTT3NwcuTKlFpNR2sdEak4acdKeafPlE2SZ7sw/1BEtX94AXYTVmyR94mPAAAAAElFTkSuQmCC)
  no-repeat 0px 5px;
}
input:checked + label:before{
  background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAIAAAAmzuBxAAAACXBIWXMAAAsSAAALEgHS3X78AAAAeklEQVQYlX2PsRGDMAxFX3zeK9mAlHRcupSM4hFUUjJCRpI70VHIJr7D8BtJ977+SQ9Zf7isVG16WSQC0/D0OW/FqoBlDFkIVJ2xAhA8sI/NHbcYiFrPfI0fGklKagDx2F4ltdtaM0J9L3dxcVxi+zv62E+MwPs7c60dClRP6iug7wUAAAAASUVORK5CYII=)
  no-repeat 0px 5px;
}
</style>
</head>
<body>
<ul>
  <li>
    <input type="checkbox" id="chk1_1"><label for="chk1_1">Малкольм Мерлин</label>
    <ul>
      <li>
        <input type="checkbox" id="chk1_1_1"><label for="chk1_1_1">Ты подвел этот город</label>
        <ul>
          <li>
            <input type="checkbox" id="chk1_1_1_1"><label for="chk1_1_1_1">И как это я умудрился?</label>
            <ul>
              <li>Предприятие.</li>
              <li>Я его остановлю.</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li>
    <input type="checkbox" id="chk2_1"><label for="chk2_1">Кто же убил Сару Лэнс?</label>
    <ul>
      <li>
        <input type="checkbox" id="chk2_1_1"><label for="chk2_1_1">Варианты зрителей</label>
        <ul>
          <li>Тея Куин</li>
          <li>Малкольм Мерлин</li>
          <li>Слейд Уилсон</li>
          <li>По приказу А.Р.Г.У.С.А</li>
        </ul>
      </li>
      <li>
        <input type="checkbox" id="chk2_2_1"><label for="chk2_2_1">Что нам показали в 9 серии</label>
        <ul>
          <li>Тея Куин, под влиянием Малкольма</li>
          <li>Но по логике очень не сходится</li>
        </ul>
      </li>
    </ul>  
  </li>
</ul>
</body>
</html>

клевый пример, спасибо
...
Рейтинг: 0 / 0
09.04.2015, 13:00
| Ответить | Цитировать | Написать  
Реализация дерева средствами css.
    #38932025
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Оливер КуинДля ссылок есть псевдокласс target , но он опять-таки работает начиная с IE9.
При его использовании документ пыжится позиционироваться на элемент, указанный в хеше...

Я уже давал с такой фигней страничку клиенту... Пришлось из-за этого эффекта переделывать.
...
Рейтинг: 0 / 0
09.04.2015, 15:24
| Ответить | Цитировать | Написать  
15 сообщений из 15, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Реализация дерева средствами css.
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&msg=38931440&tid=1446107]:
 0ms
get settings:
 7ms
get forum list:
 15ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 153ms
get topic data:
 11ms
get forum data:
 3ms
get page messages:
 61ms
get tp. blocked users:
 2ms
others: 248ms
total:  506ms
созд. / загр.: 506ms
x
x
Закрыть


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