Question

我有一个三页的注册表单，分为三个选项卡，所有这些都是在bootstrap上开发的。我想在验证当前页面后将一页翻到另一页。这是我的意思的工作demo。我试着实现这个演示但是代码太不同了我无法正确复制。所以这里展示了我到目前为止的所有内容：bin。如您所见，第二个和第三个选项卡被禁用，直到第一个选项卡得到正确验证。选择一个选项并单击继续后，我希望它滑入第二个选项卡。我试过这样的事情：

$(".tab-content div").animate({left: "0px"}, { duration: 350, easing: 'easeInOutCirc' });

但那不起作用，我该怎么做呢？

Answer 1

我在http://jsfiddle.net/technotarek/ymxn4/处的jsFiddle上做过这个。

修订后的JS全部如下。请注意，小提琴包括一些新的CSS。我也修改了HTML，但除了＃tab-container div之外，它只是出于好看。该解决方案根据他们在http://twitter.github.com/bootstrap/javascript.html#tabs

的文档推荐的方式与Twitter Bootstrap配合使用

var selector;
var selectorID;

activateTab('#myTab a:first');

function activateTab(selectorID) 
{
    $(selectorID).tab('show')
        .closest('.disabled').removeClass('disabled');    
}

function deactivateTab(selector) 
{
    $(selector).off('click.twbstab')
        .closest('li').addClass('disabled');
}

$('.btn-demo').on('click',function() {
    selector = '#myTab a[href="'+$(this).data('activate')+'"]';
    selectorID = $(selector).attr('href');
});

var val1 = $('#frmtype1').validate(
{
    errorPlacement: function(error, element) {}, 
    // prevent the standard error message from showing, rather you use the inline-text
    rules: {
        'Reg_type': {
            required: true
        }
    }
});

// validate 1st form
$('#frmtype1').submit(function(e) 
{
    // validate the first page
    if(val1.form()) {
        $('.help-inline').hide();
        activateTab(selector);
    } else {
        $('.help-inline').show();
    }
    return false;
});

// validate 2nd form
$('#frmtype2').submit(function(e) 
{
    // validate the second page
    activateTab(selector);
    return false;
});


// if 2nd or 3rd tab is clicked, validate as if the form was submitted
$('#myTab li:eq(1) a, #myTab li:eq(2) a').click(function(e) 
{
    selectorID = $(this).attr('href');
    // validate the first page
    if(val1.form()) {
        $('.help-inline').hide();
        activateTab(this);
        $(selectorID).tab('show');
    } else {
        $('.help-inline').show();
    }
    return false;
});

// re-position all tab-panes, except the active pane, so that they are prepared for the slide effect
$(".tab-pane").css("position", "relative");
$(".tab-pane").not(".active").animate({
    left: "1000px"
});

// perform slide effect
$('a[data-toggle="tab"]').on('show', function (e) {
    lastPane = $(e.relatedTarget).attr('href');
    $(lastPane).animate({left: "1000px"}, 300)
    currPane = $(e.target).attr('href');
    $(currPane).animate({left: "0px"}, 300);
});

让一切顺利进行的关键在于脚本的最后（以“// re-position ...”开头）。请注意，原始代码不起作用的原因部分是因为您没有包含演示中使用的缓动库（根据@ forty-two的注释），还因为演示中的代码用于创建制表符效果与Twitter Bootstrap中的标签工作方式有根本的不同。

Answer 2

你所拥有的几乎就在那里

我们的想法是，当你在标签中移动时，你并排放置你的div并将它们一起滑动。

要让它发挥作用，请为每个div提供一个起点，例如： 0px，400px，800px和position：relative：

    <div class="tab-pane active" id="options" style="left: 0; position: relative;">

    <div class="tab-pane" id="information" style="left: 400px; position: relative;">

在提交幻灯片中，通过为左侧属性设置动画，所有div 400px进一步向左：

        $(".tab-content div#options").animate({left: "-400px"}, { duration: 350, easing: 'easeInOutCirc' }); 

        $(".tab-content div#information").animate({left: "0px"}, { duration: 350, easing: 'easeInOutCirc' });

请注意，我更改了选择器以定位特定div而不是tab-content下的所有div。

以下是bin with my changes的链接。

我刚做了前两个div，但你应该从中得到这个想法。

希望这有帮助。

Answer 3

查看代码的这个修改版本：

http://jsbin.com/asarek/21/edit

特别是，我添加了一些CSS和JS，使其更接近您提供的示例：

JS：

var currentPanel = jQuery(this).parent();
$(".tab-content").animate({left: "-"+currentPanel.width()+"px"}, { duration: 350, easing: 'easeInOutCirc' });

该代码相对于此currentPanel的宽度向左移动标签内容，在这种情况下，这是您的第一个表单。您需要做的是为每个面板定义宽度，并根据每个面板的位置将其父容器（.tab-content）移动到左侧。

CSS将面板全部放在同一行（使用内联块）。它使用一个额外的包装器来包含tab-content并隐藏溢出。

CSS

  .tab-wrapper
    {
     overflow:hidden;
     width:500px;
    }
    .tab-content
    {
      position:relative;
      white-space:nowrap;
      overflow:visible;
    }
    .tab-content .tab-pane
    {
      display:inline-block;
    }

我的例子没有做的是将滑动效果合并到标签点击中。您提供的示例通过检查单击的链接来执行此操作。您可以通过检查selector参数并根据应显示的面板向左滑动以相同的方式执行此操作。如果您希望我进一步说明这一点，请告诉我。

Answer 4

JS Bin

我发现了你的问题...

 $(".tab-content div").css({position: 'absolute'}).animate({left: "-400px"}, 350);

首先，你的Div需要绝对定位。在CSS中更容易完成。

.tab-content div {position:absolute;}

第二次使用

之类的东西

"-400px"

将div -400px从其原始位置移动，其中为

"400px"

将div从0移到400px，将其降至+ 400px。

Answer 5

jQuery UI效果“幻灯片”和“删除”是否符合您的要求？它们应该是可配置的（左右侧）。

HTML标签式窗体滑动

5 个答案: