| |
|
|
| | Народ пожалуйста помогите с древовыдным меню, перебрал множество вариантов создания этих меню, пока остановился на этом варианте. Все хорошо но есть одно но нужно добавить функционал открыть / закрыть все. Уже неделю ломаю голову, в JS я не силен так что не получается нифига. Кусок кода привожу ниже
<html>
<head>
<style type="text/css">
.ls { margin-left: 16px; }
.lsbg { margin-left: 16px; background: url(/article/dot.gif) repeat-y bottom left; }
a.mi { font: 16px tahoma; color: #000; text-decoration: none; cursor: pointer; }
a.miact { font: bold 16px tahoma; color: #000; text-decoration: none; cursor: pointer}
img.ico { width: 32px; height: 16px; margin-right: 5px;}
</style>
</head>
<body>
<script type="text/javascript">
var active = null;
function addItem(oid, text, pid, url)
{
pid = document.getElementById(pid);
if (pid.getElementsByTagName("span").length == 0) pid = createTag("span", pid);
else pid = pid.getElementsByTagName("span")[0];
mi = createTag("div", pid);
mi.id = oid;
miImg = createTag("img", mi);
miImg.align = "absbottom";
miImg.className = "ico";
mia = createTag("a", mi);
mia.innerHTML = text;
mia.className = "mi";
mia.onclick = function (e) { mi_click(e) };
mia.onfocus = function (e) { mi_focus(e) };
if (url != null) mia.href = url;
createTag("br", mi);
}
function createTag(tag, pel)
{
el = document.createElement(tag);
return pel.appendChild(el);
}
function initMenu(act)
{
root = document.getElementById("menu");
els = root.getElementsByTagName("a");
for (i=0; i<els.length; i++)
{
els[i].parentNode.className = els[i].parentNode.nextSibling != null ? "lsbg" : "ls";
img = els[i].parentNode.getElementsByTagName("img")[0];
if (els[i].parentNode.getElementsByTagName("span")[0] != null)
{
els[i].parentNode.getElementsByTagName("span")[0].style.display = 'none';
img.src = "fol+.bmp";
img.onclick = function (e) { img_click(e) };
}
else
img.src = els[i].parentNode.nextSibling != null ? "ie.bmp" : "ie.bmp";
}
if (act != null) node_open(act);
}
function mi_click(e)
{
obj = eventHandler(e);
node_activate(obj);
if ((node = obj.parentNode.getElementsByTagName("span")[0]) == null) return;
if (node.style.display != "block")
{
node.style.display = "block";
obj.parentNode.firstChild.src = "fol-.bmp";
}
}
function img_click(e)
{
obj = eventHandler(e);
if ((node=obj.parentNode.getElementsByTagName("span")[0]) == null) return;
if (node.style.display != "block")
{
node.style.display = "block";
obj.src = "fol-.bmp";
}
else
{
node.style.display = "none";
obj.src = "fol+.bmp";
}
}
function mi_focus(e)
{
obj = eventHandler(e);
obj.blur();
}
function node_open(node_id)
{
if ((node = document.getElementById(node_id)) == null) return;
node_activate(node.getElementsByTagName("a")[0]);
while (node.id != "0")
{
node = node.parentNode;
node.style.display = "block";
if(node.tagName == "DIV") node.getElementsByTagName("img")[0].src = "fol-.bmp";
}
}
function node_activate(node_a)
{
if (active!=null) active.className = 'mi';
active = node_a;
active.className += 'act';
}
function eventHandler(e)
{
return window.event ? window.event.srcElement : e.currentTarget;
}
</script>
<div id="menu">
<script type="text/javascript">
window.onload = function ()
{
addItem("0", "Kingdom Animalia", "menu");
addItem("01", "Subkingdom Eumetazoa", "0");
addItem("001", "Phylum Acanthocephala", "01","zz.php");
addItem("0001", "Class Archiacanthocephala", "001","zz.php");
addItem("0001", "Class Eoacanthocephala", "001");
addItem("0001", "Class Palaeacanthocephala", "001");
addItem("002", "Phylum Annelida", "0");
addItem("0002", "Class Acanthobdellea", "002");
addItem("0002", "Class Aphanoneura", "002");
addItem("0002", "Class Branchiobdellea", "002");
addItem("0002", "Class Hirudinea", "002");
addItem("0002", "Class Oligochaeta", "002");
addItem("0002", "Class Polychaeta", "002");
addItem("003", "Phylum Arthropoda", "0");
initMenu("48");
}
</script>
</div>
</body>
</html>
P.S. про JqueryTreeView знаю, просто уже много инфы забито в это дерево, долго придется ее переделывать под Jquery.
Всем спасибо. Жду Ваших ответов.
С уважением Роман
|
| |
| |
|
|
| |
|
|
| |
для: bibika
(15.11.2009 в 08:32)
| | | >"нужно добавить функционал открыть / закрыть все"
Поясните, КУДА ИМЕННО вы собираетесь "воткнуть" управление этим "функционалом".
И тогда, наверно, я смогу вам помочь. | |
| |
|
|
| |
|
|
| |
для: АЯ
(15.11.2009 в 10:56)
| | | Не знаю правильно ли я понял Ваш вопрос. Все очень просто, ставим наверху списка две ссылки, над открыть / закрыть все, в которые как я понимаю прописываются события отображение / скрытия всего и все больше мне ничего не надо.
Буду благодарен за любую помощь. | |
| |
|
|
| |
|
|
| |
для: bibika
(15.11.2009 в 11:35)
| | | С одной ссылкой, ИМХО, будет удобнее:
<script>
function HideShow (x)
{
var me = document.getElementById ('menu'), im = me.getElementsByTagName ('img'), il = im.length,
sp = me.getElementsByTagName ('span'), sl = sp.length, j = 0, k = 1;
if (x.innerHTML == 'Show All')
{
for (; j < il; j++) if (im [j].src.indexOf ('fol+.bmp') > 0) im [j].src = 'fol-.bmp';
for (; k < sl; k++) sp [k].style.display = 'block'; x.innerHTML = 'Hide All';
}
else
{
for (; j < il; j++) if (im [j].src.indexOf ('fol-.bmp') > 0) im [j].src = 'fol+.bmp';
for (; k < sl; k++) sp [k].style.display = 'none'; x.innerHTML = 'Show All';
}
return false;
}
<script>
<a href="#" onclick="return HideShow (this)">Show All</a>
|
Но если надо именно две ссылки, и если сами не справитесь, то свистите, помогу. | |
| |
|
|
| |
|
|
| |
для: АЯ
(15.11.2009 в 14:27)
| | | Нет мне и одной ссылки хватит. Спасибо все работает отлично, только что проверил.
Еще раз спасибо за помощь Вы мне очень помогли. | |
| |
|
|
