0

これは、タブを使用してダイアログ ボックス内で項目をトラバースできない職場で割り当てられたアクセシビリティのバグです。

本当に奇妙な問題です。皆さんが助けてくれることを願っています。

次のコードから始めます...これは、次のようないくつかのオブジェクト変数にラップされています

(<selector>).dialog(bam.ui.dialogOptions());

dialogOptions にコメントを入れたので、関数 .tabAccess; をどこで呼び出しているかがわかります。これは、ダイアログ内で tabindex を利用し、ダイアログ内で必要なことを強制する私の試みです。

dialogOptions: function (options) {
        var settings = { title: "", showScrollbar: true };
        if (options) {
            $.extend(settings, options);
        }
        return {
            height: 373,
            width: 648,
            modal: true,
            title: settings.title,
            resizable: false,
            open: function (event, ui) {
                $(this).parent().focus();
                $('html').addClass("hidden-scrollbar");
                $(event.target).html(DialogLoadingdlg);
                $(this).find("input:enabled:last").live("blur", function () { $("a.ui-dialog-titlebar-close").focus(); });
                $("span.ui-icon-closethick").html(closeImage);
/*TAB ACCESS CALLED HERE; 
ASSIGNING IT TO THE PARENT ELEMENT OF THE DIALOG CONTENT, 
THAT BEING THE DIALOG ITSELF*/
                $(this).parent().tabAccess(); 
            },
            close: function (event, ui) {
                $('.operate a').removeClass("selected");
                if (settings.showScrollbar)
                    $('html').removeClass("hidden-scrollbar");
            }
        }
    }

ここに関数tabAccessがあります

(function ($) {
$.fn.tabAccess = function () {
    return this.each(function () {
        $('a:hover, a:focus', 'input:hover', 'input.focus').css('outline', 'thin dashed grey');
        var $tabableElements = Array('A', 'INPUT');
        var $this = $(this);
        var keyName = { "tab": 9 };
        var flag = 0;
        var tabIndex = 1;
        beginIteration($this);

/*The idea behind this function is to traverse through all children of the 
dialog; as well as all their children, applying the tabindex attribute to
only the elements contained in $tabableElements defined above and skipping
the other elements*/

        function beginIteration(item) {
            item.children().each(function(index) {
                if ($.inArray($(this).attr('tagName'), $tabableElements) != -1) {
                    $(this).attr('tabindex', tabIndex);
                    tabIndex++;
                } else {
/*The code works when I put an alert in here
but it alerts every element that is not a match
for $tabableElements; so, clearly I can't keep this.

I have tried everything from setTimeout, to console.log,
but when I take this alert out, the code does not insert
tabindex into the elements I want.*/
                    alert($(this).attr('tagName');
                    beginIteration($(this));
                }
            });
        }

        $this.bind({
            keydown: function (e) {
                switch (e.keyCode) {
                    case keyName.tab:
                    {
                        e.preventDefault();

                        if (e.shiftKey) {
                            e.preventDefault();

                        }
                        break;
                    }
                }
            }
        });
    });
};
})(jQuery);

誰か助けて!?

いつものように、事前に感謝します...さらに情報が必要な場合はお知らせください。

4

1 に答える 1

0

わかりました、それで...問題は私の質問で言及していなかったものでした。記録として、誰かがこの問題を抱えている場合...おそらくすでにここにありますが...

問題は、ダイアログへの ajax 呼び出しが実行を完了するのに十分な時間が与えられなかったことです。

配置する

var intervalHandler = setInterval(function() {
            if ($this.find('.loading').length == 0) {
                beginIteration($this);

                clearInterval(intervalHandler);
            }
        }, 500);

beginIteration電話がすべてを解決する前に。

于 2013-05-29T01:41:42.637 に答える