0

したがって、3 ページ (Page1.php、Page2.php、Page3.php) の登録ページがあり、20 時間以上のコーディングの後にすべて完了しています。でも今はデザインの仕事をしています。私の考えは、3 つの異なるページ (Page1.php、Page2.php、Page3.php) ではなく、すべてのフォームを 1 つのページに配置することです。

フロントページはこんな感じ。 形

したがって、ユーザーが登録リンクをクリックすると、フォームがこの領域に表示されます。 フォーム登録

フォームのすべてのコードがあるので、コピーして貼り付けるだけです。しかし、フォームに何らかのスライダーを実装する必要があります。したがって、ユーザーが登録をクリックすると、右側にフォームが表示され、最初のページに入力し、右下にある [続行] をクリックすると、次のページにスライドします。ユーザーが [続行] をクリックしたときに、まったく新しいページに移動したくない、同じページにとどまりたい、別のコンテンツを表示したいだけであることに注意してください。

私は jquery ですべての onclick (表示/非表示) を行う方法を知っていますが、よりスムーズな移行とより良いエクスペリエンスを提供するために使用できる優れたプラグインがあるかどうか疑問に思っています。または、それを行うためのより良い方法がある場合 (純粋な CSS または何か)

4

1 に答える 1

2

すべてのコンテンツを.hide()と.show()に設定するだけdivで、一意の識別子があります。

だからあなたは持っています：

<a href="javascript:void();" data-tab="page1" class="tab">Page 1</a>
<a href="javascript:void();" data-tab="page2" class="tab">Page 2</a>
<a href="javascript:void();" data-tab="page3" class="tab">Page 3</a>
<div class="tab" data-tab="page1">Content for page 1</div>
<div class="tab" data-tab="page1">Content for page 1</div>
<div class="tab" data-tab="page1">Content for page 1</div>

jqueryコードを使用すると：

$('a.tab').click(function(){
    $('div.tab').hide();
    $('div.tab[data-tab=' + $(this).attr('data-tab') + ']').show();
});

さて、基本的にはそれだけです。あなたは残りをすることができます、しかしこれはあなたに正しい方向へのスタートを与えるはずです:)

必要に応じて複雑にすることができます。CakePhpのTabHelperを使用してこれを行うコーディングがあり、少しのjavascriptを使用して同じものを作成しました。jQueryUi tab plugin（ヒント）が好きじゃないから

また、を見てくださいPhp Frameworks、あなたはあなたがあなたの登録とログインのためにコーディングするのに20時間を費やしたと言いました..まあ、私は同じことをしましたCakePhp、しかし今私のサイトは完成し、完全に維持可能であり、適切な時間に電子メールを送信し、たくさんあります機能の。

于 2012-09-21T19:05:02.713 に答える