0

我想创建一个网页，其中包含有关我的代码的各种版本的信息，以表格形式，按时间倒序排列。示例如下所示。

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 创建。但是，随着发布数量的增加，这个表会变得太长。我不想丢弃旧版本信息。是否可以通过配置 CSS 或其他方式自动将表格的一部分移动到新的 HTML 文件中？

结果如下所示：

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 从一个文件移动到另一个文件？

我是网页设计的新手，不知道在哪里寻找这些东西。如果 HTML/CSS 无法实现这一点，我还应该阅读哪些内容可以帮助我实现这一点？

4

2 回答 2

2

结果的分页通常在服务器中完成，该服务器仅获取结果页面所需的内容并将其发送到浏览器。这使浏览器中的页面加载和页面速度保持快速。

请参阅asp.net 中的此示例

于 2013-10-11T07:25:59.913 回答
1

由于内容只是文本，加载它不需要很长时间，我建议使用 jQuery - 一些分页插件或只是创建一个链接“显示全部”以显示其余版本。

这意味着您将一次加载所有版本，但以块的形式显示它们。

你可以从谷歌找到分页插件，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>

查询

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

签出jsFiddle

于 2013-10-11T07:44:46.360 回答