Проблема с вкладками между полями формы при использовании пользовательских полос прокрутки jQuery - PullRequest
Новая
       10

Проблема с вкладками между полями формы при использовании пользовательских полос прокрутки jQuery

2 голосов
/ 16 июля 2011

Я работаю над проектом по предоставлению дополнительного инструмента для веб-сайтов, который интенсивно использует jQuery.Презентация / дизайн имеют решающее значение, и я хочу заменить стандартную (некрасивую) полосу прокрутки, применяемую браузером, на элементы HTML с переполненным контентом, на что-то более привлекательное.

Существует множество плагинов jQuery, которые применяют пользовательские полосы прокрутки и допускают стилизацию с помощью CSS, что замечательно, но все те, которые я пробовал, похоже, страдают от одной и той же проблемы: если прокручиваемый контентсодержит форму с текстовыми полями и т. д., вкладка между полями не активирует полосу прокрутки, а в некоторых случаях может полностью испортить пользовательский макет полосы прокрутки.

Два примера плагинов, которые я пробовал:

http://manos.malihu.gr/jquery-custom-content-scroller http://baijs.nl/tinyscrollbar/

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

Все эти плагины работают более или менееточно так же, и я точно вижу, что происходит и почему, но мне просто интересно, если кто-то еще имел эту проблему и / или нашел решение?

Эта проблема может быть легко воспроизведена следующим образом (с помощью плагина tinyscrollbarin):

Добавьте это на стандартную тестовую страницу html -

CSS: 

<style>
    #tinyscrollbartest { width: 520px; height: 250px;  padding-right: 20px; background-color: #eee; }
    #tinyscrollbartest .viewport { width: 500px; height: 200px; overflow: hidden; position: relative; }
    #tinyscrollbartest .overview { list-style: none; position: absolute; left: 0; top: 0; }
    #tinyscrollbartest .scrollbar { position: relative; float: right; width: 15px; }
    #tinyscrollbartest .track { background: #d8eefd; height: 100%; width: 13px; position: relative; padding: 0 1px; }
    #tinyscrollbartest .thumb { height: 20px; width: 13px; cursor: pointer; overflow: hidden; position: absolute; top: 0; }
    #tinyscrollbartest .thumb .end { overflow: hidden; height: 5px; width: 13px; }
    #tinyscrollbartest .thumb, #tinyscrollbartest .thumb .end { background-color: #003d5d; }
    #tinyscrollbartest .disable { display: none; }
</style>

HTML: 

<div id="tinyscrollbartest">
    <div class="scrollbar">
        <div class="track">
            <div class="thumb">
                <div class="end"></div>
            </div>
        </div>
    </div>
    <div class="viewport">
        <div class="overview">
            </p>Here's a text field: <input type="text"/><p>
            ...
            // lots of content to force scrollbar to appear,
            // and to push the next field out of sight ..
            ...
            <p>Here's another field: <input type="text"/></p>
        </div>
    </div>
</div>

Ссылка на плагин(при условии ссылки на библиотеки jquery и т. д.): 

<script type="text/javascript" src="scripts/jquery.tinyscrollbar.min.js"></script>

Код Jquery: 

<script type="text/javascript">
    $(document).ready(function () {
        $('#tinyscrollbartest').tinyscrollbar();
    });
</script>

Теперь щелкните в первом текстовом поле, чтобы оно было в фокусе, нажмите клавишу Tab, чтобы перейти кследующий и посмотрим, что произойдет.

Ответы [ 2 ]

0 голосов
/ 01 мая 2012

Мне пришлось переписать стандартную функциональность табуляции моей собственной: 

  $(".scrollable").each(function() {
    if (!$(this).data("scrollbar"))
    {
      $(this).data("scrollbar", new Scrollbar({
        holder:$(this)
      }));
      $(this).find("input").bind("keydown", function(e) 
      {
        var keyCode = e.keyCode || e.which; 

        if (keyCode == 9) 
        {
          e.preventDefault();

          var scrollTo = $(this);

          if (e.shiftKey) 
          {
            var nextInput = $(this).prevAll("input:not([type=hidden])").first();
            scrollTo = nextInput.prevAll("input:not([type=hidden]), label").first();
          }
          else 
          {
            var nextInput = $(this).nextAll("input:not([type=hidden])").first();
          }

          if (nextInput.length) 

          {
            console.log(scrollTo);
            $(this).closest(".scrollable").data("scrollbar").scrollTo(scrollTo, function()
            {
              nextInput.focus().select();
            });
          }
        }
      }); 
    }
  });

Немного раздражает необходимость ждать прокрутки, но я не вижу другой возможности.

0 голосов
/ 18 августа 2011

Я понимаю вашу проблему. Но трудно найти хорошее решение для этого. Вы можете попытаться установить фокусное событие на элементах формы. И пусть это событие вызывает функцию scrollbar_update на tinyscrollbar. Вы можете установить offsetTop элемента формы, который в настоящее время имеет фокус в качестве параметра методов. Я думаю, что это сработало бы.

$ ( 'formelements'). Фокус (функция () { YourScrollbar.tinyscrollbar_update (this.offsetTop); });

...