Creating a frame in HTML5

I am a QT C ++ UI programmer, new to html and trying to create a frame in HTML. See Attached Image.
The frame consists of 4 areas : ---

  • Top --- contains fixed buttons (will not change at runtime)
  • Left --- this contains buttons (will change at runtime)
  • Medium --- this contains buttons and messages (will change at runtime)
  • Right --- this contains another link in 3 sections

Now I want to achieve the following: ---

Upper section : -

  • when you click the first button on the top section --- 4 new buttons are created in the left section.
  • when you press the second button on the top section --- 10 new buttons are created in the left section.
  • similarly for other buttons of the top section.

Left Partiton : -

  1. when the first button is pressed in the left section --- 6 new buttons and messages are created in the Middle section .
  2. when you press the second button in the left section --- 8 new buttons and messages are created in the Middle section .
  3. Similarly for other buttons in the left section.

Correct section : ---

  • The right section contains some section in which I can show up to 4 links. Also change the links and runtime.

I know how to display a button and activate some javascript to take action.
But how to create these sections (LEFT, TOP, MIDDLE and RIGHT), where can I display different buttons at runtime?

iframe html-: -
http://www.w3schools.com/TAGS/tag_iframe.asp
http://www.w3schools.com/TAGS/tryit.asp?filename=tryhtml_iframe

HTML ?

======================= ================================================================= p >

... , ... , , , , Ui .

============================ =================================================================== =

HTML ui frame

+4
1

, , ( ), , iFrame - ​​.

, ​​:

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

JS 3 . HTML5, iFrame ( ) . , - , HTML- css,

, :

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

javascript header/aside/div.

, , / , / , .

UPDATE: jQuery: http://jsfiddle.net/Ye99u/

, , HTML5 , , (ex: div).

0

Source: https://habr.com/ru/post/1531501/


All Articles