|
|
| 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>
| |
