HTML 选项卡式表单滑动

Posted 2023-05-08

【中文标题】HTML 选项卡式表单滑动

【英文标题】：HTML Tabbed Form Sliding

【发布时间】：2012-10-23 13:19:52

【问题描述】：

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

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

但这没有用，我该怎么做呢？

【问题讨论】：

您链接到的演示正在使用 jQuery 缓动插件。我自己没用过，这里有一个链接：gsgd.co.uk/sandbox/jquery/easing

【参考方案1】：

我已经在 http://jsfiddle.net/technotarek/ymxn4/ 的 jsFiddle 上解决了这个问题。

修改后的 JS 全文如下。请注意，小提琴包含一些新的 CSS。我还修改了 html，但除了 #tab-container div 之外，这一切都只是为了外观。该解决方案以推荐的方式与 Twitter Bootstrap 一起使用，根据他们在http://twitter.github.com/bootstrap/javascript.html#tabs的文档中的@

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

【讨论】：

除了方法上的不同之外，我的解决方案与其他解决方案的主要区别在于，在单击按钮和验证通道时会激活、滑动和显示正确的选项卡。也就是说，用户不需要单击按钮然后单击选项卡来移动。我相信这更符合您最终想要/需要的最终用户体验。根据选项卡/表单的最终尺寸，您可能需要调整脚本最后两部分中的“左侧”尺寸。

【参考方案2】：

你所拥有的几乎就在那里

这个想法是您将 div 并排放置，并在您浏览选项卡时将它们一起滑动。

为了让它工作，给你的每个 div 一个起点，例如0px、400px、800px 和位置：相对：

    <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 with my changes的链接。

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

希望这会有所帮助。

【参考方案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 将所有面板放在同一行（使用 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 参数并根据应显示的面板向左滑动来以相同的方式执行此操作。如果您希望我进一步说明这些，请告诉我。

【参考方案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。

【参考方案5】：

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