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(ch('#dm_ac')[0])
    .on('type', function (userInput) {
        tiny.jsonp('http://suggestgz.mlapps.com/sites/MLA/autosuggest?q=' + userInput + '&v=1', {
            'name': 'dm_ac_sbt',
            'success': parseResults,
            'error': function (err) {
                autocomplete.suggest([]);
            }
        });
    });

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 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 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(ch('#dm_exp_pr')[0]);

var expandableList = new ch.Expandable(ch('#dm_exp_li')[0]);

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

Back to Expandable / Back to Top

Layer

Check the API documentation for this component.

  • Executed on: pointerenter, Content: plain text.
  • Executed on: pointertap, Content: HTML Element, Hidden by: all.
  • Executed on: pointertap, Content: element in DOM, Hidden by: none.
  • Executed on: pointertap, Content: plain text, Hidden by: button.
  • Executed on: pointertap, Content: Ajax, Hidden by: pointers.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

<span id="dm_ly_pl">Content</span>
<span id="dm_ly_el">Content</span>
<span id="dm_ly_dom">Content</span>
<span id="dm_ly_btn">Content</span>
<span id="dm_ly_ajax">Content</span>

<div class="ch-hide" id="dm_ly_dom_cnt">
    <h1>Heading</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
var layerPlain = new ch.Layer(ch('#dm_ly_pl')[0], {
    'content': 'Plain text'
});

var layerElement = new ch.Layer(ch('#dm_ly_el')[0], {
    'content': document.createElement('p').innerHTML = 'HTML Element',
    'shownby': 'pointertap',
    'hiddenby': 'all'
});

var layerDom = new ch.Layer(ch('#dm_ly_dom')[0], {
    'content': ch('#dm_ly_dom_cnt')[0],
    'shownby': 'pointertap',
    'hiddenby': 'none'
});

var layerButton = new ch.Layer(ch('#dm_ly_btn')[0], {
    'content': 'Plain text',
    'shownby': 'pointertap',
    'hiddenby': 'button'
});

var layerAjax = new ch.Layer(ch('#dm_ly_ajax')[0], {
    'content': '/ajax.html',
    'shownby': 'pointertap',
    'hiddenby': 'pointers'
});

Back to Layer / Back to Top

Tooltip

Check the API documentation for this component.

Bottom

Tooltip Bottom-Left Tooltip Bottom-Center Tooltip Bottom-Right

Top

Tooltip Top-Left Tooltip Top-Center Tooltip Top-Right

Right

Tooltip Right-Top Tooltip Right-Center Tooltip Right-Bottom

Left

Tooltip Left-Top Tooltip Left-Center Tooltip Left-Bottom
<img id="dm_tt_ltlb" src="picture.png" alt="Tooltip Bottom-Left" />
<img id="dm_tt_cbct" src="picture.png" alt="Tooltip Top-Center" />
<img id="dm_tt_lbrb" src="picture.png" alt="Tooltip Right-Bottom" />
<img id="dm_tt_rtlt" src="picture.png" alt="Tooltip Left-Top" />
// Bottom-Left (default)
var tooltipBottomLeft = new ch.Tooltip(ch('#dm_tt_ltlb')[0]);

// Top-Center with negative offset
var tooltipTopCenter = new ch.Tooltip(ch('#dm_tt_cbct')[0], {
    'side': 'top',
    'align': 'center',
    'offsetY': -10
});

// Right-Bottom with offset
var tooltipRightBottom = new ch.Tooltip(ch('#dm_tt_lbrb')[0], {
    'side': 'right',
    'align': 'bottom',
    'offsetX': 10
});

// Left-Top with negative offset
var tooltipLeftTop = new ch.Tooltip(ch('#dm_tt_rtlt')[0], {
    'side': 'left',
    'align': 'top',
    'offsetX': -10
});

Back to Tooltip / 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(ch('#dm_tr')[0]);

Back to Transition / Back to Top

Zoom

Check the API documentation for this component.

Zoom default

