Форум PHP программистов > Дерево, раскрывающийся список

[ Поиск ] - [ Пользователи ] - [ Календарь ]

Полная Версия: Дерево, раскрывающийся список

dima4321

23.01.2011 - 11:54

Дерево, раскрывающийся плюсик. Возможно ли , куда смотреть ??

есть текст его надо скрывать в плюсик, что-то в плюсике надо будет еще скрыть в плюсик.

Конструкция типа дерева. при нажатии на плюсик даннные разворачиваются.

Как реализовать это с помощью html такое возможно видел на рутрекере.

Буду рад любой помощи, куда смотреть ??

Спустя 14 минут, 18 секунд (23.01.2011 - 11:08) Slays написал(а):

http://javascript.ru/ui/tree

Спустя 7 минут, 20 секунд (23.01.2011 - 11:15) alex12060 написал(а):

JQuery

Настоятельно советую почитать об этом)

Спустя 1 час, 43 минуты, 45 секунд (23.01.2011 - 12:59) inpost написал(а):

dima4321
Плавно или моментально? Если моментально - подойдет даже самое простое в JavaScript: show\hide. Если плавно - уже jQuery как библиотека для работы с JS.
getElementById('xxx').style.display = 'none или block' -видимый и не видимый

Спустя 4 минуты, 18 секунд (23.01.2011 - 13:03) dima4321 написал(а):

inpost

Моментально наваротов не надо.

Надал плюсик открыл, нажал минусик закрыл. Вот и все.

Можно css и сам java sсript ??? картинки плюсиков я скачаю

Спустя 3 минуты, 45 секунд (23.01.2011 - 13:07) Slays написал(а):

dima4321
тебе уже 2 ссылки дали, чего ждешь )

Спустя 13 минут, 48 секунд (23.01.2011 - 13:21) dima4321 написал(а):

Вот собрал из кусочков пример. картинки загрузил в основную паку где и файл. В итоге вижу

-Root
Item 1

т.е. картинка минусика отображается , нажимаю на нее никаких действий меню не сварачивается. Что не так подскажите

<style>

.Container {
	padding: 0;
	margin: 0;
}

.Container li {
	list-style-type: none;
}

/* indent for all tree children excepts root */
.Node {
    margin-left: 18px;
    zoom: 1;

}

.IsRoot {
    margin-left: 0;
}
 
.ExpandOpen .Expand {
    background-image: url(minus.gif);
}
 
/* closed is higher priority than open */
.ExpandClosed .Expand {
    background-image: url(plus.gif);
}
 
/* highest priority */
.ExpandLeaf .Expand {
    background-image: url(img/leaf.gif);
}

.Content {
    min-height: 18px;
    margin-left:18px;
}
* html  .Content {
    height: 18px;
}


.ExpandLoading   {
    width: 18px;
    height: 18px;
    float: left;
    background-image: url(img/loading.gif);
}

.Expand {
    width: 18px;
    height: 18px;
    float: left;
}


.ExpandOpen .Container {
        display: block;
}

.ExpandClosed .Container {
        display: none;
}

.ExpandOpen .Expand, .ExpandClosed .Expand {
        cursor: pointer;
}
.ExpandLeaf .Expand {
        cursor: auto;
}


</style>

<script>


function tree_toggle(event) {
	event = event || window.event
	var clickedElem = event.target || event.srcElement

	if (!hasClass(clickedElem, 'Expand')) {
		return // клик не там
	}

	// Node, на который кликнули
	var node = clickedElem.parentNode
	if (hasClass(node, 'ExpandLeaf')) {
		return // клик на листе
	}

	// определить новый класс для узла
	var newClass = hasClass(node, 'ExpandOpen') ? 'ExpandClosed' : 'ExpandOpen'
	// заменить текущий класс на newClass
	// регексп находит отдельно стоящий open|close и меняет на newClass
	var re =  /(^|\s)(ExpandOpen|ExpandClosed)(\s|$)/
	node.className = node.className.replace(re, '$1'+newClass+'$3')
}


function hasClass(elem, className) {
	return new RegExp("(^|\\s)"+className+"(\\s|$)").test(elem.className)
}

</script>


<ul class="Container">
  <li class="Node IsRoot ExpandOpen">
    <div class="Expand"></div>
    <div class="Content">Root</div>
    <ul class="Container">
      <li class="Node ExpandLeaf">
        <div class="Expand"></div>
        <div class="Content">Item 1</div>
      </li>
    </ul>
  </li>
</ul>

Спустя 20 минут, 34 секунды (23.01.2011 - 13:42) inpost написал(а):

dima4321
А нафиг тебе такой сложный код? Или ты скопипастил первое, что нашлось в гугле? Открывай любой учебник и читай-читай-читай по JS.
http://javascript.ru - заходи и начинай изучать с самого начала.

Ах да, можешь Попова скачать по JS & jQuery

Спустя 1 час, 8 минут, 32 секунды (23.01.2011 - 14:50) Slays написал(а):

это код с http://javascript.ru и есть, он не такой уж сложный, просто ТС представил тут html + css + JS одним блоком =)

Спустя 4 часа, 33 минуты, 13 секунд (23.01.2011 - 19:23) alex12060 написал(а):

Эх, ладно, сделаю тебе готовый пример, распишу и все такое.
С тебя похвала:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
    <title>JQuery</title>
    <meta http-equiv="content-type" content="text/html; charset=windows-1251" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        $("p.show").hide();
        $("div#menu_head").click(function() {
            $("p.show").slideDown(1000);
        });
        
        $("div#menu_head").dblclick(function() {
            $("p.show").slideUp(1000);
        });
    });
    </script>
</head>
<body>
    <div id="menu_head" style="width: 500px; color: #125199; padding: 5px; background-color: #C0DBFA; height: 25px; border: #45658A solid 1px; cursor: pointer">нажми на меня</div>
        <p style="width: 500px; padding: 0 0 5px 10px; height: 350px; color: #000; border-left: 1px dotted #45658A; border-right: 1px dotted #45658A; border-bottom: 1px dotted #45658A;" class="show">
            Дерево, раскрывающийся плюсик. Возможно ли , куда смотреть ??<br />
             <br />           
            есть текст его надо скрывать в плюсик, что-то в плюсике надо будет еще скрыть в плюсик.<br />
            <br />
            Конструкция типа дерева. при нажатии на плюсик даннные разворачиваются.<br />
            <br />
            Как реализовать это с помощью html такое возможно видел на рутрекере.<br />
               <br />         
            Буду рад любой помощи, куда смотреть ??  <br />
        </p>
    
</body>
</head>

Спустя 1 час, 21 минута, 56 секунд (23.01.2011 - 20:45) dima4321 написал(а):

Galex12060
Премного благодарен попробую разобраться..сейчас под пивом..но вопросы явно появятся..так как хочу сам вникнуть.)

Спустя 40 минут, 43 секунды (23.01.2011 - 21:26) alex12060 написал(а):

Под пивом он)

Скажу сразу, чтобы закрыть, нужно 2 раза нажать на нажми на меня

Понимаю, это не есть хорошо, но вроде только метод hover поддерживает закрытие-открытие в 1 функции.

Спустя 42 минуты, 55 секунд (23.01.2011 - 22:09) inpost написал(а):

alex12060
ну и нафиг тогда, вообще работает и одинарное нажатие, а если глючит, тогда на чистом JS, onclick.

_____________
Работаю за еду ! __))
И за плюсики !

Быстрый ответ:

Здесь расположена полная версия этой страницы.