Components

Amazing components built to provide dropdowns, input groups, navigation, modals, and much more.

Autocomplete

Check the API documentation for this component.

This is working with the Mercado Libre API

<form class="ch-form" method="get" action="http://www.mercadolibre.com.ar/jm/search">
    <input id="dm_ac" name="dm_ac" type="text" placeholder="iPhone" />
    <input class="ch-btn" id="dm_ac_sbt" name="dm_ac_sbt" type="submit" />
</form>
function parseResults(results) {
    var data = [];
    if (results[2].suggested_queries !== undefined) {
        results[2].suggested_queries.forEach(function (e, i) {
            data.push(e.q);
        });
        // Show suggestions
        autocomplete.suggest(data);
    }
}

var autocomplete = new ch.Autocomplete($('#dm_ac'))
    .on('type', function (userInput) {
        $.ajax({
            'url': 'http://suggestgz.mlapps.com/sites/MLA/autosuggest?q=' + userInput + '&v=1&callback=parseResults',
            'dataType': 'jsonp',
            'cache': false,
            'global': true,
            'context': window,
            'jsonp': 'parseResults',
            'crossDomain': true
        });
    });

Back to Autocomplete / Back to Top

Expandable

Check the API documentation for this component.

Expandable with paragraph

Expandable

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Expandable with list

Expandable

  • Foo
  • Bar
  • Baz

Expandable with box list

Expandable

Expandable with Ajax call

Expandable

<h3>Expandable with paragraph</h3>
<h4 id="dm_exp_pr">Expandable</h4>
<p>Lorem ipsum dolor sit amet.</p>

<h3>Expandable with list</h3>
<h4 id="dm_exp_li">Expandable</h4>
<ul class="ch-list">
    <li>Foo</li>
    <!-- [...] -->
</ul>

<h3>Expandable with box list</h3>
<h4 id="dm_exp_bli">Expandable</h4>
<ul class="ch-box-list">
    <li><a href="#">Foo</a></li>
    <!-- [...] -->
</ul>

<h3>Expandable with Ajax call</h3>
<h4 id="dm_exp_ajax">Expandable</h4>
<div id="dm_exp_ajax_cnt">
    <!-- Content will be loaded using Ajax. -->
</div>
var expandableParagraph = new ch.Expandable($('#dm_exp_pr'));

var expandableList = new ch.Expandable($('#dm_exp_li'));

var expandableBoxList = new ch.Expandable($('#dm_exp_bli'));

var expandableAjax = new ch.Expandable($('#dm_exp_ajax'), {
    'content': '/ajax.html',
    'container': $('#dm_exp_ajax_cnt')
});

Back to Expandable / Back to Top

Transition

Check the API documentation for this component.

<input class="ch-btn ch-btn-small" id="dm_tr" value="Transition" type="submit" />
var transition = new ch.Transition($('#dm_tr'));

Back to Transition / Back to Top

Countdown

Check the API documentation for this component.

<textarea id="dm_codw" name="dm_codw" cols="35" rows="4"></textarea>
var countdown = new ch.Countdown($('#dm_codw'), {
    'max': 140,
    'plural': '# characters left',
    'singular': '# character left'
});

Back to Countdown / Back to Top

Validation

Check the API documentation for this component.

Input

* Required fields

Textarea
Select
Checkbox

Option: *

Checkbox group

Options: *

Radio group

Options: *

