Question

我将Fancybox用于大型图库，我似乎无法找到使用tabindex关注各个图库控件的正确方法，以便进行键盘导航。

jQuery(document).ready(function() {
      $("[data-fancybox]").fancybox({
        baseTpl : '<div class="fancybox-container" role="dialog" tabindex="-1">' +
                    '<div class="fancybox-bg"></div>' +
                    '<div class="fancybox-caption-wrap" style="top:0;padding-top:15px;background:none;">' +
                      '<div class="fancybox-caption" style="border:0;"></div>' +
                    '</div><button class="fancybox-button fancybox-button--left" data-fancybox-previous="" style="top:45%;left:0 !important;z-index:9999999;" title="Previous" tabindex="1"></button>' +
                    '<div class="fancybox-controls" style="bottom:0;top:auto;">' +
                      '<div class="fancybox-infobar" style="width:100%;">' +
                        '<div class="fancybox-infobar__body" style="background:transparent;">' +
                          '<span class="js-fancybox-index"></span>&nbsp;/&nbsp;<span class="js-fancybox-count"></span>' +
                        '</div>' +
                      '</div>' +
                    '</div>' +
                    '<div class="fancybox-controls">' +
                      '<div class="fancybox-buttons">' +
                        '<button class="fancybox-button fancybox-button--close" data-fancybox-close="" title="Close (Esc)" tabindex="1"></button>' +
                      '</div>' +
                    '</div>' +
                    '<div class="fancybox-slider-wrap">' +
                      '<div class="fancybox-slider"></div>' +
                    '</div>' +
                    '<button class="fancybox-button fancybox-button--right" data-fancybox-next="" style="top:45%;right:0 !important;z-index:9999999;position:fixed;" title="Next" tabindex="1"></button>' +
                  '</div>'
      });
    });

知道我做错了什么吗？我附上了tabindex =＆＃34; 1＆＃34;到每个节点并以这种方式进行测试 - 当我在浏览器中选项卡时，我似乎得到的只是关注标题，但没有任何控件（按钮等）。

http://fancyapps.com/fancybox/3/

键盘专注于画廊控件

0 个答案: