| |
|
|
| | Здравствуйте Уважаемое сообщество. Ни подскажете мне как на javacsript или css создать проводник. Наверняка кто то делал подобное. | |
| |
|
|
| |
|
|
| |
для: pautina
(03.06.2008 в 12:48)
| | | Какой проводник, аналог Проводника Windows? | |
| |
|
|
| |
|
|
| |
для: sim5
(03.06.2008 в 12:55)
| | | Да имено так, аналог проводника в Windows. В asp.net например есть готовый элемент threewiev переносишь его на форму заполняешь пункты и подпункты и всё работает. А вот как написать такое на javacsript or css с нуля если честно, то низнаю. | |
| |
|
|
| |
|
|
| |
для: pautina
(03.06.2008 в 12:57)
| | | Все это можно создать, если использовать готовые компоненты Windows (объекты), но работать будет правда только в IE. А вот чтобы на JS+CSS, придется попотеть, да и не все функции вашего "проводника" работать будут.) | |
| |
|
|
| |
|
|
| |
для: sim5
(03.06.2008 в 13:13)
| | | А у Вас нет такого участка кода, (на js+css). | |
| |
|
|
| |
|
|
| |
для: pautina
(03.06.2008 в 13:33)
| | | Нет конечно, да и не нужен. Зачем вам аналог Проводника? | |
| |
|
|
| |
|
|
| |
для: pautina
(03.06.2008 в 13:33)
| | | http://jquery.bassistance.de/treeview/demo/ | |
| |
|
|
| |
|
|
| |
для: pautina
(03.06.2008 в 12:48)
| | | Вам нужна аналогия (похоже внешне, но выполняющее иные функции, например, работающее не с жестким диском компьютера, а с картой сайта) или гомология (и похоже, и делающее то же самое)?
Если "аналогия", то - элементарно: рисуете "дерево" сайта из ссылок-файлов и DIV-ов-папок, используя style="display: none" для "сворачивания папок". Все названия и адреса для ссылок-файлов вносите в "дерево" заранее.
Если же надо работающее с жесткими дисками компьютера, то это возможно только с использованием Active-X и только в браузере MSIE - "дерево" то же самое, только создаваться оно будет программно, беря информацию с диска. | |
| |
|
|
| |
|
|
| |
для: PAT
(03.06.2008 в 14:08)
| | | Мне нужна аналогия для создания карты сайта. Дело в том что проводник я ещё ни реализовывал, поэтому мне немного сложновато. То что Вы советуете выглядит намного легче чем предидущая ссылка. Ни могли бы Вы мне немного помочь с реализацией проводника. Ни пойму, что значит - рисуете "дерево сайта" из ссылок файлов и div-ов папок.
У Вас нет готового участка кода, или части кода чтобы мне было более понятней, Вам как я понял знакома эта тема. Надеюсь на Ваше сотрудничество. | |
| |
|
|
| |
|
|
| |
для: pautina
(03.06.2008 в 14:32)
| | | Так вам не Проводник нужен, а обычное древовидное меню, для отображения карты сайта. Кстати, карту сайта можно красиво оформить из без JS, если не такая она и большая и уровни вложений не велики. | |
| |
|
|
| |
|
|
| |
для: sim5
(03.06.2008 в 15:02)
| | | Хорошо как создать обычное древовидное меню?
Как я понял проводник м-о описать используя например такой код
<body>
<div id="main">
<ul id="navigation">
<li><a href="">Пункт 1</a>
<ul>
<li><a href="">Подпункт 1 пункта 1</a></li>
<li><a href="">Подпункт 2 пункта 1</a></li>
<li><a href="">Подпункт 3 пункта 1</a></li>
</ul>
</li>
<li><a href="">Пункт 2</a>
<ul>
<li><a href="">Подпункт 1 пункта 2</a></li>
<li><a href="">Подпункт 2 пункта 2</a></li>
<li><a href="">Подпункт 3 пункта 2</a></li>
</ul>
</li>
</ul>
</div>
</body>
|
Но вот только какие стили нужно применить к main, navigation, li, li ul, ul li чтобы визуально было похоже на раскрытие и закрытие списка. | |
| |
|
|
| |
|
|
| |
для: pautina
(03.06.2008 в 15:06)
| | | В РНР все это будете создавать. Элементам, которые будут осуществлять вывод дерева пропишите стили, вот эта чать только и будет касаться CSS, все остальное это РНР. Поищите в РНР разделе, вроде бы в нем были темы посвященные картам сайта, почитайте. | |
| |
|
|
| |
|
|
| |
для: sim5
(03.06.2008 в 15:27)
| | | Если использовать такой код для создания структуры проводника.
<body>
<div id="main">
<ul id="navigation">
<li><a href="">Пункт 1</a>
<ul>
<li><a href="">Подпункт 1 пункта 1</a></li>
<li><a href="">Подпункт 2 пункта 1</a></li>
<li><a href="">Подпункт 3 пункта 1</a></li>
</ul>
</li>
<li><a href="">Пункт 2</a>
<ul>
<li><a href="">Подпункт 1 пункта 2</a></li>
<li><a href="">Подпункт 2 пункта 2</a></li>
<li><a href="">Подпункт 3 пункта 2</a></li>
</ul>
</li>
</ul>
</div>
</body>
|
Но вот только какие стили нужно применить к main, navigation, li, li ul, ul li чтобы визуально было похоже на раскрытие и закрытие списка. | |
| |
|
|
| |
|
|
| |
для: pautina
(03.06.2008 в 15:46)
| | |
<script>
function myFunc (x, y)
{
if (x.src.indexOf ('папка_закрытая') > 0)
{
x.src = 'папка_открытая';
document.getElementById (y).style.display = '';
}
else
{
x.src = 'папка_закрытая';
document.getElementById (y).style.display = 'none';
}
}
</script>
<body>
<div id="main">
<ul id="navigation">
<li><img src="папка_закрытая" onclick="myFunc (this, 'p1')"> <a href="">Пункт 1</a>
<ul id="p1" style="display: none">
<li><a href="">Подпункт 1 пункта 1</a></li>
<li><a href="">Подпункт 2 пункта 1</a></li>
<li><a href="">Подпункт 3 пункта 1</a></li>
</ul>
</li>
<li><img src="папка_закрытая" onclick="myFunc (this, 'p2')"> <a href="">Пункт 2</a>
<ul id="p2" style="display: none">
<li><a href="">Подпункт 1 пункта 2</a></li>
<li><a href="">Подпункт 2 пункта 2</a></li>
<li><a href="">Подпункт 3 пункта 2</a></li>
</ul>
</li>
</ul>
</div>
</body>
|
Это для случая, если у вас "Пункт 1" и "Пункт 2" сами являются ссылками.
Если же "Пункт 1" и "Пункт 2" являются только названиями папок, то тогда строки LI с ними можно переделать, т.е.
вместо строк типа
<li><img src="папка_закрытая" onclick="myFunc (this, 'p1')"><a href="">Пункт 1</a>
надо писать строки вида
<li><a href="" onclick="myFunc (document.getElementById ('im1'), 'p1'); return false"><img id="im1" src="папка_закрытая"> Пункт 1</a>
|
| |
| |
|
|
| |
|
|
| |
для: PAT
(03.06.2008 в 16:05)
| | | Извините а Вы ни скажете куда мне вставлять рисунок плюса и минуса
x.src = 'папка_открытая';
x.src = 'папка_закрытая';
В эти 2 строки как поставить адрес графического файла | |
| |
|
|
| |
|
|
| |
для: pautina
(04.06.2008 в 10:08)
| | | Так и ставьте:
x.src = 'path/plus.gif';
x.src = 'path/minus.gif'; | |
| |
|
|
| |
|
|
| |
для: ONYX
(04.06.2008 в 11:11)
| | | Огромное Вам всем спасибо. Вы мне очень помогли. Особено благодарен Pat. Как хорошо что есть такой форум. | |
| |
|
|
