<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
        <title>jQuery virtual_keyboard.js Playground</title>
<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
        <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

        <link href="../assets/plugins/jquery.virtual_keyboard/jquery.virtual_keyboard.css" rel="stylesheet" type="text/css"/>
        <style>
        body { overflow-x:hidden;}
        h1 { margin:150px auto 30px auto; text-align:center;}
        </style>
    </head>
    <body><div id="jquery-script-menu">
<div class="jquery-script-center">
<ul>
<li><a href="http://www.jqueryscript.net/other/Customizable-Virtual-Keyboard-With-jQuery-Bootstrap.html">Download This Plugin</a></li>
<li><a href="http://www.jqueryscript.net/">Back To jQueryScript.Net</a></li>
</ul>
<div class="jquery-script-ads"><script type="text/javascript"><!--
google_ad_client = "ca-pub-2783044520727903";
/* jQuery_demo */
google_ad_slot = "2780937993";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></div>
<div class="jquery-script-clear"></div>
</div>
</div>
    <h1>jQuery virtual_keyboard.js Playground</h1>
        <div class="row">
            <div class="col-md-2">
            </div>
            <div class="col-md-6">
                <textarea id="example-2" class="form-control" rows="3" placeholder="Type something..."></textarea>
            </div>
            <div class="col-md-3 col-lg-offset-1" id="mio" style=" border:2px solid #51668c;  padding-bottom: 5px; margin-left: 8.3%;">
                <h4 class="bg-primary col-lg-offset-1 col-sm-10">Configuration Options:</h4>
                <form class="form-horizontal">
                    <div class="form-group">
                        <label for="themeSelect" class="col-sm-2 control-label">Theme</label>
                        <div class="col-sm-8">
                            <select class="form-control" id="themeSelect">
                                <option value="default" selected>Default (Apple iOS)</option>
                                <option value="monokai">Monokai</option>
                                <option value="orange">Orange</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="typeSelect" class="col-sm-2 control-label">Type</label>
                        <div class="col-sm-8">
                            <select class="form-control" id="typeSelect">
                                <option value="gatekeeper" selected>Default (Gatekepper)</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="languageSelect" class="col-sm-2 control-label">Language</label>
                        <div class="col-sm-8">
                            <select class="form-control" id="languageSelect">
                                <option value="en_US" selected>Default (en_US)</option>
                                <option disabled value="ru_RU">ru_RU</option>
                                <option disabled value="es_ES">es_ES</option>
                                <option disabled value="pt_PT">pt_PT</option>
                                <option disabled value="it_IT">it_IT</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="openSpeedInput" class="col-sm-2 control-label">Open Speed</label>
                        <div class="col-sm-8">
                            <input class="form-control" id="openSpeedInput" placeholder="" type="number" min="100" max="2000" step="100">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="closeSpeedInput" class="col-sm-2 control-label">Close Speed</label>
                        <div class="col-sm-8">
                            <input class="form-control" id="closeSpeedInput" placeholder="" type="number" min="100" max="2000" step="100">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10 ">
                            <div class="checkbox">
                                <label>
                                    <input type="checkbox" id="enabledCheck"> Hide Keyboard
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10 ">
                            <div class="checkbox">
                                <label>
                                    <input type="checkbox" id="hiddenCheck"> Show Keyboard
                                </label>
                            </div>
                        </div>
                    </div>
                </form>

                <button type="button" id="buttom1" class="btn-success btn">Trigger</button>
            </div>
        </div>

        <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
        <script src="../assets/plugins/jquery.virtual_keyboard/jquery.virtual_keyboard.js" type="text/javascript"></script>

        <script>
            jQuery(document).ready(function() {
                $('[data-toggle="tooltip"]').tooltip();
                $('[data-toggle="popover"]').popover();

                $('textarea').keyboard({

                    //theme: 'default',

                    //is_hidden: false,

                    //close_speed: 1000,

                    //enabled: false,

                    //layout: 'en_US',

                    // definimos un trigger al keyboard.
                    // Al hacer click sobre el selector que tenga el id (#) o la clase (.) definida
                    // se ocultara o mostrara el keyboard segun corresponda.
                    trigger: '#buttom1'
                });

                // Guardo en la variable 'keyboard' (puede ser cualkier otro nombre), la instancia del plugin creada,
                // para asi acceder a los metodos publicos del plugin
                var keyboard = $('textarea').data('pluginKeyboard');

                // A partir de aqui inicializo los valores del cajon de 'Configuration Options' que vemos,
                // para que los campos tengan los valores con los que se creo la instancia del plugin.

                $('#hiddenCheck').attr('checked', !keyboard.getHidden());   // CheckBox k oculta o muestra el keyboard

                $('#openSpeedInput').val(keyboard.getOpenSpeed());          // Valor en milisegundos de la velocidad con que se muestra el keyboard

                $('#closeSpeedInput').val(keyboard.getCloseSpeed());        // Valor en milisegundos de la velocidad con que se oculta el keyboard

                keyboard.SubmitKey = function(){                            // Definimos que accion realizar al presionar la tecla 'Submit'.
                    alert('Presionada la tecla Enter');
                };


                // Cambiamos el tema del teclado de acuerdo al valor que este seleccionado en el campo 'Select' del Tema.
                // De momento solo tres temas, estoy trabajando en mejorarlos y agregar 2 temas más.
                $('#themeSelect').change(function(){
                    $(this).find(':selected').each(function () {
                        keyboard.setTheme($('#themeSelect').val());
                    })
                });

                // Definimos que al hacer click en el checkbox de 'Habilitar Keyboard' se bloquee o desbloquee el keyboard
                $('#enabledCheck').change(function(){
                    keyboard.setEnabled(!keyboard.getEnabled());
                });

                // Definimos que al hacer click en el checkbox de 'Mostrar Keyboard' se muestro u oculte el keyboard
                $('#hiddenCheck').change(function(){
                    keyboard.setHidden($(this).is(':checked'));
                });

                // Cambiamos la velocidad con que se muestra el keyboard al cambiar el valor del campo 'Open Speed', el valor esta en milisegundos
                $('#openSpeedInput').change(function(){
                    keyboard.setOpenSpeed($(this).val());
                });

                // Cambiamos la velocidad con que se oculta el keyboard al cambiar el valor del campo 'Close Speed', el valor esta en milisegundos
                $('#closeSpeedInput').change(function(){
                    keyboard.setCloseSpeed($(this).val());
                });
            });
        </script>
    <!-- END JAVASCRIPTS -->
    </body>
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-36251023-1']);
  _gaq.push(['_setDomainName', 'jqueryscript.net']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
</html>