实现“Coda-like”每个“面板”上带有表单的 jQuery 滑块

Question

所有，

我正在实现一个像 jQuery 滑块一样的“Coda”（我正在使用 Niall Doherty 的出色实现：http://www.ndoherty.biz/2009/10/coda-slider-2/）。

一般来说，效果很好。

然而，我遇到的问题是......每个“面板”都包含多个文本输入。如果用户到达面板中的最后一个输入，然后单击 [TAB]（或 iPad 上的“下一步”按钮），Safari 会自动移动滑动包装器以将下一个文本输入带入视图。

当然，它仅将包装器滑动到足以使下一个文本输入进入视图的程度 - 不足以使整个下一个面板进入视图。

换句话说 - 假设每个面板的宽度为 600px，并且我有三个面板。

因此，如果用户到达第一个面板上的最后一个输入，然后单击 TAB，我希望包装器移动 600 像素，以使下一个面板完全进入视图。然而，浏览器只是将其滑动得足够远，以便可以看到下一个文本输入。

有没有人遇到这个问题，并提出一个可靠的解决方案？

预先非常感谢您的任何建议和见解！

Answer 1

哈!我想通了！

问题是，当输入超出可见区域时，浏览器会滚动 div，使其可见。由于你的 #coda-slider 或任何你称之为的 id 没有滚动条，所以你无法看到发生了什么，也无法手动将其移回。

请注意，coda-slider 不会改变滚动位置，因此即使 coda-slider 移动，它仍然会偏移滚动偏移量。

但是，只要 #coda-slider 更改滚动位置，您就可以简单地将滚动位置设置为 0 每次输入获得焦点。然后你可以找出输入位于哪个选项卡并触发尾声来发挥它的魔力。如果您的内容高度不同，您也可以使用scrollTop(0)。

$('#coda-slider-1').scroll( function() {
    $('#coda-slider-1').scrollLeft(0);
    $('#coda-slider-1').scrollTop(0);
});

$('input').focus( function() {
    var tabindex = $(this).parents('.panel').prevAll('.panel').size() + 1;

    $('.tab' +tabindex +' > a').trigger('click');
});

示例如下：

http://jsfiddle.net/u99AJ/

更新：

Safari 上发生了一些更奇怪的事情。这不起作用。

更新2：

焦点和滚动的顺序在 Safari 中似乎有一种奇怪的效果。更新跨浏览器支持的示例：

http://jsfiddle.net/u99AJ/4/

Update3：

添加了代码（在下面的 jsfiddle 示例中）来解决 coda-slider 错误，即使单击同一选项卡，仍然会调用 animate 。在某些情况下，这可能会导致选项卡切换看起来有延迟，尤其是在快速切换输入时。

http://jsfiddle.net/u99AJ/7/