4

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

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

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

4

5 回答 5

6

我已经在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 中选项卡的工作方式根本不同。

于 2012-11-09T04:14:24.140 回答
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;">

在提交幻灯片中，通过动画 left 属性将所有 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的链接。

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

希望这可以帮助。

于 2012-11-10T07:45:01.033 回答
2

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

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' });

该代码将选项卡内容相对于 this 的宽度向左移动currentPanel，在本例中是您的第一个表单。您需要做的是为每个面板定义宽度，并根据每个面板的位置将其父容器 ( .tab-content) 移动到左侧。

CSS 将所有面板放在同一行（使用 inline-block）。它使用一个额外的包装器来包含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您可以通过检查参数并根据应显示的面板向左滑动来以相同的方式执行此操作。如果您希望我进一步说明这些，请告诉我。

于 2012-11-11T14:05:28.297 回答
1

JS斌

我发现你的问题...

 $(".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。

于 2012-11-02T20:57:46.307 回答
1

jQuery UI 效果“Slide”和“Drop”是否满足您的要求？它们应该是可配置的（左右两侧）。

于 2012-11-11T03:12:20.870 回答