Показать сообщение отдельно
  #1 (permalink)  
Старый 02.02.2014, 01:34
Аватар для Boolean_Type
Аспирант
Отправить личное сообщение для Boolean_Type Посмотреть профиль Найти все сообщения от Boolean_Type
 
Регистрация: 02.02.2014
Сообщений: 48

События / таймеры
Здравствуйте!
Задача: необходимо, чтобы при нажатии на кнопку меню плавно из-под неё выезжало. При повторном нажатии или нажатии НЕ на неё - так же плавно "въезжало" в неё. jQuery по опр. причинам не подходит.
Код ещё не доработан, в нём много шлака, строго его не судите:
<head>
<title> </title>
<meta charset='utf-8'>
<style>
	html, body{
		height:100%;
		margin:0;
		padding:0;
	}
	#right_menu, li{
		margin:0;
		padding:0;
		display:block;
	}
	#right_menu{
		position:absolute;
		width:65px;
		height:125px;
		background-color:#cccccc;
		border:2px solid;
		border-color: #dddddd #bbbbbb #bbbbbb #dddddd;
		padding-left:50px;
	}
	li{
		width:60px;
		height:25px;
		margin:5px;
		line-height:25px;
		font-family:arial, sans-serif;
		font-size:10pt;
		text-indent:5px;
	}
	li:hover{
		background-color:navy;
		color:white;
	}
	#b{
	position:absolute;
	top:50px;
	left:10px;
	}
	
</style>
</head>

<body>
<ul id='right_menu'>
	<li>Effect 1</li>
	<li>Effect 2</li>
	<li>Effect 3</li>
	<li>Effect 4</li>
</ul>
<input type='button' id='b' value = 'Click'>

var flag = false;

var menu=document.getElementById('right_menu');
//меню скрыто при загрузке стр-цы
menu.style.display='none';

var button = document.getElementById('b');

button.onclick=function(event){
//меню будет появл-ся там, где щёлкнули правой кнопкой
menu.style.left=parseInt(getComputedStyle(button).left)+'px';
menu.style.top=parseInt(getComputedStyle(button).top)+'px';

	
	if(flag == false){
		menu.style.display='block';
		intr_show=setInterval(show,1);
		flag = true;
	}else{
		intr_hide=setInterval(hide,1);
		document.body.onclick = setInterval(hide,1); //какой-то бред написан, но и без этой строки работает по-другому
		flag=false;
	}
}

function show(){
//показываем UL
width = parseInt(getComputedStyle(menu).width);
height = parseInt(getComputedStyle(menu).height);
if(width >= 65 && height >= 125) {return}
menu.style.width = (width + 1)+'px';
menu.style.height = (height + 1)+'px';

//показываем LI
var lis = document.querySelectorAll('li');
for(var i=0; i<lis.length;i++){
widthLi = parseInt(getComputedStyle(lis[i]).width);
heightLi = parseInt(getComputedStyle(lis[i]).height);
if (widthLi == 60 && heightLi ==25) {	
	lis[0].innerHTML = 'Effect 1';
	lis[1].innerHTML = 'Effect 2';
	lis[2].innerHTML = 'Effect 3';
	lis[3].innerHTML = 'Effect 4';
return} //чтобы ф-ция не вып-яла лишних действий
	
lis[i].style.width = (widthLi + 1)+'px';
lis[i].style.height = (heightLi + 1)+'px';
}
}
	

function hide(){
//прячем UL
widthUl = parseInt(getComputedStyle(menu).width); /*не обязат-но
глобальная, т.к. перезапись происх-ит в св-ве: menu.style.width,
а width получаем из него же*/
heightUl = parseInt(getComputedStyle(menu).height);
if (widthUl <= 0 && heightUl <=0) {
menu.style.border = 'none';
return} //чтобы ф-ция не вып-яла лишних действий
menu.style.width = (widthUl - 1)+'px';
menu.style.height = (heightUl - 1)+'px';

//прячем LI
var lis = document.querySelectorAll('li');
for(var i=0; i<lis.length;i++){
widthLi = parseInt(getComputedStyle(lis[i]).width);
heightLi = parseInt(getComputedStyle(lis[i]).height);
if (widthLi == 0 && heightLi ==0) {
/*lis[i].innerHTML = '';  не корректно, т.к. if сработает сначала для
i=0, но после "обнуления" innerHTML стоит return, кот-ый выкинет из
ф-ции. При след-ем её запуске цикл опять начнётся с 0 и return опять
выкинет после lis[0].innerHTML = ''; . Выходит, что innerHTML обнулится
лишь у 1го эл-та*/
	for(var j=0; j<lis.length;j++){
	lis[j].innerHTML = '';
	}
return} //чтобы ф-ция не вып-яла лишних действий

lis[i].style.width = (widthLi - 1)+'px';
lis[i].style.height = (heightLi - 1)+'px';
console.log(getComputedStyle(lis[i]).width)
}
}


Ф-ция show не работает, а hide срабатывает, но некорректно.
Сказать по правде, я пока слаб в событиях и таймерах, а задание срочное. Поэтому даже не знаю, что тут можно сделать.

Последний раз редактировалось Boolean_Type, 02.02.2014 в 14:14.
Ответить с цитированием