index.html

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <title>Bootstrap-fullscreen-select | Custom select element for Mobile interfaces.</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

    <!--[if lt IE 9]>
        <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->

    <meta name="description" content="Bootstrap select for mobile devices, poweredpacked with features.">
    <link rel="canonical" href="https://craftpip.github.io/" />
    <link rel="icon" type="img/ico" href="http://craftpip.com/apple-touch-icon-57x57.png">
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
    <meta name="robots" content="index,follow,noodp,noydir" />

    <!--<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> -->
    <!-- <meta property="fb:profile_id" content="350437395056145" />
        <meta property="fb:admins" content="100000226762279"/> -->
    <meta name="Keywords"
        content="bootstrap fullscreen select, fullscreen select, bootstrap select, phonegap select, cordova select" />

    <link rel="apple-touch-icon" sizes="57x57" href="http://craftpip.com/apple-touch-icon-57x57.png" />
    <link rel="apple-touch-icon" sizes="72x72" href="http://craftpip.com/apple-touch-icon-72x72.png" />
    <link rel="apple-touch-icon" sizes="114x114" href="http://craftpip.com/apple-touch-icon-114x114.png" />
    <link rel="apple-touch-icon" sizes="144x144" href="http://craftpip.com/apple-touch-icon-144x144.png" />
    <link rel="apple-touch-icon" href="http://craftpip.com/apple-touch-icon-57x57.png" />

    <meta property="og:title" content="Bootstrap-fullscreen-select" />
    <meta property="og:type" content="website" />
    <meta property="og:image" content="http://craftpip.com/apple-touch-icon-57x57.png" />
    <meta property="og:url" content="https://craftpip.github.io/" />
    <meta property="og:description" content="Custom fullscreen select for mobile devices." />
    <meta property="og:site_name" content="craftpip.github.io" />

    <link rel="stylesheet" href="demo/libs/bootstrap.min.css">
    <link rel="stylesheet" href="demo/libs/bootstrap-theme.min.css">
    <link rel="stylesheet" href="demo/libs/font-awesome.min.css">
    <link rel="stylesheet" href="demo/libs/default.min.css">
    <link rel="stylesheet" href="demo/demo.min.css">

    <script src="demo/libs/jquery.min.js"></script>
    <script src="demo/libs/bootstrap.min.js"></script>
    <script src="demo/libs/pretty.js"></script>

    <!-- BOOTSTRAP-FULLSCREEN-SELECT files -->
    <link rel="stylesheet" type="text/css" href="css/bootstrap-fullscreen-select.css" />
    <script type="text/javascript" src="js/bootstrap-fullscreen-select.js"></script>
    <!--END BOOTSTRAP-FULLSCREEN-SELECT files-->

    <style type="text/css">
        body {
            font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif;
        }
    </style>


</head>

