фокус вызывает проблемы на дизайне 1 страницы - PullRequest
Новая
       27

фокус вызывает проблемы на дизайне 1 страницы

0 голосов
/ 16 октября 2010

У меня есть 1-страничный веб-сайт, управляемый плагином jquery scrollTo, который, я думаю, не имеет значения в моем случае.Кажется, проблема в дизайне 1 страницы.Если я нажимаю на вкладку, весь дизайн портится, потому что вкладка переходит к тому, на чем она может сосредоточиться.Это включает места, которые находятся за пределами текущей области области просмотра.
На самом деле я не хочу, чтобы вкладка фокусировалась на чем-либо, кроме моего #contactForm div после того, как вы щелкнули в первом поле формы.Вкладка может фокусироваться на этом, но только если хеш "#contact" находится в области просмотра.Есть ли способ реализовать что-то подобное или же вкладка / фокус всегда портят одностраничные дизайны, которые имеют дело с контентом вне области просмотра?

Может быть, некоторые идеи помогут мне понятьэтот вопрос немного лучше

1 Ответ

1 голос
/ 16 октября 2010

Поскольку я не знаю, как выглядит ваш HTML, я позаимствовал демонстрацию ScrollTo.Вы можете попробовать сделать ссылку, которая имеет фокус внутри панели, чтобы панель стала видимой ( demo ):

Примерно так: 

$('#pane-target li a').bind('focusin', function() {
    $('#pane-target').scrollTo( $(this).closest('li'), 800, {queue: true} );
})

Обновленная демоверсия для удаленияконфликт между связыванием и нажатием на кнопку возврата.

Обновление : изменено demo для работы с HTML / Script по предоставленной вами ссылке.Мне пришлось немного его изменить, чтобы ссылки не конфликтовали.Также я переместил класс .selected к элементу вместо ссылки только на первой панели.Надеюсь, я добавил достаточно комментариев, чтобы все было понятно. 

 $('a').bind('focusin click', function(e){

  // focusin occurs before click
  if (e.type == 'click') {

   var tar = $(this).attr('href');

   if ($(this).is('.panel')) {
    // clicked on a.panel; scroll to destination
    $('#wrapper').scrollTo(tar, 800);
    //reset and highlight the clicked link
    $('.item').removeClass('selected');
    $(tar).addClass('selected');
    //cancel the link default behavior
    return false;
   } else {
    // clicked on link (not '.panel'), return true in case it's an external link
    return true;
   }

  } else {
   // link was focused 
   var time, item = $(this).closest('.item');
    if (item.is('.selected')){
     // if item is already in view (position it immediately)
     time = 0;
    } else {
     // item is not in view, so smoothly scroll & update classes
     time = 800;
     $('.item').removeClass('selected');
     item.addClass('selected');
    }
   $('#wrapper').scrollTo(item, time);
  }

 });
...