jQuery UI Аккордеонный Встроенный заголовок переименования формы - PullRequest
Новая
       3

jQuery UI Аккордеонный Встроенный заголовок переименования формы

0 голосов
/ 20 апреля 2011

Я хочу встроить форму в мой аккордеон. Я хочу, чтобы пользователь мог редактировать содержимое аккордеона. Все хорошо работает с разделом содержимого аккордеона, но когда я пытаюсь редактировать заголовок аккордеона, я не могу вставить пробелы (и когда я нажимаю пробел, текущая выбранная панель содержимого рушится). Я предполагаю, что это как-то связано с тем фактом, что заголовок определяется блоком <a></a>, но я не могу понять, почему нажатие клавиши пробела имеет значение или как обойти проблему. 

function makeAccordion(){
            var stop = false;
            $("#accordion h3").click(function(event){
                if (stop) {
                    event.stopImmediatePropagation();
                    event.preventDefault();
                    stop = false;

                }
            });
            $("#accordion").accordion({
                header: "h3"
            }).sortable({
                axis: "y",
                handle: "h3",
                stop: function(event, ui){
                    stop = true;
                }
            });
        }

<body>
    <div id="accordion">
        <form action="" method="post">
            <div id ="1">
                <h3 id ="h3_1"><a href="#">Step Name: <input type="text" name="stepName"></a></h3>
                <div id ="content_1">
                    Step: <input type="text" name="content">
                </div>
            </div>
        </form>
    </div>
</body>

Спасибо!

1 Ответ

0 голосов
/ 21 апреля 2011

Я нашел рабочее решение, но я не уверен в последствиях.

В jquery.ui.accordion.js: 

_keydown: function( event ) {
    if ( this.options.disabled || event.altKey || event.ctrlKey ) {
        return;
    }

    var keyCode = $.ui.keyCode,
        length = this.headers.length,
        currentIndex = this.headers.index( event.target ),
        toFocus = false;

    switch ( event.keyCode ) {
        case keyCode.RIGHT:
        case keyCode.DOWN:
            toFocus = this.headers[ ( currentIndex + 1 ) % length ];
            break;
        case keyCode.LEFT:
        case keyCode.UP:
            toFocus = this.headers[ ( currentIndex - 1 + length ) % length ];
            break;
        case keyCode.SPACE:
        case keyCode.ENTER:
            this._clickHandler( { target: event.target }, event.target );
            event.preventDefault();
    }

    if ( toFocus ) {
        $( event.target ).attr( "tabIndex", -1 );
        $( toFocus ).attr( "tabIndex", 0 );
        toFocus.focus();
        return false;
    }

    return true;
},

Обратите внимание на "провал" из космоса, чтобы войти. Я добавил перерыв: 

_keydown: function( event ) {
    if ( this.options.disabled || event.altKey || event.ctrlKey ) {
        return;
    }

    var keyCode = $.ui.keyCode,
        length = this.headers.length,
        currentIndex = this.headers.index( event.target ),
        toFocus = false;

    switch ( event.keyCode ) {
        case keyCode.RIGHT:
        case keyCode.DOWN:
            toFocus = this.headers[ ( currentIndex + 1 ) % length ];
            break;
        case keyCode.LEFT:
        case keyCode.UP:
            toFocus = this.headers[ ( currentIndex - 1 + length ) % length ];
            break;
        case keyCode.SPACE:
            break;
        case keyCode.ENTER:
            this._clickHandler( { target: event.target }, event.target );
            event.preventDefault();
    }

    if ( toFocus ) {
        $( event.target ).attr( "tabIndex", -1 );
        $( toFocus ).attr( "tabIndex", 0 );
        toFocus.focus();
        return false;
    }

    return true;
},

Вы по-прежнему получаете закрывающее поведение при нажатии «enter», так что не стесняйтесь прорваться туда, если это необходимо. Я думаю, что проблема в 

this._clickHandler( { target: event.target }, event.target );

но я не увидел его при первом прочтении. Это редактирование работает для меня.

Надеюсь, это поможет

...