<body>
    <div style="height: 15px"></div>
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="logo-wrapper-project">
                    <div class="logo-wrapper-project"></div>
                </div>
                <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
                    <div class="container-fluid">
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                                data-target="#bs-example-navbar-collapse-1">
                                <span class="sr-only">Toggle navigation</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>
                            <a class="navbar-brand" href="http://craftpip.com"><span class="craftpip-logo"></span></a>
                        </div>
                        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                            <ul class="nav navbar-nav">
                                <li class=""><a href="http://github.com/craftpip"><i class="fa fa-github fa-fw"></i>
                                        GITHUB HOME</a></li>
                                <li class=""><a href="http://github.com/craftpip/bootstrap-fullscreen-select">PROJECT
                                        PAGE</a></li>
                                <li class=""><a href="http://craftpip.com/#/contact">CONTACT</a></li>
                            </ul>
                            <ul class="nav navbar-nav">
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                                        aria-expanded="false"><i class="fa fa-bars fa-fw"></i> CONTENTS <span
                                            class="caret"></span></a>
                                    <ul class="dropdown-menu" role="menu">

                                        <li><a class="gotoSmooth" href="#introduction">Introduction</a></li>
                                        <li><a class="gotoSmooth" href="#usage">Usage</a></li>
                                        <li><a class="gotoSmooth" href="#examples">Examples</a></li>
                                        <li><a class="gotoSmooth" href="#buttonstyles">Button Styles</a></li>
                                        <li><a class="gotoSmooth" href="#themes">Themes</a></li>
                                        <li><a class="gotoSmooth" href="#titles">Titles</a></li>
                                        <li><a class="gotoSmooth" href="#padding">Padding</a></li>
                                        <li><a class="gotoSmooth" href="#animations">Animations</a></li>
                                        <li><a class="gotoSmooth" href="#animationspeeds">Animation speeds</a></li>
                                        <li><a class="gotoSmooth" href="#buttontext">Button Text</a></li>
                                        <li><a class="gotoSmooth" href="#triggeron">Trigger on</a></li>
                                        <li><a class="gotoSmooth" href="#callbacks">Callbacks</a></li>
                                        <li><a class="gotoSmooth" href="#globals">Setting globals</a></li>
                                        <li><a class="gotoSmooth" href="#options">Options</a></li>
                                        <li><a class="gotoSmooth" href="#methods">Methods</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </div>
                </nav>
            </div>
        </div>
    </div>
    <div style="height:50px"></div>

    <div class="container-fluid">
        <div class="row">
            <div class="col-md-3">
                <div class="sideBar">
                    <div class="row">
                        <div class="col-md-3">
                            <p>
                                <strong>bootstrap-fullscreen-select</strong><br>
                                <a href="https://github.com/craftpip/bootstrap-fullscreen-select">
                                    view on <i class="fa fa-github"></i> Github
                                </a>
                            </p>
                            <div class="btn-group btn-group-justified">
                                <a href="https://github.com/craftpip/bootstrap-fullscreen-select/zipball/master"
                                    class="btn btn-download btn-lg">
                                    <i class="fa fa-download"></i> .zip file
                                </a>
                                <a href="https://github.com/craftpip/bootstrap-fullscreen-select/tarball/master"
                                    class="btn btn-download btn-lg">
                                    .tar.gz ball
                                </a>
                            </div>
                            <div class="spacer15"></div>
                            <div class="panel panel-default" style="margin-bottom: 10px">
                                <div class="list-group">
                                    <a class="list-group-item gotoSmooth" href="#introduction"><i
                                            class="fa fa-circle-o fa-fw"></i> Introduction</a>
                                    <a class="list-group-item gotoSmooth" href="#usage"><i
                                            class="fa fa-circle-o fa-fw"></i> Usage</a>
                                    <a class="list-group-item gotoSmooth" href="#examples"><i
                                            class="fa fa-circle-o fa-fw"></i> Examples</a>
                                    <a class="list-group-item gotoSmooth" href="#themes"><i
                                            class="fa fa-circle-o fa-fw"></i> Themes</a>
                                    <a class="list-group-item gotoSmooth" href="#options"><i
                                            class="fa fa-circle-o fa-fw"></i> Options</a>
                                </div>
                            </div>
                            <p class="text-right">
                                <code>version 1.5.1</code>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-9">


                <!-- introduction -->

                <section id="introduction">
                    <header>
                        <h1 style="margin-top: 0px;">
                            bootstrap-fullscreen-select
                        </h1>
                        <p>
                            <strong>What the heck is this?</strong>
                            <br>
                            A powerful <code>SELECT</code> for your Web app, mobile UI, cordova/phoneGap project.<br>
                            This plugin makes it super easy for a user to use the 'select' on small touch screen
                            devices.
                        </p>
                        <p>
                            <strong>Why use this?</strong>
                            <br>
                            <ul>
                                <li><em>Full functionality</em> of a native html select.</li>
                                <li>3 OS suited themes (white, holo, mac).</li>
                                <li>8 graceful in and out animations.</li>
                                <li>Custom titles and button text.</li>
                                <li>Customizable button colors.</li>
                                <li>CSS3 animations.</li>
                                <li>onOpen &amp; onClose callbacks</li>
                                <li>Tested reliable code.</li>
                            </ul>
                        </p>
                        <p>
                            <strong>Feature Showcase</strong>
                            <div class="row">
                                <div class="col-md-3">
                                    <p>Theme (white)</p>
                                    <select class="mobileSelect" data-search-text="Test">
                                        <option value="1">Option 1 jsak fsja jfsah jfhsaj fjksah jasfhj kfhsa jfasjk kjash kjsahj jdsa dsa dsa dsa das das dasks</option>
                                        <option>Option 2</option>
                                        <option>Option 3</option>
                                        <option>Option 4</option>
                                        <option>Option 4</option>
                                        <option>Option 4</option>
                                        <option>Option 4</option>
                                        <option>Option 4</option>
                                        <option>Option 4</option>
                                        <option>Option 4</option>
                                        <option>Option 4</option>
                                        <option>Option 4</option>
                                        <option>Option 4</option>
                                        <option>Option 4</option>
                                        <option>Option 4</option>
                                        <option>Option 4</option>
                                        <option>Option 4</option>
                                        <option>Option 4</option>
                                        <option>Option 4</option>
                                        <option>Option 4</option>
                                        <option>Option 4</option>
                                        <option>Option 4</option>
                                        <option>Option 4</option>
                                        <option>Option 4</option>
                                        <option>Option 4</option>
                                        <option>Option 4</option>
                                        <option>Option 4</option>
                                        <option>Option 4</option>
                                        <option>Option 4</option>
                                        <option>Option 4</option>
                                        <option>Option 4</option>
                                        <option>Option 4</option>
                                        <option>Option 4</option>
                                        <option>Option 4</option>
                                        <option>Option 4</option>
                                        <option>Option 4</option>
                                        <option>Option 4</option>
                                        <option>Option 4</option>
                                        <option>Option 4</option>
                                        <option>Option 4</option>
                                        <option>Option 4</option>
                                        <option>Option 4</option>
                                    </select>
                                </div>
                                <div class="col-md-3">
                                    <p>Theme (holo)</p>
                                    <select class="mobileSelect" data-theme="holo">
                                        <option>Option 1</option>
                                        <option>Option 2</option>
                                        <option>Option 3</option>
                                        <option>Option 4</option>
                                    </select>
                                </div>
                                <div class="col-md-3">
                                    <p>Theme (mac)</p>
                                    <select class="mobileSelect" data-theme="mac">
                                        <option>Option 1</option>
                                        <option>Option 2</option>
                                        <option>Option 3</option>
                                        <option>Option 4</option>
                                    </select>
                                </div>
                                <div class="row">
                                    <div class="col-md-3">
                                        <p>Animations (opacity)</p>
                                        <select class="mobileSelectCALLBACKexample">
                                            <option>Option 1</option>
                                            <option>Option 2</option>
                                            <option>Option 3</option>
                                            <option>Option 4</option>
                                        </select>
                                    </div>
                                </div>
                                <script type="text/javascript">
                                    $(function () {
                                        $('.mobileSelectCALLBACKexample').mobileSelect({
                                            onOpen: function () {
                                                alert('do something when it opens');
                                            },
                                            onClose: function () {
                                                alert('do something else when it closes');
                                            }
                                        });
                                    })
                                </script>
                            </div>
                            <div style="height: 10px;"></div>
                            <div class="row">
                                <div class="col-md-3">
                                    <p>No animations</p>
                                    <select class="mobileSelect" data-animation="none">
                                        <option>Option 1</option>
                                        <option>Option 2</option>
                                        <option>Option 3</option>
                                        <option>Option 4</option>
                                    </select>
                                </div>
                                <div class="col-md-3">
                                    <p>Animation (zoom)</p>
                                    <select class="mobileSelect" data-animation="zoom">
                                        <option>Option 1</option>
                                        <option>Option 2</option>
                                        <option>Option 3</option>
                                        <option>Option 4</option>
                                    </select>
                                </div>
                                <div class="col-md-3">
                                    <p>Animations (bottom)</p>
                                    <select class="mobileSelect" data-animation="bottom">
                                        <option>Option 1</option>
                                        <option>Option 2</option>
                                        <option>Option 3</option>
                                        <option>Option 4</option>
                                    </select>
                                </div>
                                <div class="col-md-3">
                                    <p>Animations (opacity)</p>
                                    <select class="mobileSelect" data-animation="opacity">
                                        <option>Option 1</option>
                                        <option>Option 2</option>
                                        <option>Option 3</option>
                                        <option>Option 4</option>
                                    </select>
                                </div>
                            </div>

                        </p>

                    </header>
                </section>


                <!-- basic usage -->


                <section id="usage">
                    <h1>Usage</h1>
                    <p>
                        Dependencies:
                        <ul>
                            <li>
                                Bootstrap by Twitter <a href="http://www.getbootstrap.com" target="_emptyb">[link]</a>
                            </li>
                            <li>
                                jQuery library <a href="http://www.jquery.com/download" target="_emptyj">[link]</a>
                            </li>
                        </ul>
                    </p>
                    <p>Create your <code>&lt;select&gt;</code> with the <code>.mobileSelect</code> class.</p>
                    <pre class="prettyprint linenums"><code class="html">&lt;select class="form-control mobileSelect" &gt;
    &lt;option value="pizza"&gt;Pizza&lt;/option&gt;
    &lt;option value="burger"&gt;Burger&lt;/option&gt;
    &lt;option value="tacos"&gt;Tacos&lt;/option&gt;
    &lt;option value="garlic-bread"&gt;Garlic Bread&lt;/option&gt;
