index.html 9.62 KB
Newer Older
Indra Raja's avatar
Indra Raja committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203
<!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>