0

コードのさまざまなバージョンに関する情報を表形式で、時系列の逆順で含む Web ページを作成したいと考えています。以下にサンプルを示します。

Number    Release Date   End Date     Requires           Release Note   
----------------------------------------------------------------------------
3.2       12/31/2013     03/31/2014   Foo 1.0, Bar 2.1   [Link]
3.1       11/30/2013     01/31/2014   Foo 0.8, Bar 2.0   [Link]
3.0       10/15/2013     01/07/2014   Foo 0.8, Bar 2.0   [Link]
...
1.0       06/30/2013     09/15/2013   Foo 0.5, Bar 1.6   [Link]

HTML と CSS を使用して作成したこのテーブルを用意しました。ただし、リリース数が増えると、この表は長くなりすぎます。古いリリース情報を捨てたくありません。テーブルの一部を自動的に新しい HTML ファイルに移動することは可能ですか?たとえば、CSS やその他の手段を構成することで可能ですか?

結果は次のようになります。

Number    Release Date   End Date     Requires           Release Note   
----------------------------------------------------------------------------
9.2       12/31/2016     03/31/2017   Foo 6.0, Bar 8.1   [Link]
9.1       11/30/2016     01/31/2017   Foo 5.8, Bar 7.0   [Link]
9.0       10/15/2016     01/07/2017   Foo 5.8, Bar 7.0   [Link]
...
7.0       06/30/2016     09/15/2017   Foo 5.5, Bar 6.6   [Link]

[Older releases]

[Older releases]他の HTML ファイルへのハイパーリンクです。新しいリリースがあるたびに、あるファイルから別のファイルに手動で HTML を移動したくないですか?

私は Web デザインを始めたばかりで、そのようなものをどこで探すべきかわかりません。HTML/CSS がこれを達成できない場合、これを達成するのに役立つ他に何を読むべきですか?

4

2 に答える 2

1

コンテンツはテキストのみであり、ロードするのに時間がかからないため、jQuery を使用することをお勧めします。ページネーション プラグインを使用するか、残りのリリースを表示する「すべて表示」リンクを作成します。

これは、一度にすべてのリリースをロードすることを意味しますが、チャンクで表示します..

Google で見つけられるページネーション プラグイン、bxSliderは優れていますが、それほど複雑なものは必要ないと思います。

独自の単純な「すべて表示」機能を作成することもできます。基本的に：

HTML

[Your release table here]

<a href="#" class="show-all">Show all</a>

<div class="rest-of-the-releases" style="display:none">
    Data data data
</div>

Jクエリ

$('.show-all').click(function() {
    $('.rest-of-the-releases').fadeIn();
    $(this).fadeOut();
});

jsFiddle をチェックアウトする

于 2013-10-11T07:44:46.360 に答える