&lt;/select&gt;</code></pre>

                    <p>Enable mobileSelect via Javascript</p>
                    <pre class="prettyprint linenums"><code class="js">$('.mobileSelect').mobileSelect();
</code></pre>
                    <p><kbd>or</kbd> Options can be passed via JavaScript</p>
                    <pre class="prettyprint linenums"><code class="js">$('.mobileSelect').mobileSelect({
    animation: 'scale',
    animationSpeed: 400
});
</code></pre>

                </section>

                <section id="examples">
                    <h1>Examples</h1>
                    <h3>SELECT</h3>
                    <div class="section">
                        <span>before</span> <br>
                        <select>
                            <option value="pizza">Pizza</option>
                            <option value="burger">Burger</option>
                            <option value="tacos">Tacos</option>
                            <option value="garlic-bread">Garlic Bread</option>
                        </select> <br>
                        <span>after</span> <br>
                        <select class="form-control mobileSelect">
                            <option value="pizza">Pizza</option>
                            <option value="burger">Burger</option>
                            <option value="tacos">Tacos</option>
                            <option value="garlic-bread">Garlic Bread</option>
                        </select>

                        <h4>code</h4>
                        <pre class="prettyprint linenums"><code class="html">&lt;select class="form-control mobileSelect"&gt;
    ...
&lt;/select&gt;
</code></pre>

                    </div>
                    <h3>MULTIPLE SELECT</h3>
                    <div class="section">
                        <span>before</span> <br>
                        <select id='multip' multiple>
                            <option value="pizza">Pizza</option>
                            <option value="burger">Burger</option>
                            <option value="tacos">Tacos</option>
                            <option value="garlic-bread">Garlic Bread</option>
                        </select> <br>
                        <span>after</span> <br>
                        <select class="form-control mobileSelect" multiple>
                            <option value="pizza">Pizza</option>
                            <option value="burger">Burger</option>
                            <option value="tacos">Tacos</option>
                            <option value="garlic-bread">Garlic Bread</option>
                        </select>

                        <h4>code</h4>
                        <pre class="prettyprint linenums"><code class="html">&lt;select class="form-control mobileSelect" multiple&gt;
    ...
&lt;/select&gt;
</code></pre>

                    </div>
                    <h3>OPTION GROUPS</h3>
                    <div class="section">
                        <span>before: </span> <br>
                        <select class="" multiple>
                            <optgroup label="group1">
                                <option value="pizza">Pizza</option>
                                <option value="burger">Burger</option>
                                <option value="tacos">Tacos</option>
                            </optgroup>
                            <optgroup label="group2">
                                <option value="garlic-bread">Garlic Bread</option>
                            </optgroup>
                        </select> <br>
                        <span>After: </span><br>
                        <select class="form-control mobileSelect" multiple>
                            <optgroup label="group1">
                                <option value="pizza">Pizza</option>
                                <option value="burger">Burger</option>
                                <option value="tacos">Tacos</option>
                            </optgroup>
                            <optgroup label="group2">
                                <option value="garlic-bread">Garlic Bread</option>
                            </optgroup>
                        </select>

                        <h4>code</h4>
                        <pre class="prettyprint linenums"><code class="html">&lt;select class="form-control mobileSelect" multiple&gt;
    &lt;optgroup label="group1"&gt;
        &lt;option value="pizza" &gt;Pizza&lt;/option&gt;
        &lt;option value="burger"&gt;Burger&lt;/option&gt;
        &lt;option value="tacos"&gt;Tacos&lt;/option&gt;
    &lt;/optgroup&gt;
    &lt;optgroup label="group2"&gt;
        &lt;option value="garlic-bread"&gt;Garlic Bread&lt;/option&gt;
    &lt;/optgroup&gt;
