jQuery UI 手风琴嵌入式表单重命名标题

发布于 2024-11-02 06:55:26 字数 1247 浏览 1 评论 0原文

我想在我的手风琴中嵌入一个表单。我希望用户能够编辑手风琴的内容。手风琴的内容部分工作正常，但是当我尝试编辑手风琴的标题时，我无法插入空格（当我按下空格时，当前选定的内容面板会折叠）。我猜这与标头是由块定义的事实有关，但我不明白为什么按空格键很重要或如何来解决这个问题。

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>

谢谢！

原文

I want to embed a form in my accordion. I want a user to be able to edit the contents of the accordion. Things work fine for the content section of the accordion, but when I try to edit the header of the accordion I can't insert spaces (and when I do press space the currently selected content panel collapses). I'm guessing this has something to do with the fact that the header is defined by a <a></a> block, but I can't think why pressing space bar matters or how to get around the issue.

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>

Thanks!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

默嘫て 2024-11-09 06:55:26

我找到了一个可行的解决方案，但我不确定后果。

在 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 );

，但我在第一次阅读时没有看到它。这个编辑对我有用。

希望有帮助

I found a working solution, but I'm not sure of the consequences.

In 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;
},

Notice the "fall through" from space to enter. I added a break:

_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;
},

You still get the closing behavior on pressing "enter", so feel free to break there if necessary as well. I think the problem is in

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

but I didn't see it on my first read through. This edit works for me.

Hope that helps

回复收藏 0 原文

~没有更多了~

关于作者

淡淡绿茶香

暂无简介

0 文章

0 评论

24 人气

关注发私信

友情链接

文江博客

jQuery UI 手风琴嵌入式表单重命名标题

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（1）

关于作者

相关话题

热门标签

推荐作者

胡图图

zt006

z祗昰~

冰葑

野の

天空

友情链接

jQuery UI 手风琴嵌入式表单重命名标题

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（1）

关于作者

相关话题

热门标签

推荐作者

胡图图

zt006

z祗昰~

冰葑

野の

天空

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。