|
App inventor 2 en español
Cómo programar los teléfonos móviles con Android.
Curso de App inventor 2 en español - Juan Antonio Villalpando
-- Tutorial de iniciación de App Inventor 2 en español --
Volver al índice del tutorial
___________________________
169I.- VisorDeLista con JavaScript.
 p169I_javascript_visordelista_fuente.aia
- Vamos a ver dos modelos de VisorDeLista creados mediante mediante JavaScript.
- Saldrá un listado de países y al pulsarlos obtendremos en la Etiqueta1 su código de país representado por dos letras.
- Este ejemplo solo trata de mostrar una de las manera de utilizar JavaScript para crea Visor de lista.
_________________
- Diseño.
- Subimos los archivos indicados.
- En esta ocasión los VisorWeb deben ser Visible, ya que en ellos se mostrará el Visor de lista.
_________________
- Bloques.
_________________
- Archivos.
- Debemos subir el archivo de JavaScript: jquery-3.1.1.min.js y el de fuente: sevillana.ttf
visor1.htm |
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"></head><body>
<style>
@font-face {
font-family: sevilla;
src: url(sevillana.ttf);
}
body {margin: 0px 0px;width:100%;}
.mainmenu {margin: 1px 0px; background-color: #2266AA; color: #FFFFFF;}
.submenu {display: none;border-bottom: 0px solid;}
.submenu ul {margin: 1px 0px; list-style: none;padding: 0px;}
.submenu li {margin-bottom:1px; background-color: #EEEEEE;color: #000000;font-family: sevilla;font-size: x-large;}
</style>
<script src="jquery-3.1.1.min.js" type="text/javascript"></script>
<script>
function expande_junta() {
if($(".submenu").css('display') == 'none') {
$(".submenu").show("slow");
} else {
$(".submenu").hide("slow");
}
}
function liClick(resultado) {
window.AppInventor.setWebViewString(resultado);
}
// Juan A. Villalpando
</script>
<div class="mainmenu" onClick="expande_junta()">
<img src="europa.png" align="middle"> Europa
<div class="submenu">
<ul>
<li onclick="liClick('es')";><img src="Spain.png" align="middle"> España</li>
<li onclick="liClick('it')";><img src="Italy.png" align="middle" > Italia</li>
<li onclick="liClick('po')";><img src="Portugal.png" align="middle"> Portugal</li>
<li onclick="liClick('fr')";><img src="France.png" align="middle"> Francia</li>
</ul>
</div>
</div>
<div class="mainmenu" onClick="expande_junta()">
<img src="america.png" align="middle"> América
<div class="submenu">
<ul>
<li onclick="liClick('us')";><img src="USA.png" align="middle"> Estados Unidos</li>
<li onclick="liClick('mx')";><img src="Mexico.png" align="middle"> México</li>
<li onclick="liClick('co')";><img src="Colombia.png" align="middle"> Colombia</li>
<li onclick="liClick('ar')";><img src="Argentina.png" align="middle"> Argentina</li>
</ul>
</div>
</div>
<div class="mainmenu" onClick="expande_junta()">
<img src="asia.png" align="middle"> Asia
<div class="submenu">
<ul>
<li onclick="liClick('ch')";><img src="China.png" align="middle"> China</li>
<li onclick="liClick('ja')";><img src="Japan.png" align="middle"> Japón</li>
<li onclick="liClick('in')";><img src="India.png" align="middle"> India</li>
</ul>
</div>
</div>
</body></html>
|
visor2.htm |
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"></head><body>
<style>
body {margin: 0px 0px;width:100%;}
.mainmenu {margin: 3px 0px;line-height: 30px;background-color: #2266AA; color: #FFFFFF;}
.submenu {display: none;}
.submenu ul{list-style: none;padding: 0px;}
.submenu li {margin-bottom:1px;line-height: 30px;background-color: #EEEEEE;color: #000000;}
.submenu img {
float: left;
margin: 0px 20px 0px 0px;
}
.peque {font-size: 9px;margin-top:-10px;}
</style>
<script src="jquery-3.1.1.min.js" type="text/javascript"></script>
<script>
function expande_junta() {
if($(".submenu").css('display') == 'none') {
$(".submenu").show("slow");
} else {
$(".submenu").hide("slow");
}
}
function liClick(resultado) {
window.AppInventor.setWebViewString(resultado);
}
// Juan A. Villalpando
</script>
<div class="mainmenu" onClick="expande_junta()">
<img src="europa.png" width="48" height="48" align="middle"> Países
<div class="submenu">
<ul>
<li onclick="liClick('es')";><img src="Spain.png"><b>España</b><div class="peque">47 millones de habitantes</div></li>
<li onclick="liClick('it')";><img src="Italy.png"><b>Italia</b><div class="peque">60 millones de habitantes</div></li>
<li onclick="liClick('po')";><img src="Portugal.png"><b>Portugal</b><div class="peque">11 millones de habitantes</div></li>
<li onclick="liClick('fr')";><img src="France.png"><b>Francia</b><div class="peque">66 millones de habitantes</div></li>
<li onclick="liClick('us')";><img src="USA.png"><b>Estados Unidos</b><div class="peque">320 millones de habitantes</div></li>
<li onclick="liClick('mx')";><img src="Mexico.png"><b>México</b><div class="peque">125 millones de habitantes</div></li>
<li onclick="liClick('co')";><img src="Colombia.png"><b>Colombia</b><div class="peque">49 millones de habitantes</div></li>
<li onclick="liClick('ar')";><img src="Argentina.png"><b>Argentina</b><div class="peque">43 millones de habitantes</div></li>
<li onclick="liClick('ch')";><img src="China.png"><b>China</b><div class="peque">1360 millones de habitantes</div></li>
<li onclick="liClick('ja')";><img src="Japan.png"><b>Japón</b><div class="peque">128 millones de habitantes</div></li>
<li onclick="liClick('in')";><img src="India.png"><b>India</b><div class="peque">1255 millones de habitantes</div></li>
</ul>
</div>
</div>
</body></html> |
_________________
- Comentarios.
- En el visor1.htm he utilizado la fuente sevillana.ttf obtenida en: http://www.1001fonts.com/sevillana-font.html#character-map
- Fíjate como cargo la fuente:
@font-face { font-family: sevilla;
src: url(sevillana.ttf); }
- Los códigos de Style CSS ajustan los elementos en la pantalla según sus medidas.
- Esta es la función que toma el resultado obtenido según el país pulsado
function liClick(resultado) {
window.AppInventor.setWebViewString(resultado);
}
- Si pulso en "España" enviará: es
<li onclick="liClick('es')";><img src="Spain.png" align="middle"> España</li>
- Observa que la lista de países y capitales comienzan por coma. Y que cuando se inicia la aplicación se establece que WebViewString valga caracter vacío. Esto lo hacemos debido a que el Reloj está continuamente funcionando y al principio, automáticamente intenta leer el WebViewString y si no tiene ningún valor daría error en la lista de longitud cero. Así que he puesto un elemento "vacío" al principo de las listas y al iniciar la Screen1 leo ese elemento "vacío".
- En el visor2.htm dejo la fuente por defecto.
- Desplazo hacia la derecha de las imágenes los textos mediante:
.submenu img { float: left; margin: 0px 20px 0px 0px; }
- El tamaño de letra pequeña lo establezco en: .peque {font-size: 9px;margin-top:-10px;}
_________________
- Propuesta.
- Crea un VisorDeLista utilizando este código:
https://www.w3schools.com/jquerymobile/tryit.asp?filename=tryjqmob_lists_panel
p169I_javascripit_visorlistahtm.aia
https://www.w3schools.com/jquerymobile/jquerymobile_examples.asp
http://jquerypluginplus.com/horizonscroll-js-jquery-horizontal-scrolling/
https://www.w3schools.com/css/tryit.asp?filename=trycss_buttons_hover
https://www.w3schools.com/css/css3_buttons.asp
__________________________________
|
