Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Реализация дерева средствами css. / 15 сообщений из 15, страница 1 из 1
08.04.2015, 21:22
    #38931172
son456
son456
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Реализация дерева средствами css.
Здравствуйте! Нужно реализовать дерево из полей базы. Пишу на PHP. Вопрос можно ли обойтись без javascript, если нужно чтобы по клику мыши открывались другие поля базы.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
08.04.2015, 22:51
    #38931200
Оливер Куин
Оливер Куин
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Реализация дерева средствами css.
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, 08:14
    #38931347
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Реализация дерева средствами css.
Оливер Куин
Код: css
1.
li input:checked ~ ul


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

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

на IE8 никак. Здесь скрытие/отображение узлов работает через псевдокласс checked , а он поддерживается, начиная с IE9.
Тут или javascript или обновить IE.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
09.04.2015, 10:36
    #38931536
-k2-
-k2-
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Реализация дерева средствами css.
дерево на javascript
http://javascript.ru/ui/tree
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
09.04.2015, 11:00
    #38931575
son456
son456
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Реализация дерева средствами css.
А если через ссылки попробовать?
Код: 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:13
    #38931595
son456
son456
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Реализация дерева средствами css.
<input type="checkbox" id="chk1_1"><label for="chk1_1"><a href="#">Малкольм Мерлин</a></label>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
09.04.2015, 12:09
    #38931725
Оливер Куин
Оливер Куин
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Реализация дерева средствами css.
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, 13:00
    #38931817
Antonariy
Antonariy
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Реализация дерева средствами css.
Оливер Куин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, 15:24
    #38932025
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Реализация дерева средствами css.
Оливер КуинДля ссылок есть псевдокласс target , но он опять-таки работает начиная с IE9.
При его использовании документ пыжится позиционироваться на элемент, указанный в хеше...

Я уже давал с такой фигней страничку клиенту... Пришлось из-за этого эффекта переделывать.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Реализация дерева средствами css. / 15 сообщений из 15, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 306ms
Закрыть
start [/forum/topic.php?fid=22&tablet=1&tid=1446107]:
 0ms
get settings:
 8ms
get forum list:
 12ms
check forum access:
 2ms
check topic access:
 2ms
track hit:
 27ms
get topic data:
 7ms
get forum data:
 2ms
get page messages:
 30ms
get tp. blocked users:
 1ms
others: 215ms
total:  306ms
x
x
Закрыть


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