|
|
| Line 7: |
Line 7: |
| ##I guess I am | | ##I guess I am |
| ###I am pretty sure I am right | | ###I am pretty sure I am right |
|
| |
| <script>
| |
| <style>
| |
| body {
| |
| font-family: sans-serif;
| |
| font-size: 0.875em;
| |
| }
| |
|
| |
| .container {
| |
| width: 600px;
| |
| height: 300px;
| |
| border-style: dotted;
| |
| border-width: 1px;
| |
| padding: 20px;
| |
| }
| |
| </style>
| |
|
| |
| <script>
| |
| // Create form elements (text input, checkbox, submit button, etc.)
| |
| var input1 = new OO.ui.TextInputWidget( {
| |
| placeholder: 'A form text field'
| |
| } );
| |
|
| |
| var input2 = new OO.ui.TextInputWidget( {
| |
| placeholder: 'A form text field'
| |
| } );
| |
|
| |
| var input3 = new OO.ui.TextInputWidget( {
| |
| placeholder: 'A form text field with help'
| |
| } );
| |
|
| |
| var input4 = new OO.ui.CheckboxInputWidget( {
| |
| selected: true
| |
| } );
| |
|
| |
| // Create a Fieldset layout.
| |
| var fieldset = new OO.ui.FieldsetLayout( {
| |
| label: 'FieldsetLayout: Examples of label alignment and help text',
| |
| classes: ["container"]
| |
| } );
| |
|
| |
| // Add field layouts that contain the form elements to the fieldset. Items can
| |
| // also be specified with the FieldsetLayout's `items` config option:
| |
|
| |
| fieldset.addItems( [
| |
| new OO.ui.FieldLayout( input1, {
| |
| label: 'Left-aligned label, the default',
| |
| align: 'left'
| |
| } ),
| |
|
| |
| new OO.ui.FieldLayout( input2, {
| |
| label: 'Right-aligned label',
| |
| align: 'right'
| |
| } ),
| |
|
| |
| new OO.ui.FieldLayout( input3, {
| |
| label: 'Top-aligned label',
| |
| align: 'top',
| |
| help: 'A bit of help'
| |
| } ),
| |
|
| |
| new OO.ui.FieldLayout( input4, {
| |
| label: 'Inline label',
| |
| align: 'inline'
| |
| } )
| |
| ] );
| |
|
| |
| $( 'body' ).append( fieldset.$element );
| |
| </script>
| |