<form class="ch-form" id="dm_vl_frm" method="GET" action="/ajax.html">
    <fieldset>
        <legend>Input</legend>
        <p class="ch-form-hint">* Required fields</p>

        <div class="ch-form-row">
            <label for="dm_vl_opt">Text:</label>
            <input id="dm_vl_opt" name="dm_vl_opt" type="text" required />
        </div>

        <div class="ch-form-row ch-form-required">
            <label for="dm_vl_rqd">Text: <em>*</em></label>
            <input id="dm_vl_rqd" name="dm_vl_rqd" type="text" required />
        </div>

        <div class="ch-form-row ch-form-required">
            <label for="dm_vl_str_rqd">Letters: <em>*</em></label>
            <input id="dm_vl_str_rqd" name="dm_vl_str_rqd" type="text" required />
        </div>

        <div class="ch-form-row ch-form-required">
            <label for="dm_vl_em_rqd">E-mail: <em>*</em></label>
            <input id="dm_vl_em_rqd" name="dm_vl_em_rqd" type="email" required />
        </div>

        <div class="ch-form-row ch-form-required">
            <label for="dm_vl_url_rqd">URL: <em>*</em></label>
            <input id="dm_vl_url_rqd" name="dm_vl_url_rqd" type="url" required />
        </div>

        <div class="ch-form-row ch-form-required">
            <label for="dm_vl_num_rqd">Number: <em>*</em></label>
            <input id="dm_vl_num_rqd" name="dm_vl_num_rqd" type="number" required />
        </div>

        <div class="ch-form-row ch-form-required">
            <label for="dm_vl_num_mn_mx_rqd">Number: <em>*</em></label>
            <input id="dm_vl_num_mn_mx_rqd" name="dm_vl_num_mn_mx_rqd" type="number" min="1" max="99" required />
        </div>

        <div class="ch-form-row ch-form-required">
            <label for="dm_vl_cust">Custom: <em>*</em></label>
            <input id="dm_vl_cust" name="dm_vl_cust" type="text" required />
        </div>
    </fieldset>
    <fieldset>
        <legend>Textarea</legend>

        <div class="ch-form-row ch-form-required">
            <label for="dm_vl_mnl_mxl">Textarea: <em>*</em></label>
            <textarea id="dm_vl_mnl_mxl" name="dm_vl_mnl_mxl" cols="20" rows="4" minlength="10" maxlength="40" required></textarea>
        </div>
    </fieldset>
    <fieldset>
        <legend>Select</legend>

        <div class="ch-form-row ch-form-required">
            <label for="dm_vl_sel_rqd">Options: <em>*</em></label>
            <select id="dm_vl_sel_rqd" name="dm_vl_sel_rqd" required pattern="[^-1]">
                <option value="-1">Select an option</option>
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
            </select>
        </div>
    </fieldset>
    <fieldset>
        <legend>Checkbox</legend>

        <h4 class="ch-form-subtitle">Option: <em>*</em></h4>
        <div>
            <div class="ch-form-options ch-form-required" id="dm_vl_cb_rqd_opt">
                <div class="ch-form-row">
                    <input id="dm_vl_cb_rqd" name="dm_vl_cb_rqd" type="checkbox" value="1" required />
                    <label for="dm_vl_cb_rqd">Option</label>
                </div>
            </div>
        </div>
    </fieldset>
    <fieldset>
        <legend>Checkbox group</legend>

        <h4 class="ch-form-subtitle">Options: <em>*</em></h4>
        <div class="ch-form-options ch-form-required" id="dm_vl_cb_grp_rqd_opt">
            <ul>
                <li class="ch-form-row">
                    <input id="dm_vl_cb_grp_rqd_1" name="dm_vl_cb_grp_rqd" type="checkbox" value="1" />
                    <label for="dm_vl_cb_grp_rqd_1">Option 1</label>
                </li>
                <li class="ch-form-row">
                    <input id="dm_vl_cb_grp_rqd_2" name="dm_vl_cb_grp_rqd" type="checkbox" value="2" />
                    <label for="dm_vl_cb_grp_rqd_2">Option 2</label>
                </li>
            </ul>
        </div>
    </fieldset>
    <fieldset>
        <legend>Radio group</legend>

        <h4 class="ch-form-subtitle">Options: <em>*</em></h4>
        <div class="ch-form-options ch-form-required" id="dm_vl_rd_grp_opt">
            <ul>
                <li class="ch-form-row">
                    <input id="dm_vl_rd_grp_1" name="dm_vl_rd_grp" type="radio" value="1" />
                    <label for="dm_vl_rd_grp_1">Option 1</label>
                </li>
                <li class="ch-form-row">
                    <input id="dm_vl_rd_grp_2" name="dm_vl_rd_grp" type="radio" value="2" />
                    <label for="dm_vl_rd_grp_2">Option 2</label>
                </li>
            </ul>
        </div>
    </fieldset>

    <div class="ch-form-actions">
        <input class="ch-btn" id="dm_vl_smt" name="dm_vl_smt" type="submit" value="Submit" />
        <a href="#">Cancel</a>
    </div>
</form>
var validationRequired = new ch.Validation($('#dm_vl_rqd'), {
    'conditions': [
        {
            'name': 'required'
        }
    ]
});

var validationString = new ch.Validation($('#dm_vl_str_rqd'), {
    'conditions': [
        {
            'name': 'required'
        },
        {
            'name': 'string'
        }
    ]
});

var validationEmail = new ch.Validation($('#dm_vl_em_rqd'), {
    'conditions': [
        {
            'name': 'required'
        },
        {
            'name': 'email'
        }
    ]
});

var validationUrl = new ch.Validation($('#dm_vl_url_rqd'), {
    'conditions': [
        {
            'name': 'required'
        },
        {
            'name': 'url'
        }
    ]
});

var validationNumber = new ch.Validation($('#dm_vl_num_rqd'), {
    'conditions': [
        {
            'name': 'required'
        },
        {
            'name': 'number'
        }
    ]
});

var validationNumberMinMax = new ch.Validation($('#dm_vl_num_mn_mx_rqd'), {
    'conditions': [
        {
            'name': 'required'
        },
        {
            'name': 'number'
        },
        {
            'name': 'min',
            'num': 1
        },
        {
            'name': 'max',
            'num': 99
        }
    ]
});

var validationCustom = new ch.Validation($('#dm_vl_cust'), {
    'conditions': [
        {
            'name': 'required'
        },
        {
            'name': 'charOne',
            'fn': function (val) {
                return val.toString().indexOf('1') !== -1;
            },
            'message': 'The field must contain a 1.'
        },
        {
            'name': 'charTwo',
            'fn': function (val) {
                return val.toString().indexOf('2') !== -1;
            },
            'message': 'The field must contain a 2.'
        }
    ]
});

var validationTextareaMinMax = new ch.Validation($('#dm_vl_mnl_mxl'), {
    'conditions': [
        {
            'name': 'required'
        },
        {
            'name': 'minLength',
            'num': 10
        },
        {
            'name': 'maxLength',
            'num': 40
        }
    ]
});

var validationSelect = new ch.Validation($('#dm_vl_sel_rqd'), {
    'conditions': [
        {
            'name': 'required',
            'message': 'Select a valid option.'
        }
    ]
});

var validationCheckbox = new ch.Validation($('#dm_vl_cb_rqd_opt'), {
    'conditions': [
        {
            'name': 'required',
            'message': 'This option must be checked.'
        }
    ]
});

var validationCheckboxGroup = new ch.Validation($('#dm_vl_cb_grp_rqd_opt'), {
    'conditions': [
        {
            'name': 'required',
            'message': 'Select at least one option.'
        }
    ]
});

var validationRadioGroup = new ch.Validation($('#dm_vl_rd_grp_opt'), {
    'conditions': [
        {
            'name': 'required',
            'message': 'Select at least one option.'
        }
    ]
});

Back to Validation / Back to Top