4

ブートストラップで開発された 3 つのタブに分割された 3 ページの登録フォームがあります。現在のページが検証された後、あるページを別のページにスライドさせたい。これが私が意味することの実用的なデモです。このデモを実装しようとしましたが、コードがあまりにも異なっていて、適切に再現できませんでした。だからここに私がこれまでに持っているもののデモンストレーション: bin . ご覧のとおり、最初のタブが適切に検証されるまで、2 番目と 3 番目のタブは無効になっています。オプションを選択して [続行] をクリックした後、2 番目のタブにスライドさせたい。私はこのようなことを試しました：

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

しかし、それはうまくいかなかったので、どうすればいいですか？

4

5 に答える 5

6

私はこれをjsFiddle（http://jsfiddle.net/technotarek/ymxn4/ ）で作成しました。

改訂されたJSの全体は以下のとおりです。フィドルには少し新しいCSSが含まれていることに注意してください。HTMLも変更しましたが、＃tab-container divを除いて、すべて外観のためでした。このソリューションは、 http：//twitter.github.com/bootstrap/javascript.html#tabsのドキュメントに従って推奨される方法でTwitterBootstrapと連携します。

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 ..."で始まります）。元のコードが機能しなかった理由の一部は、デモで使用されたイージングライブラリが含まれていなかったため（@ 42によるコメントによる）、また、デモのコードがタブ効果の作成に使用されたためであることに注意してください。 TwitterBootstrapでのタブの動作とは根本的に異なります。

于 2012-11-09T04:14:24.140 に答える
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' });

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-11T14:05:28.297 に答える
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 をさらに 400 ピクセル左に移動します。

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

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

タブコンテンツの下のすべての div ではなく、特定の div を対象とするようにセレクターを変更したことに注意してください。

私の変更を含むビンへのリンクは次のとおりです。

最初の 2 つの div を実行したところですが、ここからアイデアを得る必要があります。

お役に立てれば。

于 2012-11-10T07:45:01.033 に答える
1

jQuery UI エフェクトの「スライド」と「ドロップ」は要件を満たしていますか? それらは構成可能である必要があります（左右）。

于 2012-11-11T03:12:20.870 に答える
1

JSビン

私はあなたの問題を見つけました...

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

まず、Div には絶対配置が必要です。CSS でより簡単に実行できます。

.tab-content div {position:absolute;}

2番目に次のようなものを使用

"-400px"

div を元の位置から -400px 移動します。

"400px"

div を 0 から 400px に移動し、+400px に着陸させます。

于 2012-11-02T20:57:46.307 に答える