&lt;/select&gt;
</code></pre>
                    </div>
                    <h3>DISABLED ITEMS</h3>
                    <div class="section">
                        <div class="row">
                            <div class="col-md-4">
                                <p>Disabled select</p>
                                <select class="form-control mobileSelect" disabled>
                                    <option value="pizza">Pizza</option>
                                    <option value="burger">Burger</option>
                                    <option value="tacos">Tacos</option>
                                    <option value="garlic-bread">Garlic Bread</option>
                                </select>
                            </div>
                            <div class="col-md-4">
                                <p>Disabled groups</p>
                                <select class="form-control mobileSelect">
                                    <optgroup label="group1" disabled>
                                        <option value="pizza">Pizza</option>
                                        <option value="burger">Burger</option>
                                        <option value="tacos">Tacos</option>
                                    </optgroup>
                                    <optgroup label="group2">
                                        <option value="garlic-bread">Garlic Bread</option>
                                    </optgroup>
                                </select>
                            </div>
                            <div class="col-md-4">
                                <p>Disabled options</p>
                                <select class="form-control mobileSelect">
                                    <option value="pizza" disabled>Pizza</option>
                                    <option value="burger" disabled>Burger</option>
                                    <option value="tacos">Tacos</option>
                                    <option value="garlic-bread">Garlic Bread</option>
                                </select>
                            </div>
                        </div>

                        <h4>code</h4>
                        <pre class="prettyprint linenums"><code class="html">&lt;select class="form-control mobileSelect"  disabled&gt;
    &lt;option value="pizza" &gt;Pizza&lt;/option&gt;
    &lt;option value="burger"&gt;Burger&lt;/option&gt;
    &lt;option value="tacos"&gt;Tacos&lt;/option&gt;
    &lt;option value="garlic-bread"&gt;Garlic Bread&lt;/option&gt;
&lt;/select&gt;

&lt;select class="form-control mobileSelect" &gt;
    &lt;optgroup label="group1" disabled&gt;
        ...
    &lt;/optgroup&gt;
    &lt;optgroup label="group2"&gt;
        ...
    &lt;/optgroup&gt;
&lt;/select&gt;

&lt;select class="form-control mobileSelect" &gt;
    &lt;option value="pizza" disabled&gt;Pizza&lt;/option&gt;
    &lt;option value="burger" disabled&gt;Burger&lt;/option&gt;
    &lt;option value="tacos"&gt;Tacos&lt;/option&gt;
    &lt;option value="garlic-bread"&gt;Garlic Bread&lt;/option&gt;
&lt;/select&gt;
</code></pre>
                    </div>


                    <h3 id="buttonstyles">BUTTON STYLES</h3>
                    <div class="section">
                        <select class="form-control mobileSelect">
                            <option value="pizza">Pizza</option>
                            <option value="burger">Burger</option>
                            <option value="tacos">Tacos</option>
                            <option value="garlic-bread">Garlic Bread</option>
                        </select>
                        <select class="form-control mobileSelect" data-style="btn-primary">
                            <option value="pizza">Pizza</option>
                            <option value="burger">Burger</option>
                            <option value="tacos">Tacos</option>
                            <option value="garlic-bread">Garlic Bread</option>
                        </select>
                        <select class="form-control mobileSelect" data-style="btn-success">
                            <option value="pizza">Pizza</option>
                            <option value="burger">Burger</option>
                            <option value="tacos">Tacos</option>
                            <option value="garlic-bread">Garlic Bread</option>
                        </select>
                        <select class="form-control mobileSelect" data-style="btn-info">
                            <option value="pizza">Pizza</option>
                            <option value="burger">Burger</option>
                            <option value="tacos">Tacos</option>
                            <option value="garlic-bread">Garlic Bread</option>
                        </select>
                        <select class="form-control mobileSelect" data-style="btn-warning">
                            <option value="pizza">Pizza</option>
                            <option value="burger">Burger</option>
                            <option value="tacos">Tacos</option>
                            <option value="garlic-bread">Garlic Bread</option>
                        </select>
                        <select class="form-control mobileSelect" data-style="btn-danger">
                            <option value="pizza">Pizza</option>
                            <option value="burger">Burger</option>
                            <option value="tacos">Tacos</option>
                            <option value="garlic-bread">Garlic Bread</option>
                        </select>
                        <select class="form-control mobileSelect" data-style="btn-link">
                            <option value="pizza">Pizza</option>
                            <option value="burger">Burger</option>
                            <option value="tacos">Tacos</option>
                            <option value="garlic-bread">Garlic Bread</option>
                        </select>

                        <h4>code</h4>
                        <pre class="prettyprint linenums"><code class="html">&lt;select class="form-control mobileSelect" data-style="default"&gt;
    ...
&lt;/select&gt;
&lt;select class="form-control mobileSelect" data-style="primary" &gt;
    ...
&lt;/select&gt;
&lt;select class="form-control mobileSelect" data-style="success" &gt;
    ...
&lt;/select&gt;
&lt;select class="form-control mobileSelect" data-style="info" &gt;
    ...
&lt;/select&gt;
&lt;select class="form-control mobileSelect" data-style="warning" &gt;
    ...
&lt;/select&gt;
&lt;select class="form-control mobileSelect" data-style="danger" &gt;
    ...
&lt;/select&gt;
&lt;select class="form-control mobileSelect" data-style="link" &gt;
    ...
&lt;/select&gt;
</code></pre>

                    </div>
                    <h3 id="themes">THEMES</h3>
                    <div class="section">
                        <p>If you're using <strong>PhoneGap</strong> or <strong>Cordova</strong> to develop native apps.
                        </p>
                        <div class="row">
                            <div class="col-md-4">
                                <label>White</label><br>
                                <select class="form-control mobileSelect" data-theme="white">
                                    <option value="pizza">Pizza</option>
                                    <option value="burger">Burger</option>
                                    <option value="tacos">Tacos</option>
                                    <option value="garlic-bread">Garlic Bread</option>
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label>Holo</label><br>
                                <select class="form-control mobileSelect" data-theme="holo">
                                    <option value="pizza">Pizza</option>
                                    <option value="burger">Burger</option>
                                    <option value="tacos">Tacos</option>
                                    <option value="garlic-bread">Garlic Bread</option>
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label>Mac</label><br>
                                <select class="form-control mobileSelect" data-theme="mac">
                                    <option value="pizza">Pizza</option>
                                    <option value="burger">Burger</option>
                                    <option value="tacos">Tacos</option>
                                    <option value="garlic-bread">Garlic Bread</option>
                                </select>
                            </div>
                        </div>

                        <h4>code</h4>
                        <pre class="prettyprint linenums"><code class="html">&lt;select class="form-control mobileSelect" data-theme="white" &gt;
    ...
