|
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
___________________________
169J.- Paneles deslizables con JavaScript.
_________________
- Bloques.
_________________
- Archivo panel.htm.
panel.htm |
<!DOCTYPE html>
<html><head><meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="jquery-1.10.2.js"></script>
<script type="text/javascript" src="jquery.touchSwipe.js"></script>
<script type="text/javascript" src="jquery.horizonScroll.js"></script>
</head>
<body>
<script>
function boton_click(resultado) {
window.AppInventor.setWebViewString(resultado);
}
// Juan A. Villalpando
</script>
<style>
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 6px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 10px;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
cursor: pointer;
width: 80px;
}
.button1 {
background-color: white;
color: black;
border: 2px solid #f44336;
}
.button1:hover {
background-color: #f44336; /* Red */
color: white;
}
.button2 {
background-color: white;
color: black;
border: 2px solid #4CAF50;
}
.button2:hover {
background-color: #4CAF50; /* Green */
color: white;
}
.button3 {
background-color: white;
color: black;
border: 2px solid #008CBA;
}
.button3:hover {
background-color: #008CBA; /* Blue */
color: white;
}
.button4 {
background-color: white;
color: black;
border: 2px solid #05fa70;
}
.button4:hover {
background-color: #05fa70; /* Cyan */
color: white;
}
.button5 {
background-color: white;
color: black;
border: 2px solid #fa058f;
}
.button5:hover {
background-color: #fa058f; /* Magenta */
color: white;
}
.button6 {
background-color: white;
color: black;
border: 2px solid #faea0a;
}
.button6:hover {
background-color: #faea0a; /* Yellow */
color: white;
}
.texto {
color: white;
font-size: 24px;
text-align: center;
}
</style>
<header data-role="header" id="header"></header>
<div class="horizon-prev"><img src="l-arrow.png"></div>
<div class="horizon-next"><img src="r-arrow.png"></div>
<section data-role="section" id="section-section1">
<div class="texto">Sección - 1</div>
<button class="button button1" onclick="boton_click('Rojo:Seccion1')">Red</button>
<button class="button button2" onclick="boton_click('Verde:Seccion1')">Green</button>
<button class="button button3" onclick="boton_click('Azul:Seccion1')">Blue</button>
<button class="button button4" onclick="boton_click('Cian:Seccion1')">Cyan</button>
<button class="button button5" onclick="boton_click('Magenta:Seccion1')">Magenta</button>
<button class="button button6" onclick="boton_click('Amarillo:Seccion1')">Yellow</button>
</section>
<section data-role="section" id="section-section2">
<div class="texto">Sección - 2</div>
<button class="button button1" onclick="boton_click('Rojo:Seccion2')">Red</button>
<button class="button button2" onclick="boton_click('Verde:Seccion2')">Green</button>
<button class="button button3" onclick="boton_click('Azul:Seccion2')">Blue</button>
<button class="button button4" onclick="boton_click('Cian:Seccion2')">Cyan</button>
<button class="button button5" onclick="boton_click('Magenta:Seccion2')">Magenta</button>
<button class="button button6" onclick="boton_click('Amarillo:Seccion2')">Yellow</button>
</section>
<section data-role="section" id="section-section3">
<div class="texto">Sección - 3</div>
<button class="button button1" onclick="boton_click('Rojo:Seccion3')">Red</button>
<button class="button button2" onclick="boton_click('Verde:Seccion3')">Green</button>
<button class="button button3" onclick="boton_click('Azul:Seccion3')">Blue</button>
<button class="button button4" onclick="boton_click('Cian:Seccion3')">Cyan</button>
<button class="button button5" onclick="boton_click('Magenta:Seccion3')">Magenta</button>
<button class="button button6" onclick="boton_click('Amarillo:Seccion3')">Yellow</button>
</section>
<section data-role="section" id="section-section4">
<div class="texto">Sección - 4</div>
<button class="button button1" onclick="boton_click('Rojo:Seccion4')">Red</button>
<button class="button button2" onclick="boton_click('Verde:Seccion4')">Green</button>
<button class="button button3" onclick="boton_click('Azul:Seccion4')">Blue</button>
<button class="button button4" onclick="boton_click('Cian:Seccion4')">Cyan</button>
<button class="button button5" onclick="boton_click('Magenta:Seccion4')">Magenta</button>
<button class="button button6" onclick="boton_click('Amarillo:Seccion4')">Yellow</button>
</section>
<footer data-role="footer" id="footer"></footer>
<script type="text/javascript">
// By default, swipe is enabled. Disable is: $('section').horizon({swipe: false});
$('section').horizon();
</script>
</body>
</html>
|
_________________
- Comentarios.
- La posición y colores de los elementos se establece en los archivos panel.htm y style.css
- Recuerda: CSS no es tu amigo.
__________________________________
|