HTML5

Zoom with preloaded image

HTML5
<h3>Zoom default</h3>
<a id="dm_zm_df" href="picture-large.png">
    <img src="picture-medium.png" />
</a>

<h3>Zoom with preloaded image</h3>
<a id="dm_zm_pr" href="picture-large.png">
    <img src="picture-medium.png" />
</a>
var zoomDefault = new ch.Zoom(ch('#dm_zm_df')[0]);

var zoomPreload = new ch.Zoom(ch('#dm_zm_pr')[0]);

// Preload image
zoomPreload.loadImage();

Back to Zoom / Back to Top

Tabs

Check the API documentation for this component.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet purus in sapien luctus sodales. Curabitur dui velit, cursus in sagittis aliquam, dictum at neque. Ut gravida scelerisque lorem non pulvinar. Pellentesque et urna vitae nisl porta imperdiet sed nec ipsum. Sed non sem velit. Cras id consectetur tellus.

Vestibulum posuere purus non enim pharetra vel vulputate eros hendrerit. Ut pulvinar placerat risus quis interdum. Mauris eget tempus risus. Aenean accumsan dolor in lorem elementum ac tincidunt urna rutrum. Sed sit amet nunc velit, vitae tincidunt ipsum. Fusce mattis elementum justo, et lacinia odio pharetra a.

Sed sit amet nunc velit, vitae tincidunt ipsum. Fusce mattis elementum justo, et lacinia odio pharetra a. Donec egestas imperdiet eros a interdum. Suspendisse sodales, ligula vitae pulvinar aliquam, elit justo pretium urna, ut hendrerit arcu dolor vitae ipsum.

<div id="dm_tbs">
    <ul class="ch-tabs-triggers">
        <li>
            <a class="ch-tab" href="#tab_1">Tab</a>
        </li>
        <!-- [...] -->
        <li>
            <a class="ch-tab" href="/ajax.html#tab_ajax">Tab with Ajax</a>
        </li>
    </ul>
    <div class="ch-box-lite">
        <div id="tab_1">
            <p>Lorem ipsum dolor sit amet.</p>
        </div>
        <!-- [...] -->
        <!-- There is no container for content loaded using Ajax -->
    </div>
</div>
var tabs = new ch.Tabs(ch('#dm_tbs')[0]);

Back to Tabs / Back to Top

Calendar

Check the API documentation for this component.

<div id="dm_cldr"></div>
var calendar = new ch.Calendar(ch('#dm_cldr')[0], {
    'selected': ['2017/01/22', '2017/01/21']
});

Back to Calendar / Back to Top

Datepicker

Check the API documentation for this component.

<input id="dm_dtpk" name="dm_dtpk" type="date" placeholder="MM/DD/YYYY" />
var datepicker = new ch.Datepicker(ch('#dm_dtpk')[0], {
    'selected': '2017/11/15',
    'to': 'today'
});

Back to Datepicker / 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(ch('#dm_codw')[0], {
    'max': 140,
    'plural': '# characters left',
    'singular': '# character left'
});

Back to Countdown / Back to Top

Bubble

Check the API documentation for this component.

<button class="ch-btn ch-btn-small" id="dm_bbl">Bubble</button>
var bubble = new ch.Bubble(ch('#dm_bbl')[0], {
    content: 'This is an error bubble!'
});

tiny.on('#dm_bbl', 'click', function (e) {
    bubble.show();
});

Back to Bubble / 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(ch('#dm_vl_rqd')[0], {
    'conditions': [
        {
            'name': 'required'
        }
    ]
});

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

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

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

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

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

var validationCustom = new ch.Validation(ch('#dm_vl_cust')[0], {
    '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(ch('#dm_vl_mnl_mxl')[0], {
    'conditions': [
        {
            'name': 'required'
        },
        {
            'name': 'minLength',
            'num': 10
        },
        {
            'name': 'maxLength',
            'num': 40
        }
    ]
});

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

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

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

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

Back to Validation / Back to Top