HTML選項卡表單滑動

我有一個三頁的註冊表單，它分成三個選項卡，都是在啓動時開發的。我想在當前頁面驗證完成後將其中一頁滑入另一頁。這是我的意思是工作demo。我試圖實現這個演示，但代碼太不同了，我無法正確複製。所以這裏是我到目前爲止的演示：bin。正如你所看到的，第二個和第三個標籤被禁用，直到第一個標籤被正確驗證。選擇一個選項並單擊繼續後，我希望它滑入第二個選項卡。我試過這樣的事情：HTML選項卡表單滑動

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

但是這並沒有工作，所以我該怎麼做呢？

來源

2012-11-02 Richard

您鏈接到的演示使用jQuery緩動插件。我沒有使用它自己，但這是一個鏈接：http://gsgd.co.uk/sandbox/jquery/easing/ –

我已經在jsFiddle上工作過，在http://jsfiddle.net/technotarek/ymxn4/。

修訂後的JS，全部內容如下。請注意，小提琴包含了一些新的CSS。我也修改了HTML，但除了＃tab-container div之外，它只是爲了外觀。該解決方案與Twitter的引導工作在按他們的文檔推薦的方式在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); 
});

來讓一切工作的關鍵是在腳本的末尾（從「//重新定位......」）。請注意，原始代碼無法工作的原因部分原因是您沒有在演示中使用緩衝庫（根據@四十二評論），但也因爲演示中的代碼用於創建選項卡效果與標籤在Twitter Bootstrap中的工作方式根本不同。

來源

2012-11-09 04:14:24 technoTarek

除了方法的差異，我的解決方案和其他人之間的主要區別是當點擊一個按鈕和驗證通道時，適當的選項卡被激活，滑動並顯示。也就是說，用戶不需要單擊該按鈕，然後單擊該標籤以移動。我相信這更符合您最終想要/需要的最終用戶體驗。根據選項卡/表單的最終尺寸，您可能需要調整腳本最後兩個部分的「左」尺寸。 – technoTarek

JS Bin

，我發現你的問題......

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

首先，你需要股利絕對定位。在CSS中更容易完成。

.tab-content div {position:absolute;}

其次使用類似

"-400px"

將從原來的位置，那裏的

"400px"

將從0股利移動400像素移動DIV -400px，它落地+ 400像素。

來源

2012-11-02 20:57:46 VIDesignz

你遇到了什麼幾乎沒有

的想法是，你定位你的div並排側滑動他們都相處在一起，你通過選項卡移動。

爲了讓它起作用，讓每個div都有一個起點，例如0像素，400像素，800像素和位置：相對：

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

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

在提交幻燈片所有的div 400像素的進一步向由動畫left屬性左：

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

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

請注意，我選擇改變針對特定的div，而不是標籤內容下的所有div。

這是鏈接到bin with my changes。

我只是做了前兩個div，但你應該從中得到這個想法。

希望這會有所幫助。

來源

2012-11-10 07:45:01 scdove

是否滿足您的要求的jQuery UI效果「幻燈片」和「下降」？它們應該是可配置的（左右側）。

來源

2012-11-11 03:12:20 pbies

有一個在你的代碼的這個修改後的版本：

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參數並根據應顯示哪個面板向左滑動來以相同的方式執行此操作。讓我知道你是否希望我進一步說明這一點。

來源

2012-11-11 14:05:28 Matthew

HTML選項卡表單滑動

回答

相關問題