&lt;/select&gt;
&lt;select class="form-control mobileSelect" data-theme="holo" &gt;
    ...
&lt;/select&gt;
&lt;select class="form-control mobileSelect" data-theme="mac" &gt;
    ...
&lt;/select&gt;
</code></pre>

                    </div>

                    <h3 id="titles">CUSTOM TITLES</h3>
                    <div class="section">
                        <p>You can specify a title for a select element, while initializing or individually set it in
                            data-attributes.</p>
                        <select class="form-control mobileSelect" data-theme="white" data-title="SUP? BUDDY">
                            <option value="pizza">Pizza</option>
                            <option value="burger">Burger</option>
                            <option value="tacos">Tacos</option>
                            <option value="garlic-bread">Garlic Bread</option>
                        </select>

                        <h4>code</h4>
                        <pre class="prettyprint linenums"><code>&lt;select class="form-control mobileSelect" data-title="SUP? BUDDY"&gt;
    ...
&lt;/select&gt;
</code></pre>
                        <p><kbd>or</kbd> Set the title for all selected <code>SELECT</code> while initializing</p>
                        <pre class="prettyprint linenums"><code>$('.mobileSelect').mobileSelect({
    title: 'For all selected selects'
});
</code></pre>
                    </div>
                    <h3 id="padding">PADDING</h3>
                    <div class="section">
                        <p>Position the elements as you need. supply a JSON object to the data-padding attribute like
                            so.</p>

                        <div class="row">
                            <div class="col-md-4">
                                <p>With zero padding</p>
                                <select class="form-control mobileSelect" data-title="I capture your screen"
                                    data-padding='{"top": "0px", "bottom": "0px", "right": "0px", "left":"0px"}'>
                                    <option value="pizza">Pizza</option>
                                    <option value="burger">Burger</option>
                                    <option value="tacos">Tacos</option>
                                    <option value="garlic-bread">Garlic Bread</option>
                                </select>
                            </div>
                            <div class="col-md-4">
                                <p>With left and right padding of 30px</p>
                                <select class="form-control mobileSelect" data-title="Left and Right spacing"
                                    data-padding='{"top": "0px", "bottom": "0px", "right": "30px", "left":"30px"}'>
                                    <option value="pizza">Pizza</option>
                                    <option value="burger">Burger</option>
                                    <option value="tacos">Tacos</option>
                                    <option value="garlic-bread">Garlic Bread</option>
                                </select>
                            </div>
                            <div class="col-md-4">
                                <p>With Top and Bottom padding of 30px</p>
                                <select class="form-control mobileSelect" data-title="Left and Right spacing"
                                    data-padding='{"top": "30px", "bottom": "30px", "right": "0px", "left":"0px"}'>
                                    <option value="pizza">Pizza</option>
                                    <option value="burger">Burger</option>
                                    <option value="tacos">Tacos</option>
                                    <option value="garlic-bread">Garlic Bread</option>
                                </select>
                            </div>
                        </div>

                        <h4>code</h4>
                        <pre class="prettyprint linenums"><code>&lt;select class="form-control mobileSelect" data-title="I capture your screen" data-padding='{"top": "0px", "bottom": "0px", "right": "0px", "left":"0px"}'&gt;
    ...
&lt;/select&gt;
&lt;select class="form-control mobileSelect" data-title="Left and Right spacing" data-padding='{"top": "0px", "bottom": "0px", "right": "30px", "left":"30px"}'&gt;
    ...
&lt;/select&gt;
</code></pre>
                        <p><kbd>or</kbd> Set them in the initialization.</p>
                        <pre class="prettyprint linenums"><code>$('.mobileSelect').mobileSelect({
    padding: {
        top: '0px',
        left: '0px',
        right: '0px',
        bottom: '0px'
    }
});
</code></pre>
                    </div>
                    <h3 id="animations">ANIMATIONS!</h3>
                    <div class="section">
                        <p>mobileSelect provides basic animations like,
                            <code>'scale', 'zoom', 'top', 'bottom', 'left', 'right', 'opacity' &amp; 'none'</code></p>
                        <div class="row">
                            <div class="col-md-3">
                                <label>scale(default)</label>
                                <select class="form-control mobileSelect">
                                    <option value="pizza">Pizza</option>
                                    <option value="burger">Burger</option>
                                    <option value="tacos">Tacos</option>
                                    <option value="garlic-bread">Garlic Bread</option>
                                </select>
                            </div>
                            <div class="col-md-3">
                                <label>zoom</label>
                                <select class="form-control mobileSelect" data-animation="zoom">
                                    <option value="pizza">Pizza</option>
                                    <option value="burger">Burger</option>
                                    <option value="tacos">Tacos</option>
                                    <option value="garlic-bread">Garlic Bread</option>
                                </select>
                            </div>
                            <div class="col-md-3">
                                <label>opacity</label>
                                <select class="form-control mobileSelect" data-animation="opacity">
                                    <option value="pizza">Pizza</option>
                                    <option value="burger">Burger</option>
                                    <option value="tacos">Tacos</option>
                                    <option value="garlic-bread">Garlic Bread</option>
                                </select>
                            </div>
                            <div class="col-md-3">
                                <label>none</label>
                                <select class="form-control mobileSelect" data-animation="none">
                                    <option value="pizza">Pizza</option>
                                    <option value="burger">Burger</option>
                                    <option value="tacos">Tacos</option>
                                    <option value="garlic-bread">Garlic Bread</option>
                                </select>
                            </div>
                        </div>
                        <div style="height:5px;"></div>
                        <div class="row">
                            <div class="col-md-3">
                                <label>top</label>
                                <select class="form-control mobileSelect" data-animation="top">
                                    <option value="pizza">Pizza</option>
                                    <option value="burger">Burger</option>
                                    <option value="tacos">Tacos</option>
                                    <option value="garlic-bread">Garlic Bread</option>
                                </select>
                            </div>
                            <div class="col-md-3">
                                <label>left</label>
                                <select class="form-control mobileSelect" data-animation="left">
                                    <option value="pizza">Pizza</option>
                                    <option value="burger">Burger</option>
                                    <option value="tacos">Tacos</option>
                                    <option value="garlic-bread">Garlic Bread</option>
                                </select>
                            </div>
                            <div class="col-md-3">
                                <label>right</label>
                                <select class="form-control mobileSelect" data-animation="right">
                                    <option value="pizza">Pizza</option>
                                    <option value="burger">Burger</option>
                                    <option value="tacos">Tacos</option>
                                    <option value="garlic-bread">Garlic Bread</option>
                                </select>
                            </div>
                            <div class="col-md-3">
                                <label>bottom</label>
                                <select class="form-control mobileSelect" data-animation="bottom">
                                    <option value="pizza">Pizza</option>
                                    <option value="burger">Burger</option>
                                    <option value="tacos">Tacos</option>
                                    <option value="garlic-bread">Garlic Bread</option>
                                </select>
                            </div>
                        </div>


                        <h4>code</h4>
                        <pre class="prettyprint linenums"><code>&lt;select class="form-control mobileSelect" data-title="I capture your screen" data-animation='scale'&gt;
    ...
