如何拆分页面并显示下面的内容？

Question

我已经在我的iPhone应用程序上实现了这一点，但我想知道它是否可以在HTML页面上使用，可能使用CSS效果或类似功能。

如您所见，当前视图已拆分，底部向下移动，另一个视图显示在下方。我有一个页面，我想试试这个。任何想法，如果这是可能的，以及我如何能做到的任何具体细节？我非常是HTML编码的新手，所以请放轻松我。 ：）

提前致谢！

Answer 1

以下是一个让您入门的示例http://jsfiddle.net/Cquhj/

要从这种模式中剔除一些东西：

1. middle div具有overflow: hidden;属性和height: 0px。
2. trigger图标有一个事件可以将height div的middle补间到您想要的大小。

编辑：
我非常喜欢给出的资源和答案，我会将其添加到列表http://wiki.forum.nokia.com/index.php/Mobile_Design_Pattern:_Accordion_Menu

Answer 2

这里有更新，更像iphone

http://jsfiddle.net/mFeyn/1/

一旦点击，它就会错过文件夹底部的三角形，并在有超过4个图标时计算容器的高度。

Answer 3

是的，这绝对是可能的，没有什么与众不同的，肯定会需要CSS。

实际上，您的问题非常通用，答案是：了解HTML和CSS以及两者的结合，以创建符合标准的网页布局。您可能也想了解盒子模型。要解决您的问题，您需要了解一系列<div>的使用，定位和浮动，以实现所需的布局。

如果你想添加动画，就像拆分视图的某些部分浮动到位，你也需要Javascript。

您对SO的研究的可能起点：
Why not use tables for layout in HTML?
https://stackoverflow.com/search?q=css+div+column

Answer 4

这是一个代码示例，如果您的计划是使用jQuery模拟iOS 4文件夹行为，可能会给您更多一点。

视图基本上被分成行，我玩了w /背景位置css属性，以允许背景分裂错觉。

http://jsfiddle.net/hKHWL/

Answer 5

这很有可能，但有点像问“我想编制文明，我对C很新;我该怎么做？” ; - ）

我强烈建议您选择一本好的“DHTML”（动态HTML）书籍。例如，我很喜欢这个，来自SitePoint：http://www.sitepoint.com/books/dhtml1/

如果您不是购书类型，SitePoint和AListApart等网站当然也可以解释这些内容，但不能按照格式组织。

祝你好运。

Answer 6

我知道这是一个旧的帖子/问题...... 但我在这里以动态的高度和位置这样做：

http://webkit-os.pixelass.com/iframe/ （仅适用于Chrome和Safari） 我使用jQuery和两个具有相同图像的div。 动态位置意味着..您可以将文件夹移动到其他位置或页面。 动态高度意味着...高度相对于文件夹中的图标行数。

如果内容太高而无法在下方显示，则文件夹甚至会在上方和下方打开。 （从Dock打开文件夹不起作用）