w2form.tabs | JavaScript UI - w2ui

w2form.tabs

Tabs for the form.

Object, default = {}

If you define tabs then you have to define multiple pages with the form and the number of pages should be equal to the number of tabs. Multiple pages are defined by providing multiple div tags, for example: If it is an object then it is a w2tabs object definition. If it is an array then it is tabs definition that should correspond to w2tabs.tabs array.

Important: After the form has been initialized, .tabs is a w2tabs object.

You should define tabs during object creation:

let form = new w2form({
    name: 'form',
    formHTML:
        '<div class="w2ui-page page-0">'+
        '    <div class="w2ui-field">'+
        '        <label>First Name</label>'+
        '        <div>'+
        '            <input name="first_name" type="text" maxlength="100" size="60"/>'+
        '        </div>'+
        '    </div>'+
        '    <div class="w2ui-field">'+
        '        <label>Last Name</label>'+
        '        <div>'+
        '            <input name="last_name" type="text" maxlength="100" size="60"/>'+
        '        </div>'+
        '    </div>'+
        '    <div class="w2ui-field">'+
        '        <label>Email</label>'+
        '        <div>'+
        '            <input name="email" type="text" maxlength="100" size="60"/>'+
        '        </div>'+
        '    </div>'+
        '</div>'+
        '<div class="w2ui-page page-1">'+
        '    <div class="w2ui-field">'+
        '        <label>Other Fields</label>'+
        '        <div>'+
        '            <input name="other" type="text" maxlength="100" size="60"/>'+
        '        </div>'+
        '    </div>'+
        '</div>'+
        '<div class="w2ui-buttons">'+
        '   <button class="w2ui-btn" name="reset">Reset</button>'+
        '    <button class="w2ui-btn w2ui-btn-green" name="save">Save</button>'+
        '</div>',
    tabs: [
        { id: 'tab1', text: 'Tab 1' },
        { id: 'tab2', text: 'Tab 2' }
    ],
    fields: [
        { field: 'first_name', type: 'text', required: true },
        { field: 'last_name', type: 'text', required: true },
        { field: 'email', type: 'email' },
        { field: 'extra_field', type: 'date' }
    ],
    record: {
        first_name  : 'John',
        last_name   : 'Doe',
        email       : 'jdoe@email.com',
        extra_field : ''
    },
    actions: {
        "save": function () { this.validate(); },
        "reset": function () { this.clear(); }
    }
});

User Comments

comments powered by Disqus