&lt;/select&gt;
&lt;select class="form-control mobileSelect" data-title="I capture your screen" data-animation='zoom'&gt;
    ...
&lt;/select&gt;
&lt;select class="form-control mobileSelect" data-title="I capture your screen" data-animation='opacity'&gt;
    ...
&lt;/select&gt;
&lt;select class="form-control mobileSelect" data-title="I capture your screen" data-animation='none'&gt;
    ...
&lt;/select&gt;
&lt;select class="form-control mobileSelect" data-title="I capture your screen" data-animation='top'&gt;
    ...
&lt;/select&gt;
&lt;select class="form-control mobileSelect" data-title="I capture your screen" data-animation='left'&gt;
    ...
&lt;/select&gt;
&lt;select class="form-control mobileSelect" data-title="I capture your screen" data-animation='right'&gt;
    ...
&lt;/select&gt;
&lt;select class="form-control mobileSelect" data-title="I capture your screen" data-animation='bottom'&gt;
    ...
&lt;/select&gt;
</code></pre>
                        <p><kbd>or</kbd> Set them while initialization.</p>
                        <pre class="prettyprint linenums"><code>$('.mobileSelect').mobileSelect({
    animation: 'zoom'
});
</code></pre>
                    </div>
                    <h3 id="animationspeeds">ANIMATION SPEED</h3>
                    <div class="section">
                        <p>Adjust the speed of the open close animation.
                            <code>setting it to 10000 miliseconds i.e. 10 seconds</code></p>
                        <select class="form-control mobileSelect" data-animation-speed="5000">
                            <option value="pizza">Pizza</option>
                            <option value="burger">Burger</option>
                            <option value="tacos">Tacos</option>
                            <option value="garlic-bread">Garlic Bread</option>
                        </select>

                        <h4>code</h4>
                        <pre class="prettyprint linenums"><code>&lt;select class="form-control mobileSelect" data-animationSpeed='5000'&gt;
    ...
&lt;/select&gt;
</code></pre>
                        <p><kbd>or</kbd> Set them while initialization.</p>
                        <pre class="prettyprint linenums"><code>$('.mobileSelect').mobileSelect({
    animationSpeed: 10000
});
</code></pre>
                    </div>
                    <h3 id="buttontext">BUTTON TEXT</h3>
                    <div class="section">
                        <p>Change default button text on the select.</p>
                        <select class="form-control mobileSelect" data-btntext-save="Save this man!"
                            data-btntext-cancel="Nevermind!" data-btntext-clear="Clear it out." multiple>
                            <option value="pizza">Pizza</option>
                            <option value="burger">Burger</option>
                            <option value="tacos">Tacos</option>
                            <option value="garlic-bread">Garlic Bread</option>
                        </select>

                        <h4>code</h4>
                        <pre class="prettyprint linenums"><code>&lt;select class="form-control mobileSelect" data-btntext-save="Save this man!" data-btntext-cancel="Nevermind!" data-btntext-clear="Clear it out." multiple&gt;
    ...
&lt;/select&gt;
</code></pre>
                    </div>
                    <h3 id="triggeron">TRIGGER ON</h3>
                    <div class="section">
                        <p>
                            At times, you do not want the plugin generated select. instead you have a custom
                            <code>div</code> on which the <code>Select</code> should trigger.<br>
                            This is common while developing on phonegap/cordova.
                        </p>

                        <select class="mobileSelect" data-triggerOn="#customdiv">
                            <option value="pizza">Pizza</option>
                            <option value="burger">Burger</option>
                            <option value="tacos">Tacos</option>
                            <option value="garlic-bread">Garlic Bread</option>
                        </select>

                        <div id="customdiv" style="width:200px; height: 100px; background: green;color: white;">
                            This may be some custom designed button. click me.
                        </div>

                        <h4>code</h4>
                        <pre class="prettyprint linenums"><code>&lt;select class="form-control mobileSelect" data-triggerOn="#customdiv"&gt;
    &lt;option value="pizza"&gt;Pizza&lt;/option&gt;
    &lt;option value="burger"&gt;Burger&lt;/option&gt;
    &lt;option value="tacos"&gt;Tacos&lt;/option&gt;
    &lt;option value="garlic-bread"&gt;Garlic Bread&lt;/option&gt;
&lt;/select&gt;

&lt;div id="customdiv" style="width:200px; height: 100px; background: green; color: white;"&gt;
    This may be some custom designed button. click me.
