Управление блоком меню
Добрый день, друзья. Как реализовать такую конструкцию:
есть блок меню, который выезжает слева по щелчку на кнопку , по щелчку же и прячется. Нужно несколько условий реализовать: 1. чтоб при загрузке страницы блок меню автоматом выдвигался, а через некоторое время прятался (10 сек.); 2. одновременно блок можно как задвинуть, так и выдвинуть по щелчку. код jQuery:
$(document).ready(function() {
$("body").click(function(){
var slidepx=$(".sidebar").width();
if ( !$("#maincontent").is(':animated') ) {
if (parseInt($("#maincontent").css('marginLeft'), 10) < slidepx) {
margin = "+=" + slidepx;
} else {
margin = "-=" + slidepx;
}
$("#maincontent").animate({
marginLeft: margin
}, {
duration: 'slow',
easing: 'easeOutQuint'
});
}
});
});
код HTML:
<div id="maincontent">
<aside class="sidebar">
<div><h3 >пример</h3></div>
</aside>
</div>
|
Цитата:
А если кнопка все таки есть, то по загрузке страницы запускать таймер а в нем триггер на обработчик этой кнопки. |
Цитата:
Да, кнопкой должен служить любой элемент на странице - это сенсорный экран на терминале и когда по экрану "тапают" (в любом его месте), меню должно выдвинуться + те условия, что я выше описал... Я немного подправил, так? Для меня сложна пока такая логика. Я сам не справлюсь, помогите пожалуйста. |
Ну если "тапать" по телу, то:
$(function() {
var oB = $('body').click(function() {
//здесь ваш код, см. примечание
});
setTimeout(function() {
oB[0].click();
}, 500);
});
Примечание: можно ведь и не проверять состояние меню, то есть is(':animated') и далее действия. Если первый щелчок, это открыть, а последующий закрыть, так это как включать/выключать свет в комнате. Вы же не проверяете глядя на лампочку какая у нее нить накала, и если красная, то свет включен. По умолчанию (старт) лампочка выключена, первый щелчок включили, следующий - выключили, и т.д., автомат. А чтобы упростить работу автомата, можно запоминать состояние выключателя 0/1, умножая на которое значение смещения меню, тем самым без всяких проверок и условий показывать/скрывать его. Ну это как примечание. |
Спасибо Вам большое!)
|
Работает) только почему то не прячется) только первый раз, сразу после загрузки:
$(document).ready(function() {
$(function() {
var oB = $('body').click(function() {
var slidepx=$(".sidebar").width();
if ( !$("#maincontent").is(':animated') ) {
if (parseInt($("#maincontent").css('marginLeft'), 10) < slidepx) {
margin = "+=" + slidepx;
} else {
margin = "-=" + slidepx;
}
$("#maincontent").animate({
marginLeft: margin
}, {
duration: 'slow',
easing: 'easeOutQuint'
});
}
});
setTimeout(function() {
oB[0].click();
}, 500);
});
});
|
Начальное состояние не то значит.
Вообще кроме меню на страницах могут быть иные кнопки и т.п., которые также активируются по щелчку, и можно представить себе как при этом будет вести себя меню. Может быть хотя бы область документа, а не все тело страницы должно управлять меню, если не одна кнопка? Вот пример, в котором управление меню определено для родительского элемента, как область на странице, при этом управление производится по принципу описанному ранее в примечании:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
html, body {
height: 100%;
margin: 0;
}
#mainbox {
position: relative;
width: 300px;
height: 100%;
}
.sidebar {
position: absolute;
left: 0;
top: 0;
width: 300px;
height: 100%;
background: #eee;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(function() {
var oB = $('#mainbox').click(function() {
var m = !oB.data('m'); //получить состояние меню и инвертировать его режим
//по умолчанию меню открыто, что определяет его стиль
//а объект не имеет установленного значения и m = !false = true
oB.data({m:m}) //запомнить состояние меню
.find('.sidebar')
.stop()
.animate({left: -m * 300}, 600); //скрыть/показать меню, что при первом обращении будет равно -true * 300 = -300
})
//.data({m:1/0}); //здесь можно определить начальное состояние меню - открыто или закрыто, то есть под логику,
//но в данном случае мы не устанавливаем это, почему, в обработчике пояснение
//скрыть меню при загрузке
setTimeout(function() {
oB[0].click();
}, 1000);
});
</script>
</head>
<body>
<div id="mainbox">
<div class="sidebar">Main</div>
</div>
</body>
</html>
|
У Вас на примере так же меню прячется единожды - после загрузки выдвигается и спустя некоторое время скрывается... Но как же все таки привязать к этой конструкции второй таймер?.. Что бы меню скрывалось не только в начале загрузки страницы единожды, а и всякий раз, спустя некоторое время после клика или при не-активности. Тут же нужно отслеживать его открытое состояние (через определенный промежуток времени открыто меню или закрыто), а у нас в данной конструкции нет привязки к конкретному состоянию...
|
Значит я не понял. Да, если еще и скрывать автоматом, то нужно проверить состояние меню, раскрывается ли оно ( if(!m) по примеру), и если да, то таймер. Но ведь и пользователь может его закрыть, а значит сработавший таймер уже не закроет меню, а откроет, и чтобы этого не случилось, нужно очищать таймер.
Но может быть иной сценарий лучше будет - запускать таймер на автоматическое закрытие только в случае, если пользователь покидает меню (или область меню, или кнопку ...), а если опять возвращается очищать таймер, то есть не связывать этот процесс со щелчками? |
Да, спасибо Вам laimas за подробные ответы. Буду пробовать.
|
| Часовой пояс GMT +3, время: 08:31. |