Fork me on GitHub

Example: Basic vector field creation

How to create a vector field.

Basic VectorField creation

Use the following code to create a basic inputEx VectorField.

VectorField with separators

VectorField inherits CombineField, so you can change the separators :

VectorField dimension

Set the dimension option :

HTML

<div id="field-container"></div>

JavaScript

Implementation

YUI().use('inputex-vector',"inputex-number",function(Y) {

    // Example 1
    var field = new Y.inputEx.VectorField({parentEl: 'container1', value: [-10.4,13*2]});

    var el = Y.one('#container1');

    var button1 = Y.inputEx.cn('button', null, null, "SetValue");
    el.appendChild(button1);
    Y.one(button1).on('click' ,function() {
       field.setValue([-42.42,12.603]);
    });

    var logDiv = Y.inputEx.cn('div', null, null, "Log :");
    el.appendChild(logDiv);
    field.on('updated', function(value) {
        logDiv.innerHTML += "Updated at "+(new Date())+" with value "+value;
        logDiv.appendChild(Y.inputEx.cn('br'));
    });
    
    // Example 2
    new Y.inputEx.VectorField({
        parentEl: 'container2', 
        value: [-10.4,13*2],
        separators: ["x:",", y:", null]
    });
    
    // Example 3
    new Y.inputEx.VectorField({
        parentEl: 'container3', 
        value: [-1, 0, 1],
        dimension: 3,
        separators: ["x:",", y:", ", z: ", null]
    });

});