Skip to content

Instantly share code, notes, and snippets.

@fuegolin1

fuegolin1/index.html

Created September 7, 2022 12:21
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save fuegolin1/c97692c7d135e032f85a0355bdffce41 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save fuegolin1/c97692c7d135e032f85a0355bdffce41 to your computer and use it in GitHub Desktop.
Download ZIP
Teclado virtual y de colores
Raw
index.html
<div class="row">
<div class="col s12 l4">
<div class="card-panel">
<h5 class="center">Seleccionar Lote</h5>
<div class="row">
<section class="input-filts col s12">
<input type="Number" name="NumberLote" value="" placeholder="Numero del Lote" class="center" style="font-size: 2.9rem;">
<label for="NumberLote"></label>
</section>
<section class="row ">
<div class="col s4 light-blue numbersDashboard center " onclick="setNumbersSelectDashboard(1)"><p>1</p></div>
<div class="col s4 light-blue numbersDashboard center " onclick="setNumbersSelectDashboard(2)"><p>2</p></div>
<div class="col s4 light-blue numbersDashboard center " onclick="setNumbersSelectDashboard(3)"><p>3</p></div>
<div class="col s4 light-blue numbersDashboard center " onclick="setNumbersSelectDashboard(4)"><p>4</p></div>
<div class="col s4 light-blue numbersDashboard center " onclick="setNumbersSelectDashboard(5)"><p>5</p></div>
<div class="col s4 light-blue numbersDashboard center " onclick="setNumbersSelectDashboard(6)"><p>6</p></div>
<div class="col s4 light-blue numbersDashboard center " onclick="setNumbersSelectDashboard(7)"><p>7</p></div>
<div class="col s4 light-blue numbersDashboard center " onclick="setNumbersSelectDashboard(8)"><p>8</p></div>
<div class="col s4 light-blue numbersDashboard center " onclick="setNumbersSelectDashboard(9)"><p>9</p></div>
<div class="col s4 light-blue numbersDashboard center " onclick="setNumbersSelectDashboard('none')"><p></p></div>
<div class="col s4 light-blue numbersDashboard center " onclick="setNumbersSelectDashboard(0)"><p>0</p></div>
<div class="col s4 light-blue numbersDashboard center " onclick="setNumbersSelectDashboard('Clear')"><p>Clear</p></div>
</section>
</div>
</div>
</div>
</div>
</div>
</div>
Raw
script.js
function setNumbersSelectDashboard(data){
console.log('Se ha seleccionado el Numero '+ data);
var inp = $('input[name=NumberLote]');
if(data === "Clear") {
console.log('Limpiar')
inp.val('');
}
if(data !== 'none') {
var ant = inp.val();
var newN = data;
inp.val(`${ant}${newN}`);
}
}
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
Raw
style.stylus
.numbersDashboard
background-color: #FFF
height 115px
border 2px solid #DDD
border-radius 8px
font-size 2em
cursor pointer
Raw
teclado-virtual-y-de-colores.markdown
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment