3

このダイアログが示す効果を再現したい:

http://jqueryui.com/dialog/#modal-form

このページで、[Create new user] をクリックすると、いくつかのコントロールを含むフォームが表示されます。私が再現したい効果は、このダイアログでタブを移動すると、タブ オーダーがそのタブのコントロール内でのみ循環し、ダイアログ外のコントロールやその他の選択可能な要素には循環しないことです。彼らがどのようにそれをしているのか、私にはよくわかりません。誰か説明してくれませんか？

4

1 に答える 1

1

この動作は JavaScript によって制御されていることがわかりました。jqueryui は、ダイアログの keydown イベントにバインドします。

    this._on( this.uiDialog, {
        keydown: function( event ) {
            if ( this.options.closeOnEscape && !event.isDefaultPrevented() && event.keyCode &&
                    event.keyCode === $.ui.keyCode.ESCAPE ) {
                event.preventDefault();
                this.close( event );
                return;
            }

            // prevent tabbing out of dialogs
            if ( event.keyCode !== $.ui.keyCode.TAB ) {
                return;
            }
            var tabbables = this.uiDialog.find(":tabbable"),
                first = tabbables.filter(":first"),
                last  = tabbables.filter(":last");

            if ( ( event.target === last[0] || event.target === this.uiDialog[0] ) && !event.shiftKey ) {
                first.focus( 1 );
                event.preventDefault();
            } else if ( ( event.target === first[0] || event.target === this.uiDialog[0] ) && event.shiftKey ) {
                last.focus( 1 );
                event.preventDefault();
            }
        },

基本的に、これにより、タブ キーによるダイアログ内でのループが可能になります。

于 2013-11-04T04:21:08.907 に答える