|
|
| Line 1: |
Line 1: |
| <html>
| |
| <head>
| |
| <style>
| |
|
| |
|
| .container {
| |
| top: 20px;
| |
| left: 20px;
| |
| width: 400px;
| |
| height: 300px;
| |
| border-style: dotted;
| |
| border-width: 1px;
| |
| padding: 20px;
| |
| }
| |
| .blue {
| |
| background-color: #ccccff;
| |
| }
| |
| .green {
| |
| background-color: #ccffcc;
| |
| }
| |
| </style>
| |
| </head>
| |
| <body>
| |
| <script>
| |
| // Create PanelLayouts to add to the GridLayout.
| |
| var panel1 = new OO.ui.PanelLayout( {
| |
| $content: $( '<p>Panel One</p>'),
| |
| classes: ['blue']
| |
| });
| |
|
| |
| var panel2 = new OO.ui.PanelLayout( {
| |
| $content: $( '<p>Panel Two</p>' ),
| |
| classes: ['green']
| |
| });
| |
|
| |
| var panel3 = new OO.ui.PanelLayout( {
| |
| $content: $( '<nowiki><p>Panel Three</p>' ),
| |
| classes: ['green']
| |
| });
| |
|
| |
| var panel4 = new OO.ui.PanelLayout( {
| |
| $content: $( '<nowiki><p>Panel Four</p>' ),
| |
| classes: ['blue']
| |
| });
| |
|
| |
| // Create a GridLayout.
| |
| var grid = new OO.ui.GridLayout( [ panel1, panel2, panel3, panel4 ], {
| |
| classes: [ 'container' ],
| |
| widths: [ 1/2 , 1/2 ],
| |
| heights: [ 1/2 , 1/2 ]
| |
| } );
| |
| $( 'body' ).append( grid.$element );
| |
| </script>
| |
| </body>
| |
| </html>
| |
