在HTML5中创建框架

Question

在HTML5中创建框架

javascriptcsshtml

4

I是QT C++ UI程序员，对HTML新手，并尝试在HTML中创建一个框架。请参见附图。 框架由4个区域组成：---

顶部---它包含固定按钮（不会在运行时更改）
左侧---这包含按钮（将在运行时更改）
中间---这包含按钮和消息（将在运行时更改）
右侧---这包含3个分区中的不同链接

现在我想要实现以下内容：--- 顶部区域：--

按下顶部区域的第一个按钮时，在左侧分区创建4个新按钮。
按下顶部区域的第二个按钮时，在左侧分区创建10个新按钮。
类似地，适用于顶部分区的其他按钮。

左分区：--

当左侧第一个按钮被按下时，会在中间分区创建6个新的按钮和消息。
当左侧第二个按钮被按下时，会在中间分区创建8个新的按钮和消息。
对于左侧分区的其他按钮也是如此。

右侧分区：---

右侧分区包含一些分区，我可以在其中显示最多4个链接。还可以在运行时更改这些链接。

我知道如何显示按钮并激活一些JavaScript以执行操作。
但我如何创建这些分区（左、上、中和右），以便可以在运行时显示不同的按钮？

iframe可以用来创建分区以显示HTML链接：--
http://www.w3schools.com/TAGS/tag_iframe.asp
http://www.w3schools.com/TAGS/tryit.asp?filename=tryhtml_iframe

使用哪些HTML元素可以实现这一点？

======================= 摘要 =====================

我需要制作页面的布局...是的，开发人员事先知道要在左侧或中间分区显示哪个元素...唯一不知道的是从远程服务器发送到UI的要显示在右侧分区的链接元素。

============================== 图片 =================

HTML ui frame

- Katoch

不要使用iframes，它们仍然存在于html5中，但不是为此目的而设计的。您正在尝试实现的内容在10年前是有效的，但您可以在Google中快速发现这是一种不好的做法。相反，您应该使用divs进行布局或任何相关的html5标签（如nav、header、aside等），并使用ajax实现所需的行为。 - Lu Roman

你的意思是使用>>和ajax来实现你想要的行为吗？ - Katoch

我假设中间部分的消息是动态加载的，您想要的所有行为都可以并且应该使用JavaScript来完成。如果您计划从服务器检索数据以填充其中一个部分，则可以使用ajax异步获取该数据。如果所有信息都包含在静态页面中，则不需要ajax。这似乎是Angular.js或Backbone.js简单应用程序的好选择，但我只是试图指出任何可能帮助您的方向 =) - Lu Roman

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ylerjen · Answer 1

我希望我没有误解你想做的事情（图片被代理阻止），但我认为iFrame不是这种演示方式的最佳选择。

据我所知，你想提供这样的结构：

+-------------------------------------+
| top                                 |
|                                     |
+--------------+----------------------+
|  left        |       right          |
|              |                      |
+--------------+----------------------+

但是你想要在3个框架之间与JS进行交互。这是使用HTML5可能的，但iFrame更适合在内容中插入外部页面（来自另一个或同一域）。如果您想要分离不同的内容，则应使用html元素和css样式，但所有内容都在同一页中。

例如，作为简单案例，您可以使用以下简单结构：

<html>
...
<body>
<header>Top</header>
<aside>left</aside>
<div id="content">right</div>
</body></html>

使用JavaScript将您的内容添加到头部/侧边栏/ div元素中。

或者比每次更改整个内容更好，运行时将所有元素/按钮放置在其中，然后仅隐藏/显示所需的元素。

更新：这是一个使用jQuery进行基本交互的示例：http://jsfiddle.net/Ye99u/ 正如Quentin所说，在选择HTML5元素作为容器之前，请阅读文档以了解它们的含义或选择通用元素（例如div）。