&lt;/div&gt;
</code></pre>
                    </div>
                    <h3 id="callbacks">CALLBACKS</h3>
                    <div class="section">
                        <p>mobileSelect provides callback functions <code>onOpen</code> &amp; <code>onClose</code></p>

                        <select class="form-control mobileSelectCallback" data-animationSpeed="5000">
                            <option value="pizza">Pizza</option>
                            <option value="burger">Burger</option>
                            <option value="tacos">Tacos</option>
                            <option value="garlic-bread">Garlic Bread</option>
                        </select>

                        <h4>code</h4>
                        <!-- <pre  class="prettyprint linenums"><code>&lt;select class="form-control mobileSelectCallback" data-animationSpeed='5000'&gt;
    ...
&lt;/select&gt;
</code></pre> -->
                        <ul>
                            <li><code>onOpen</code> fires when the open animation starts, <code>onClose</code> fires
                                after the close animation is done.</li>
                            <li><code>this</code> refers to the SELECT element on which the user interacts.</li>
                            <li><code>this</code> == <code>$(this)</code>, this is a jQuery object. ie.
                                <code>this.val()</code> will also work.</li>
                        </ul>
                        <pre class="prettyprint linenums"><code>$('.mobileSelectCallback').mobileSelect({
    onClose: function(){
        alert('onClose: '+$(this).val());
    },
    onOpen: function(){
        alert('onOpen: '+this.val());
    }
});
</code></pre>
                        <script type="text/javascript">
                            $('.mobileSelectCallback').mobileSelect({
                                onClose: function () {
                                    alert('onClose: ' + $(this).val());
                                },
                                onOpen: function () {
                                    alert('onOpen: ' + this.val());
                                }
                            });
                        </script>
                    </div>

                    <h2 id="globals">GLOBAL DEFAULTS</h2>
                    <div class="section">
                        <p>You can overwrite Global Defaults for mobileSelect.<br>
                            here are list of options available.
                        </p>
                        <pre class="prettyprint linenums"><code>$.mobileSelect.defaults = {
    title: 'Select an option',
    buttonSave: 'Save',
    buttonClear: 'Clear',
    buttonCancel: 'Cancel',
    padding: {
        'top': '20px',
        'left': '20px',
        'right': '20px',
        'bottom': '20px'
    },
    animation: 'scale',
    animationSpeed: 400,
    theme: 'white',
    onOpen: function () {
    },
    onClose: function () {
    },
    style: 'btn-default'
};</code></pre>
                    </div>

                    <h2 id="options">OPTIONS</h2>
                    <div class="section">
                        <p>options can be passed via data-attributes or while initialization.</p>
                        <div class="table-responsive">

                            <table class="table table-bordered table-striped">
                                <tr>
                                    <th>Name</th>
                                    <th>type</th>
                                    <th>default</th>
                                    <th>description</th>
                                </tr>
                                <tr>
                                    <td>title</td>
                                    <td>string</td>
                                    <td>Select an option</td>
                                    <td>displays on the top of mobileSelect modal.</td>
                                </tr>
                                <tr>
                                    <td>buttonSave</td>
                                    <td>String</td>
                                    <td>
                                        Save
                                    </td>
                                    <td>Save button displayed on the modal.</td>
                                </tr>
                                <tr>
                                    <td>buttonClear</td>
                                    <td>String</td>
                                    <td>
                                        Clear
                                    </td>
                                    <td>
                                        Clear button displayed on the modal.
                                        <p class="text-success">is visible only for multiple select elements.</p>
                                    </td>
                                </tr>
                                <tr>
                                    <td>buttonCancel</td>
                                    <td>String</td>
                                    <td>
                                        Cancel
                                    </td>
                                    <td>Cancel button displayed on the modal.</td>
                                </tr>
                                <tr>
                                    <td>padding</td>
                                    <td>object</td>
                                    <td>
                                        <pre>{
top: '20px',
left: '20px',
right: '20px',
bottom: '20px'
}
</pre>
                                    </td>
                                    <td>Space to maintain between the screen and the mobileSelect modal.<br>
                                        The unit may be in <code>px</code>, <code>em</code> etc.
                                    </td>
                                </tr>
                                <tr>
                                    <td>animation</td>
                                    <td>string</td>
                                    <td>scale</td>
                                    <td>
                                        Change open and close animations, possible options are <br>
                                        <code>none </code>,<code> scale </code>,<code> zoom </code>,<code> opacity </code>,<code> top </code>,<code> left </code>,<code> right </code>,<code> bottom</code>,
                                    </td>
                                </tr>
                                <tr>
                                    <td>animationSpeed</td>
                                    <td>number</td>
                                    <td><code>400</code></td>
                                    <td>Open and close animations duration in miliseconds.</td>
                                </tr>
                                <tr>
                                    <td>theme</td>
                                    <td>string</td>
                                    <td>white</td>
                                    <td>
                                        mobileSelect provides 3 different styles, <br>
                                        <code>white</code>, <code>holo</code>, <code>mac</code>
                                    </td>
                                </tr>
                                <tr>
                                    <td>style</td>
                                    <td>string</td>
                                    <td>btn-default</td>
                                    <td>
                                        If triggerOn element is not defined in data-attributes, the plugin generates its
                                        Select to replace the native select.<br>
                                        possible styles, <code>btn-default</code>, <code>btn-primary</code>,
                                        <code>btn-warning</code>, <code>btn-info</code>, <code>btn-danger</code>,
                                        <code>btn-success</code>, <code>btn-link</code>, or even ur custom styled class
                                        name.
                                    </td>
                                </tr>
                                <tr>
                                    <td>search</td>
                                    <td>string</td>
                                    <td>true</td>
                                    <td>
