Selector

Opens hidden layers when choosing select options or when selecting radio buttons.

Usage #

Box 1
<select data-kube="selector">
    <option value="#box-1">Box 1</option>
    <option value="#box-2">Box 2</option>
</select>

<div id="box-1">Box 1</div>
<div id="box-2" class="is-hidden">Box 2</div>
Box 4
<div class="form-item" data-kube="selector">
    <label><input type="radio" name="checker" value="#box-3"> Box 3</label>
    <label><input type="radio" name="checker" value="#box-4" checked="true"> Box 4</label>
</div>

<div id="box-3" class="is-hidden">Box 3</div>
<div id="box-4">Box 4</div>

Events #

Event Description
opened This event is fired when the selected box has been shown.

Catch events in your module:

(function($K)
{
    $K.add('module', 'mymodule', {
        init: function(app, context)
        {
            this.app = app;
        },
        // catch event
        onmessage: {
            selector: {
                opened: function(sender, $box)
                {
                    console.log('Box is opened.');
                }
            }
        }
    });
})(Kube);

How to catch events from the selector with a specified name.

Set an ID for the selector:

<select id="myselector" data-kube="selector">
    <option value="#box-1">...</option>
    <option value="#box-2">...</option>
</select>

<div id="box-1">...</div>
<div id="box-2" class="is-hidden">...</div>

Or set data-name attribute:

<select data-name="myselector" data-kube="selector">
    <option value="#box-1">...</option>
    <option value="#box-2">...</option>
</select>

<div id="box-1">...</div>
<div id="box-2" class="is-hidden">...</div>

Catch event.

(function($K)
{
    $K.add('module', 'mymodule', {
        init: function(app, context)
        {
            this.app = app;
        },
        // catch event
        onmessage: {
            selector: {
                opened: function(sender, $box)
                {
                    if (sender._id === 'myselector')
                    {
                        console.log('Box is opened.');
                    }
                }
            }
        }
    });
})(Kube);