Способы работы с меню jQuery на нескольких страницах - PullRequest
Новая
       17

Способы работы с меню jQuery на нескольких страницах

1 голос
/ 01 августа 2010

Это не конкретный кодовый вопрос, а скорее концептуальный вопрос. Я пытаюсь понять, в каком направлении мне следует идти в решении этой проблемы.

Вот сайт Тестовый сайт

Прямо сейчас, когда вы наводите курсор мыши на interior и нажимаете Mastersuite , вы переходите на страницу для основного набора, которая включает панель навигации через SSI, но когда страница загружает Меню навигации сбрасывается так же, как при первой загрузке указателя. Я хочу, чтобы меню загружалось в том состоянии, в котором оно было при нажатии на ссылку. Я также хочу, чтобы на ВСЕХ страницах был только один HTML-файл для панели навигации.

Каков самый универсальный, чистый и способный к обновлению способ сделать это?

Мои идеи

  • используйте строку запроса, чтобы сообщить сценарию navbar, в каком разделе находится программа просмотра
  • используйте какой-либо JavaScript на странице подраздела (например: mastersuite.html или bathrooms.html ), чтобы сообщить сценарию navbar, на какой странице находится пользователь

Ответы [ 2 ]

1 голос
/ 01 августа 2010

Одна опция для каждой ссылки, которая ведет вас на другую страницу, устанавливает хэш идентификатора раздела, к которому она принадлежит. 

<a href="mastersuite.shtml#section1">Master Suite</a>

Затем на каждой странице, когда страница загружается, получите значение хеш-функции и используйте его в качестве селектора для запуска события, отображающего эту категорию. 

if(window.location.hash)
    $(window.location.hash).mouseover();  // Or mouseenter if that's the event
0 голосов
/ 01 августа 2010

Хорошо, это то, что я сделал, и кажется хорошим решением.

на странице раздела (то есть: bathrooms.shtml или mastersuite.shtml) я использовал это 

<script type="text/javascript">

var section='1';

</script>

значение "section" - это раздел, в котором находится эта страница.

, а затем в моем скрипте navbar я использовал это 

$(window).load(function() {//functionality
$('#section1').hoverIntent(navSelect('.interior','0px'));
$('#section2').hoverIntent(navSelect('.exterior','100px'));
$('#section3').hoverIntent(navSelect('.view','200px'));

function navSelect(section,selectorPosition){
    var func = function(evt){
        if ( $(section).is(':hidden')){
        $('.subSection').fadeOut(250);
        $(section).delay(250).fadeIn(250);
        $('#selector').animate({"left":selectorPosition},250);
        }
    }
    return { over: func, out: func };
}
});
//----------------------------------------------------------
if(section==0){//index page
$(window).load(function() {

$('.section').mouseover(function(){
$('#nav2').fadeOut(0).animate({"height":"30px"}, 250);      
});
});
}

//----------------------------------------------------------
if(section==1){//section1
$(window).load(function() {

$('#nav2').animate({"height":"30px"}, 0);
$('.subSection').fadeOut(250);
$('.interior').fadeIn(0);
$('#selector').animate({"left":"0px"},0);
});
}
//----------------------------------------------------------
if(section==2){//section2
$(window).load(function() {

$('#nav2').animate({"height":"30px"}, 0);
$('.subSection').fadeOut(250);
$('.exterior').fadeIn(0);
$('#selector').animate({"left":"100px"},0);
});
}
//----------------------------------------------------------
if(section==3){//section3
$(window).load(function() {

$('#nav2').animate({"height":"30px"}, 0);
$('.subSection').fadeOut(250);
$('.view').fadeIn(0);
$('#selector').animate({"left":"200px"},0);
});
}

Мне нравится это, потому что не требуется ни строки запроса, ни якорейи это смехотворно просто

...