vistas secundarias, el tema de esta cuarta parte del artículo dedicado a un sistema de navegación para una aplicación de Córdoba, en realidad no están estrictamente relacionados con el sistema de navegación. Me di cuenta demasiado tarde de que vistas secundarias habría merecido un nuevo artículo específico para ellos sólo. Pero ya que en la primera parte del artículo que había prometido para informarle sobre ellas, bien, Quiero mantener mi promesa. Y después de todo, los usuarios deben ser capaces de navegar a vistas secundarias también, entonces, incluso si nuestra barra superior no participa directamente, we’ll see that our sidebar menu will be 🙂
La lógica subyacente
Como ya he dicho, vistas secundarias nos va a permitir abrir muchas «páginas» para realizar tareas específicas: ver una imagen grande, llena un formulario, Detalles del producto Leer. Generalmente, podemos abrir cualquiera de estos vistas secundarias el uso de un elemento de menú o pulsando un botón en una de las páginas principales o incluso tocando un botón en otrovista secundaria. Entonces, definitivamente podemos tener varios vistas secundarias ya abiertas en un momento dado y podemos esperar que podamos volver a la anterior abierto ver simplemente deslizar hacia la izquierda, o pulsando un botón de retroceso específica y, obviamente, con el botón de regreso de nuestro teléfono.
Esto no se gestiona de forma automática por Córdoba, por lo que tenemos que escribir manualmente el código para gestionar vistas secundarias y la navegación entre ellas. Con el fin de hacer el sombrero vamos a construir una matriz simple en el que estamos gonig para almacenar el abierto vistas secundarias. Además vamos a crear dos funciones para entrar y salir vistas secundarias: enterSecondaryView() yexitSecondaryView(). El primero tiene varias tareas a realizar:
- fijará la animación se utiliza para entrar en el vista secundaria
- agregará el id de la vista secundaria a la matriz secondaryViews[]
- finalmente se llevará a cabo opcionalmente una acción específica (típicamente, cargar algunos datos de la base de datos)
los exitSecondaryView() llevará a cabo las acciones analógicas para gestionar el proceso de salida:
- fijará la animación apropiadamente
- se elimine el ID de la vista desde la secondaryViews[] formación
- se llevará a cabo opcionalmente cualquier acción que necesitamos salir de la específica vista secundaria
Dicho esto acerca de la lógica, en el marcado vamos a crear divs específicos (todos los que necesitamos para nuestra aplicación) dándoles la «secundario-view» clase. Como veremos, el css relacionado es muy simple. Seguir con algo de código.
El formato HTML
El marcado de HTML básico para una vista secundaria es muy simple:
<div id="view_a" class="secondary-view">
<div class="secondary-view-toolbar">
<div class="navbar" data-role="navbar">
<ul class="cfx-menu">
<li class="back-button unique-item">
<a href="#" class="back">
<i class="material-icons">arrow_back</i>
</a>
</li>
</ul>
</div>
</div>
<div class="page-wrapper">
<h4>view_a</h4>
<div class="content-wrapper">
</div>
</div>
</div>
Como puedes ver, nada especial aquí: creamos nuestra div e inmediatamente después de poner una segunda div para acoger una cabecera donde se coloca un menú con un único botón, el botón de atrás, que nos permita salir de la vista. A continuación, la envoltura página será el anfitrión de un título de página y la envoltura de contenido. Obviamente, esto es sólo la estructura básica: se puede añadir más botones en la cabecera de vista secundaria.
Así que vamos a añadir alguna otra vista secundaria y algunos contenidos falsos. La sección de vista secundaria de nuestro archivo html será así:
<div id="view_a" class="secondary-view"> <div class="secondary-view-toolbar"> <div class="navbar" data-role="navbar"> <ul class="cfx-menu"> <li class="back-button"><a href="#" class="back"><i class="material-icons">arrow_back</i><br></a></li> </ul> </div> </div> <div class="page-wrapper"> <h4>2 view_a</h4> <div class="content-wrapper"> <p>Some content</p> <p>Some content</p> <p>Some content</p> <p>Some content</p> <p>Some content</p> <p>Some content</p> <p>Some content</p> <p>Some content</p> <p>Some content</p> <p>Some content</p> <p>Some content</p> <p>Some content</p> <p>Some content</p> <p>Some content</p> <p>Some content</p> <p>Some content</p> <p>Some content</p> <p>Some content</p> <p>Some content</p> <p>Some content</p> <p>Some content</p> </div> </div> </div> <div id="view_b" class="secondary-view"> <div class="secondary-view-toolbar"> <div class="navbar" data-role="navbar"> <ul class="cfx-menu"> <li class="back-button"><a href="#" class="back"><i class="material-icons">arrow_back</i><br></a></li> </ul> </div> </div> <div class="page-wrapper"> <h4>2 view_b</h4> <div class="content-wrapper"> <p>Some content</p> <p>Some content</p> <p>Some content</p> <p>Some content</p> <p>Some content</p> <p>Some content</p> <p>Some content</p> <p>Some content</p> <a href="#" class="view_c">view_c</a> </div> </div> </div> <div id="view_c" class="secondary-view"> <div class="secondary-view-toolbar"> <div class="navbar" data-role="navbar"> <ul class="cfx-menu"> <li class="back-button"><a href="#" class="back"><i class="material-icons">arrow_back</i><br></a></li> </ul> </div> </div> <div class="page-wrapper"> <h4>2 view_c</h4> <div class="content-wrapper"> <p>Some content</p> <p>Some content</p> <p>Some content</p> <p>Some content</p> <p>Some content</p> <p>Some content</p> <p>Some content</p> <p>Some content</p> </div> </div> </div>
Ahora tenemos algo con lo que jugar 🙂
los estilos
Para el diseño básico descrito anteriormente, los estilos son muy simples:
.secondary-view{
background: #fff !important;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: auto;
min-height: 100%;
z-index: 4;
display: none;
-webkit-box-shadow: 2px 0px 4px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 2px 0px 4px 0px rgba(50, 50, 50, 0.75);
box-shadow: 2px 0px 4px 0px rgba(50, 50, 50, 0.75) ;
}
.secondary-view-toolbar{
background: #689F38 !important;
width: 100%;
height: 50px;
margin-top: 0;
color: #fff;
}
.page-wrapper{
padding: 30px 10px 0 10px !important;
}
Con el fin de reducir al mínimo nuestras reglas de estilo, tenemos que cambiar un poco lo que hicimos para diseñar nuestra barra superior. En esa parte del artículo que había puesto todas las reglas para el menú de la barra superior bajo la #CFX-topbar menú carné de identidad. Ahora tenemos que utilizar varias de estas reglas, incluso para nuestros puntos de vista secundarias’ encabezados, así que vamos a añadir a nuestra lista #CFX-topbar menú la nueva clase .CFX-menú. Luego, en nuestra hoja de estilo, sustituir a las siguientes reglas:
#cfx-topbar-menu{
list-style: none;
position: relative;
padding: 0;
width: 100%;
}
#cfx-topbar-menu li{
width: 19% !important;
display: inline-block;
text-align: center;
vertical-align: middle;
}
#cfx-topbar-menu li a{
display: block;
background: transparent !important;
text-decoration: none;
margin-top: .3em;
color: white;
}
con las siguientes
.cfx-menu{
list-style: none;
position: relative;
padding: 0;
width: 100%;
}
.cfx-menu li{
width: 19% !important;
display: inline-block;
text-align: center;
vertical-align: middle;
}
.cfx-menu li a{
display: block;
background: transparent !important;
text-decoration: none;
margin-top: .3em;
color: white;
}
Además tenemos que cambiar la regla
#cfx-topbar .material-icons{
font-size: 32px;
}
a
.cfx-menu .material-icons{
font-size: 32px;
}
Finalmente, Vamos a añadir una regla específica al icono de vuelta:
.cfx-menu li.back-button {
text-align: left;
padding-left: 10px;
}
De esta manera, podemos utilizar el CFX-menú clase, incluso para el Es vista secundaria cabeceras sin duplicar las reglas CSS.
Si desea ver el resultado, acaba de comentar la propiedad de presentación en el .secundario-view gobernar con el fin de permitir que sea visible, conectar el teléfono y ejecutar la aplicación. Debería ver algo como esto
el javascript
Finalmente podemos ver algo interesante. código Javascript nos permitirá entrar en una vista secundaria, para salir de ella, para animar la forma en que entramos y salida y utilizar el botón del teléfono duro espalda con espalda navegar a través de vistas secundarias abiertas en secuencia Extinc.
Aquí las funciones para entrar vistas secundarias:
var secondaryViews = [];
var activeView;
function enterSecondaryView(id) {
activeView = id;
var animation = 'slideInLeft';
processSecondaryViewsArrayOnEnter();
$(document).scrollTop(0);
doEnterAction();
$('#' + activeView).css({'display': 'block'}).addClass('animated ' + animation);
setTimeout(function () {
$('#' + activeView).removeClass('animated ' + animation);
if (secondaryViews.length > 1) {
$('#' + secondaryViews[secondaryViews.length - 2]).hide();
}
activeView = '';
}, 1000);
}
function processSecondaryViewsArrayOnEnter() {
if ($.inArray(activeView, secondaryViews) == -1) {
secondaryViews.push(activeView);
}
}
function doEnterAction() {
if (activeView == 'view_a') {
//here your specific stuff
} else if (activeView == 'view_b') {
//here your specific stuff
}
}
Vamos a ver estas funciones, uno por uno.
En primer lugar vamos a crear el secondaryViews formación. Entonces se crea una variable para hacer visible a todos los métodos necesarios el ID de la vista secundaria queremos entrar: vista activa.
los enterSecondaryView() método acepta sólo un parámetro, el id de la vista secundaria queremos entrar a.
Lo primero que hace este método es asignar el valor de su parámetrocarné de identidad a la variablevista activa. A continuación, se crea la variable «animación» y establece su valor a «slideInLeft». Si usted quiere cambiar el estilo de animación, este es un lugar bueno para hacerlo (para ver las opciones disponibles miren que el archivo css / animate.css). También podríamos preparar una función específica para establecer la animación diferente de acuerdo a la vista secundaria específica estamos entrando, pero dejo esto para usted: Aquí vamos a mantener las cosas simples.
Una vez que la animación se establece, el método llama al processSecondaryViewsArrayOnEnter() función: bueno, el nombre es muy largo ridicously, pero está claro lo que hace esta función, No es? Saltar a la implementación del método y verá el código: si la vista secundaria queremos entrar no está ya en la matriz secondaryViews, su ID se añade a la matriz. De esta manera, podemos realizar un seguimiento de los puntos de vista del usuario abre y de su secuencia exacta.
Entonces tenemos la opción de realizar alguna «acción de entrada» (típicamente para cargar algunos datos de una base de datos) con el fin de llenar nuestro punto de vista con un cierto contenido dinámico.
Finalmente, la animación se gestiona de una manera similar a la que hemos utilizado para nuestra menú lateral; también restablezca la variable vista activa a un valor vacío.
A continuación encontrará el código para el proceso inverso que salir de la vista activa actual.
function exitSecondaryView(id, sender) {
activeView = id;
var animation = 'slideOutLeft';
processSecondaryViewsArrayOnLeave();
doLeaveAction();
$('#' + activeView).addClass('animated ' + animation);
setTimeout(function () {
$(document).scrollTop(0);
$('#' + activeView).css('display', 'none').removeClass('animated ' + animation);
activeView = '';
}, 1000);
}
function processSecondaryViewsArrayOnLeave() {
if (secondaryViews.length > 1) {
$('#' + secondaryViews[secondaryViews.length - 2]).show();
}
secondaryViews.pop();
}
function doLeaveAction() {
if (activeView == 'view_a') {
//do stuff
} else if (activeView == 'view_b') {
//do stuff
}
}
Para verlo en acción sólo tenemos que añadir un poco de controlador de eventos en nuestro menú lateral:
$(document).on('click', '.view_a', function (e) {
e.preventDefault();
exitMenu();
enterSecondaryView('view_a');
});
$(document).on('click', '.view_b', function (e) {
e.preventDefault();
exitMenu();
enterSecondaryView('view_b');
});
$(document).on('click', '.view_c', function (e) {
e.preventDefault();
exitMenu();
enterSecondaryView('view_c');
});
Hecho! De esta manera somos capaces de abrir vistas secundarias, tanto desde el menú lateral y desde un enlace que hemos colocado en el view_b. Ejecutar la aplicación y disfrutar!
Deslizar para salir de una vista secundaria
Si queremos que nuestros usuarios sean capaces de salir vistas secundarias simplemente deslizar, sólo tenemos que añadir unas cuantas líneas de código para adjuntar golpe fuerte controlador de eventos en nuestro vistas secundarias:
$(".secondary-view").swipe({
swipeLeft: function () {
var activeView = $(this).attr('id');
exitSecondaryView(activeView);
}
threshold: 200,
excludedElements: "label, button, input, select, textarea, .noSwipe"
});
Fácil, No es?
El botón de retroceso teléfono
El último toque es cambiar ligeramente que el código del método onBackKeyDown() con el fin de ser capaz de utilizar incluso para navegar hacia atrás a través de vistas secundarias abiertas. primero, tenemos que chek si algunos vista secundaria Actualmente se abre: si no, el código para gestionar los puntos de vista de carrusel y la aplicación de salir será ejecutado; de otra manera, Sólo tenemos que obtener la vista secundaria actualmente activo y llamamos al método exitSecondaryView() pasar el parámetro correcto.
var lastTimeBackPress = 0;
var timePeriodToExit = 2000;
function onBackKeyDown(e) {
e.preventDefault();
e.stopPropagation();
if (secondaryViews.length == 0) {
console.log('sv length is 0');
var page = $('.item.active').attr('id');
if (page == 'page1') {
if (new Date().getTime() - lastTimeBackPress < timePeriodToExit) {
navigator.app.exitApp();
} else {
window.plugins.toast.showWithOptions({
message: "Press again to exit.",
duration: "short", // which is 2000 ms. "long" is 4000. Or specify the nr of ms yourself.
position: "bottom",
addPixelsY: -40 // added a negative value to move it up a bit (default 0)
});
lastTimeBackPress = new Date().getTime();
}
} else {
$('.carousel').carousel('prev');
}
}else{
var activeView = secondaryViews[secondaryViews.length - 1];
exitSecondaryView(activeView);
}
}
Eso es todo amigos! Si usted tiene algún comentario, críticas o sugerencias, Voy a estar feliz de saber que.
Aquí se puede descargar el código fuente completo:
A la siguiente 🙂
Parte 1 – Parte 2 – Parte 3 – Parte 4
Hola,
Terminó el tutorial. La UX es brillante. Gracias de nuevo.
Solo una cosa más (Sueno como columbo!): Todo está funcionando excepto por el «botón de retroceso» en las vistas secundarias.
El ancla dentro de la línea de pedido de cada vista no se activa.
Cada artículo de línea tiene class =»botón de retroceso» y el CSS se ve así:
.CFX-menú li.back botón {
texto alineado: izquierda;
padding-left: 10Px;
}
Alguna sugerencia?
Muchas gracias.
Hola,
Encontré dos problemas después de completar la Parte IV de este tutorial.
Uno es una solución simple, en el otro he dejado un espacio en blanco:
NÚMERO 1: No se puede cerrar la aplicación tocando dos veces en la primera vista.
La prueba para «Página 1» en el onBackKeyDown(mi) función, devoluciones «indefinido».
Reparar:
Cambio:
página var = $(".Item.active") ...
a:
página var = $(".Carousel-item.active") …
NÚMERO 2: Arriba a la izquierda «botón de retroceso» en la vista secundaria no funciona.
Para intentar arreglarlo, he reemplazado class =»espalda» con clase =»view_a» en «view_b».
Esto muestra «view_a» pero no hay animación deslizante, y no sé qué sustituir el «espalda» clase para en la primera vista secundaria»view_a».
¿Podría publicar el código corregido??
Este es el último problema que puedo encontrar.. Después de que esto se solucione, el tutorial está funcionalmente completo.
Muchas gracias.
Hola paul. Perdón por una respuesta posterior, pero tengo algún problema aquí en Tenerife: El virus corona está destruyendo mi negocio porque casi todos mis clientes trabajan en turismo, así que tengo algunas dificultades para seguir mi pequeño blog.
De todas formas, Confieso que no entiendo tus problemas. Acabo de instalar Cordova en mi sistema, conecté mi teléfono y escribí «Corrida Córdoba» para que la aplicación de muestra se ejecute en mi Redmi 7… Los botones traseros duros y blandos funcionan como se esperaba, ambos menús laterales se deslizan suavemente, deslizar hacia la izquierda y hacia la derecha funciona bien…. Estoy usando exactamente el código que te envié por correo electrónico. Y lo haré disponible o lo descargaré pronto, lo prometo 🙂
Analicemos el problema que encontró, pero actualmente no puedo replicarlo.. Y créeme, No cambié una coma en el código….