form-layout

by larsolesimonsen

HTML

<fieldset>
    <div class="form-layout">
        <div class="item">
            <label for="message-topic">Topic</label>
            <input type="text" id="message-topic" value="some text"/>
        </div>
        
        <div class="item">
            <label >Recipients</label>
            <div>Sliding panel here</div>
        </div>
        
        <div class="item">
            <label for="message-content">Message</label>
            <textarea id="message-content"></textarea>
        </div>
        <div class="item">
            <input type="submit" class="button" id="submitForm" value="Send" />
            <input type="submit" class="button" id="cancelSend" value="Discard" />
        </div>
    </div>
</fieldset>

CSS

.form-layout  { padding: 12px; width: 90%; }
.form-layout .item { clear: both; line-height: 35px; }
.form-layout .item > * { width:75%; float: left; margin-bottom: 10px; height: 35px;}
.form-layout .item label { width: 20%; float:left; height: 20px; }
.form-layout .button { width: auto; float: right; margin-left: 10px;}
.large-text-area { height: 200px; }

JavaScript

$('#cancelSend').click(function() {
    $('<div>Are you sure you want to discard this message and return to the inbox?</div>').dialog({
        modal: true,
        title: 'Dialog title',
        buttons: {
            Yes: function() {
                $(this).dialog("close");
                alert('navigate to inbox');
            },
            No: function() {
                $(this).dialog("close");
            }
        }
    });
});