Reveals search bar.
                                    </td>
                                </tr>
                                <tr>
                                    <td>onOpen</td>
                                    <td>function</td>
                                    <td><code>function(){}</code></td>
                                    <td>Callback function called when an model is opened, this refers to jQuery object
                                        within the function.</td>
                                </tr>
                                <tr>
                                    <td>onClose</td>
                                    <td>function</td>
                                    <td><code>function(){}</code></td>
                                    <td>Callback function called when the model closed animation is completed, this
                                        refers to jQuery object within the function.</td>
                                </tr>

                            </table>
                        </div>
                    </div>


                    <h2 id="methods">METHODS</h2>
                    <div class="section">

                        <h4>show()</h4>
                        <p>Display the Selection dialog programmically with the show method.</p>

                        <select class="mobileSelect" id="exampleShow">
                            <option>option 1</option>
                            <option>option 2</option>
                            <option>option 3</option>
                        </select>
                        <button class="btn btn-primary" onclick="$('#exampleShow').mobileSelect('show')">open
                            it</button>
                        <div style="height: 10px;"></div>
                        <pre class="prettyprint linenums"><code>&lt;select class="mobileSelect" id="exampleShow"&gt;
    &lt;option&gt;option 1&lt;/option&gt;
    &lt;option&gt;option 2&lt;/option&gt;
    &lt;option&gt;option 3&lt;/option&gt;
&lt;/select&gt;
&lt;button class="btn btn-primary" onclick="$('#exampleShow').mobileSelect('show')"&gt;open it&lt;/button&gt;
</code></pre>
                        <pre class="prettyprint linenums"><code>$('.mobileSelect').mobileSelect('show');
// NOTE: limit selected elements to "1". You may use <strong>.eq(n)</strong> to do this.
</code></pre>

                        <h4>hide()</h4>
                        <p>Hide the Selection dialog programmically with the hide method.</p>

                        <pre class="prettyprint linenums"><code>$('.mobileSelect').mobileSelect('hide');
// NOTE: limit selected elements to "1". You may use <strong>.eq(n)</strong> to do this.
</code></pre>

                        <h4>sync() or refresh()</h4>
                        <p>After programmically altering your select element, call the <code>sync</code> method to
                            refresh data.</p>


                        <select class="mobileSelect" id="exampleRefresh">
                            <option value="pizza">pizza</option>
                            <option value="burger">burger</option>
                        </select>
                        <div style="height: 10px;"></div>
                        <button class="btn btn-primary addTacos">append Tacos</button>
                        <button class="btn btn-primary addGarlicBread">append Garlic bread</button>
                        <button class="btn btn-danger removeTacos">remove Tacos</button>
                        <button class="btn btn-danger removeGarlicBread">remove Garlic bread</button>
                        <div style="height: 10px"></div>
                        <p class="text-danger"><i class="fa fa-warning"></i> Appending options with same value multiple
                            times will cause problems</p>
                        <script type="text/javascript">
                            $('.addTacos').click(function () {
                                $('#exampleRefresh').append('<option value="tacos">Tacos</option>');
                                $('#exampleRefresh').mobileSelect('refresh');
                            });
                            $('.addGarlicBread').click(function () {
                                $('#exampleRefresh').append('<option value="garlic-bread">Garlic bread</option>');
                                $('#exampleRefresh').mobileSelect('refresh');
                            });
                            $('.removeTacos').click(function () {
                                $('#exampleRefresh option[value="tacos"]').remove();
                                $('#exampleRefresh').mobileSelect('refresh');
                            });
                            $('.removeGarlicBread').click(function () {
                                $('#exampleRefresh option[value="garlic-bread"]').remove();
                                $('#exampleRefresh').mobileSelect('refresh');
                            });
                        </script>

                        <pre class="prettyprint linenums"><code>$('.addTacos').click(function(){
    $('#exampleRefresh').append('&lt;option value="tacos"&gt;tacos&lt;/option&gt;');
    $('#exampleRefresh').mobileSelect('refresh');
});
$('.addGarlicBread').click(function(){
    $('#exampleRefresh').append('&lt;option value="garlic-bread"&gt;Garlic bread&lt;/option&gt;');
    $('#exampleRefresh').mobileSelect('refresh');
});
$('.removeTacos').click(function(){
    $('#exampleRefresh option[value="tacos"]').remove();
    $('#exampleRefresh').mobileSelect('refresh');
});
$('.removeGarlicBread').click(function(){
    $('#exampleRefresh option[value="garlic-bread"]').remove();
    $('#exampleRefresh').mobileSelect('refresh');
});

</code></pre>

                        <h4>destroy()</h4>
                        <p>to remove(destroy) the mobileSelect plugin initializations for selected elements.</p>
                        <button class="btn btn-danger destroythemall">Destroy all mobileSelect elements</button>
                        <button class="btn btn-success initializeAgain">Re initialize all mobileSelect elements</button>
                        <div style="height:10px;"></div>
                        <p class="text-danger"><i class="fa fa-warning"></i> keep an eye on the console for errors when
                            u initialize the initialized elements</p>
                        <pre class="prettyprint linenums"><code>&lt;button class="btn btn-primary destroythemall"&gt;Destroy all mobileSelect elements&lt;/button&gt;
&lt;button class="btn btn-primary initializeAgain"&gt;Re initialize all mobileSelect elements&lt;/button&gt;
</code></pre>

                        <script type="text/javascript">
                            $('.destroythemall').click(function () {
                                $('.mobileSelect').mobileSelect('destroy');
                            });
                            $('.initializeAgain').click(function () {
                                $('.mobileSelect').mobileSelect();
                            });
                        </script>
                        <pre class="prettyprint linenums"><code>$('.destroythemall').click(function(){
    $('.mobileSelect').mobileSelect('destroy');
});
$('.initializeAgain').click(function(){
    $('.mobileSelect').mobileSelect();
});
</code></pre>


                    </div>
                </section>
                <section>
                    <div class="spacer15"></div>
                    <h1 style="text-align:center"><i class="fa fa-coffee" style="color: #979797"></i> happy coding </h1>
                    <div class="spacer15"></div>
                </section>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $(function () {
            $('.mobileSelect').mobileSelect();
        });
    </script>

    <script type="text/javascript" src="demo/demo.min.js"></script>

    <!-- javascript for the demo page interface. -->
</body>

</html>