Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Нужна помощь со скриптом для "Dropline" меню (https://javascript.ru/forum/dom-window/2648-nuzhna-pomoshh-so-skriptom-dlya-dropline-menyu.html)

Alekov 27.01.2009 12:58
Нужна помощь со скриптом для "Dropline" меню
 
Всем привет! Я в javascript полный ноль, поэтому ничего в голову лучше не пришло чем задать вопрос здесь...

Ниже привожу код - это так званое "dropline" меню, сам javascript взят из платного шаблона, но что-то не работает - при наведении мышки не выскакивают ссылки подменю :confused: . Помогите найти ошибку, если это возможно, заранее благодарен.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">


<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<script type="text/javascript">

function addEvent(obj, evType, fn){ 
 if (obj.addEventListener){ 
   obj.addEventListener(evType, fn, false); 
   return true; 
 } else if (obj.attachEvent){ 
   var r = obj.attachEvent("on"+evType, fn); 
   return r; 
 } else { 
   return false; 
 } 
}

var delay = 1000
var current = null
var recover = null
var timeoutid = null
var timetorecover = null
var timeoutid2 = 0
function initScriptDLMenu() {
	current = activemenu[0]
	mainlis = document.getElementById("mainnav").getElementsByTagName("li")
	for (i=0; i<mainlis.length; ++i) {
		x = mainlis[i]
		menuindex = x.id.substr(13)

		x._id = parseInt(menuindex)
		x.onmouseover = mouseOver
		
		x.onmouseout = mouseOut

		subx = document.getElementById("subnav"+menuindex)
		if (subx)
		{
			if (activemenu[0] && menuindex == activemenu[0]) {
				subx.style.display = "block"
			}else{
				subx.style.display = "none"
			}
			subx._id = menuindex


			subx.onmouseover = mouseOver

			subx.onmouseout = mouseOut
		}

	}

	//Set active item
	if (activemenu[0])
	{
		actitem = document.getElementById("mainnav"+activemenu[0].toString())
		if (actitem)
		{
			if (actitem.className) actitem.className += " active"; else actitem.className = "active";
		}	
		recover = activemenu[0]
	}
	if (activemenu[1]) {
		actitem = document.getElementById("subnavitem"+activemenu[1].toString())
		if (actitem)
		{
			if (actitem.className) actitem.className += " active"; else actitem.className = "active";
		}	
	}
}

function mouseOver () {
	hide()
	current = this._id
	show()
	clearTimeOut(timeoutid)
}
function mouseOut () {
	if (this._id != current) return

	timeoutid = setTimeout('restore()', delay)
}

function restore () {
	clearTimeOut(timeoutid)
	hide()
	if (recover)
	{
		current = recover
		show()
	}
}

function setHover () {
	if (current == recover) return
	mainx = document.getElementById("mainnav"+current.toString())
	if (mainx)
		mainx.className += ' hover';
}

function clearHover () {
	if (current == recover) return
	mainx = document.getElementById("mainnav"+current.toString())
	if (mainx)
		mainx.className = mainx.className.replace(/[ ]?hover/, '');
}

function hide () {
	subx = document.getElementById("subnav"+current.toString())
	if (subx)
		subx.style.display = "none"
	clearHover ()
}

function show () {
	subx = document.getElementById("subnav"+current.toString())
	if (subx)
		subx.style.display = "block"
	setHover ()
}

function clearTimeOut(timeoutid){
	clearTimeout(timeoutid)
	timeoutid = 0
}

addEvent(window, 'load', initScriptDLMenu)

</script>
</head>
<body>


<div id="mainnav">
<ul>
<li id="mainnav1"><a href="http://site.ru/">Главная</a></li>
<li id="mainnav3"><a href="http://site.ru/1/index.html">Раздел 1</a></li>
<li id="mainnav4"><a href="http://site.ru/2/index.html">Раздел 2</a></li>
<li id="mainnav5"><a href="http://site.ru/3/index.html">Раздел 3</a></li>
<li id="mainnav6" class="havechild"><a href="http://site.ru/4/index.html">Раздел 4</a></li>
<li id="mainnav7" class="havechild"><a href="http://site.ru/5/index.html">Раздел 5</a></li>
</ul>
</div>

<div id="subnav">
<ul id="subnav6">
<li id="subnavitem10"><a href="http://site.ru/6/index.html">Подраздел 1</a></li>
</ul>
<ul id="subnav7">
<li id="subnavitem11"><a href="http://site.ru/7/index.html">Подраздел 2</a></li>
<li id="subnavitem9"><a href="http://site.ru/8/index.html">Подраздел 3</a></li>
</ul>
</div>

<script type="text/javascript">
	var activemenu = new Array("1");
</script>

</body>
</html>

Alekov 27.01.2009 18:10
Все тоже самое, но с префиксами "jadsl-" к идентификаторам - прекрасно работает... Не пойму в чем секрет, помогите люди добрые :) !

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">


<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<script type="text/javascript">

function addEvent(obj, evType, fn){ 
 if (obj.addEventListener){ 
   obj.addEventListener(evType, fn, false); 
   return true; 
 } else if (obj.attachEvent){ 
   var r = obj.attachEvent("on"+evType, fn); 
   return r; 
 } else { 
   return false; 
 } 
}

var delay = 1000
var current = null
var recover = null
var timeoutid = null
var timetorecover = null
var timeoutid2 = 0
function initScriptDLMenu() {
	current = activemenu[0]
	mainlis = document.getElementById("jasdl-mainnav").getElementsByTagName("li")
	for (i=0; i<mainlis.length; ++i) {
		x = mainlis[i]
		menuindex = x.id.substr(13)

		x._id = parseInt(menuindex)
		x.onmouseover = mouseOver
		
		x.onmouseout = mouseOut

		subx = document.getElementById("jasdl-subnav"+menuindex)
		if (subx)
		{
			if (activemenu[0] && menuindex == activemenu[0]) {
				subx.style.display = "block"
			}else{
				subx.style.display = "none"
			}
			subx._id = menuindex


			subx.onmouseover = mouseOver

			subx.onmouseout = mouseOut
		}

	}

	//Set active item
	if (activemenu[0])
	{
		actitem = document.getElementById("jasdl-mainnav"+activemenu[0].toString())
		if (actitem)
		{
			if (actitem.className) actitem.className += " active"; else actitem.className = "active";
		}	
		recover = activemenu[0]
	}
	if (activemenu[1]) {
		actitem = document.getElementById("jasdl-subnavitem"+activemenu[1].toString())
		if (actitem)
		{
			if (actitem.className) actitem.className += " active"; else actitem.className = "active";
		}	
	}
}

function mouseOver () {
	hide()
	current = this._id
	show()
	clearTimeOut(timeoutid)
}
function mouseOut () {
	if (this._id != current) return

	timeoutid = setTimeout('restore()', delay)
}

function restore () {
	clearTimeOut(timeoutid)
	hide()
	if (recover)
	{
		current = recover
		show()
	}
}

function setHover () {
	if (current == recover) return
	mainx = document.getElementById("jasdl-mainnav"+current.toString())
	if (mainx)
		mainx.className += ' hover';
}

function clearHover () {
	if (current == recover) return
	mainx = document.getElementById("jasdl-mainnav"+current.toString())
	if (mainx)
		mainx.className = mainx.className.replace(/[ ]?hover/, '');
}

function hide () {
	subx = document.getElementById("jasdl-subnav"+current.toString())
	if (subx)
		subx.style.display = "none"
	clearHover ()
}

function show () {
	subx = document.getElementById("jasdl-subnav"+current.toString())
	if (subx)
		subx.style.display = "block"
	setHover ()
}

function clearTimeOut(timeoutid){
	clearTimeout(timeoutid)
	timeoutid = 0
}

addEvent(window, 'load', initScriptDLMenu)

</script>
</head>
<body>


<div id="jasdl-mainnav">
<ul>
<li id="jasdl-mainnav1"><a href="http://site.ru/">Главная</a></li>
<li id="jasdl-mainnav3"><a href="http://site.ru/1/index.html">Раздел 1</a></li>
<li id="jasdl-mainnav4"><a href="http://site.ru/2/index.html">Раздел 2</a></li>
<li id="jasdl-mainnav5"><a href="http://site.ru/3/index.html">Раздел 3</a></li>
<li id="jasdl-mainnav6" class="havechild"><a href="http://site.ru/4/index.html">Раздел 4</a></li>
<li id="jasdl-mainnav7" class="havechild"><a href="http://site.ru/5/index.html">Раздел 5</a></li>
</ul>
</div>

<div id="jasdl-subnav">
<ul id="jasdl-subnav6">
<li id="jasdl-subnavitem10"><a href="http://site.ru/6/index.html">Подраздел 1</a></li>
</ul>
<ul id="jasdl-subnav7">
<li id="jasdl-subnavitem11"><a href="http://site.ru/7/index.html">Подраздел 2</a></li>
<li id="jasdl-subnavitem9"><a href="http://site.ru/8/index.html">Подраздел 3</a></li>
</ul>
</div>

<script type="text/javascript">
	var activemenu = new Array("1");
</script>

</body>
</html>

Zibba 27.01.2009 20:08
Просто в самом начале скрипта применяется метод substr(), с позиции = 13. Т.е. если вы в строке menuindex = x.id.substr(13) измените число на 7, ваш скрипт должен заработать без префикса "jadsl-" в id элементов.

Alekov 27.01.2009 20:39
Огромное спасибо за помощь! Смогу теперь спокойно уснуть :) ...

x-yuri 02.02.2009 07:14
Цитата:
Все тоже самое, но с префиксами "jadsl-" к идентификаторам - прекрасно работает... Не пойму в чем секрет, помогите люди добрые
потому, что скрипт рассчитывает на то, что id элементов начинаются с 'jadsl-'. Если уж используешь чужой скрипт, лучше придерживатся его требований. Замена 13 на 7 не должна решить проблему, по-крайней мере полностью

Zibba 02.02.2009 10:33
Ну бегло просмотрев скрипт, я заметил только одно место где могла бы находиться загвоздка. А учитывая то что автор просто не хотел видеть префикс 'jadsl-' в id своих элементов я предложил самое простое решение. Т.е. в том месте скрипта где получают номер элемента меню методом substr() изменить позицию в которой должен находиться этот номер :) , а без учета того самого префикса она составила 7.

В вообще, можно было бы переделать скрипт и заменить место опредления номера элемента с метода substr() на что нибудь более универсальное (например поиск по регулярному выражению числа, тогда бы и не пришлось заморачиваться с индексами строки :) )


Часовой пояс GMT +3, время: 13:28.