El propósito de este artículo es proporcionar componentes de interfaz de usuario interactivos para un diseño móvil mediante el uso del complemento de interfaz de usuario de la aplicación . Aquí analizaremos varios tipos de vistas de navegación para páginas web.
El complemento ayuda a los desarrolladores móviles a crear aplicaciones usando HTML, CSS y JavaScript.
Descargue el archivo precompilado requerido del enlace y guárdelo en su carpeta de trabajo para su implementación. Tenga cuidado con las rutas de archivo adecuadas mientras las incluye en sus códigos fuente.
Ejemplo básico: lo siguiente demuestra la estructura básica de la página web HTML para el navegador de vista de página utilizando el complemento de la interfaz de usuario de la aplicación .
HTML
<!DOCTYPE html>
<html>
<head>
<meta
name="viewport"
content="width=device-width, initial-scale=1,
maximum-scale=1, user-scalable=no"/>
<script src="src/libs/jquery-1.7.1.js"></script>
<script src=
"src/libs/jquery.animate-enhanced.js">
</script>
<!-- library files for view navigator -->
<link rel="stylesheet"
href="src/viewnavigator/viewnavigator.css"
type="text/css" />
<script src=
"src/viewnavigator/viewnavigator.js">
</script>
<script>
$(document).ready( function() {
// Setup the default view
var defaultView = getView();
defaultView.backLabel = null;
// Setup the ViewNavigator
window.viewNavigator = new ViewNavigator('body');
window.viewNavigator.pushView( defaultView );
});
function pushView() {
// Create a view and push it onto
// the view navigator
var view = getView();
window.viewNavigator.pushView( view );
}
function popView() {
// pop a view from the view navigator
window.viewNavigator.popView();
}
function getView()
{
// Create a view descriptor with random content
var bodyView = $('<h3>Basic navigator using app-UI plugin</h3>'
+ '<div>' + '<hr><li href="#" onclick="pushView()"
class="viewNavigator_backButton">
push view</li> <li href="#" onclick="popView()"
class="viewNavigator_backButton">pop view</li><hr>'
+ getPageContent() + '</div>');
var links = bodyView.find('a');
return { title: "Default View "
+ parseInt(Math.random()*1000),
backLabel: "Back",
view: bodyView
};
}
function getPageContent() {
var result = "";
for ( var i = 0; i < 8; i ++ )
{
result +=
"Python is a high-level, general-purpose
and a very popular programming language.
Python programming language (latest Python3)
is being used in web development,
Machine Learning applications, along with
all cutting edge technology in the Software
Industry.Python Programming Language
is very well suited for Beginners,
also for experienced programmers with other
programming languages like C++ and Java.
<hr>"
}
return result;
}
</script>
</head>
</html>
Producción:
Ejemplo 2: el código siguiente muestra varias instancias del navegador de vista de página. Consulte la salida para una mejor comprensión.
html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"
content="width=device-width, initial-scale=1,
maximum-scale=1, user-scalable=no">
<script src="src/libs/jquery-1.7.1.js"></script>
<script src="src/libs/jquery.animate-enhanced.js">
</script>
<link rel="stylesheet"
href="src/viewnavigator/viewnavigator.css"
type="text/css" />
<script src="src/viewnavigator/viewnavigator.js">
</script>
<style>
#leftDiv {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
width: 50%;
overflow: hidden;
}
#rightDiv {
position: absolute;
top: 0px;
bottom: 0px;
left: 50%;
right: 0px;
width: 50%;
border-left: 1px solid red;
overflow: hidden;
}
</style>
<script>
$(document).ready( function() {
// Setup the default views
var leftView = getView( "left" );
leftView.backLabel = null;
var rightView = getView( "right" );
rightView.backLabel = null;
// Setup the ViewNavigator
window.leftViewNavigator =
new ViewNavigator( '#leftDiv' );
window.leftViewNavigator.pushView(leftView);
window.rightViewNavigator =
new ViewNavigator( '#rightDiv' );
window.rightViewNavigator.pushView(rightView);
} );
function leftPushView() {
// Create a view and push it onto
// the view navigator
var view = getView("left");
window.leftViewNavigator.pushView( view );
}
function leftPopView() {
// Pop a view from the view navigator
window.leftViewNavigator.popView();
}
function rightPushView() {
// Create a view and push it onto
// the view navigator
var view = getView("right");
window.rightViewNavigator.pushView( view );
}
function rightPopView() {
// Pop a view from the view navigator
window.rightViewNavigator.popView();
}
function getView( side ) {
// Create a view descriptor with random content
var bodyView =
$('<h3>Multiple instance of page view</h3>'
+ '<div>' + '<hr><li href="#"
onclick="'+side+'PushView()"
class="viewNavigator_backButton">push view</li>
<li href="#" onclick="'+side+'PopView()"
class="viewNavigator_backButton">pop view</li><hr>'
+ getPageContent() + '</div>');
var links = bodyView.find('a');
return { title: side + "Page View " +
parseInt(Math.random()*1000),
backLabel: "Back",
view: bodyView
};
}
function getPageContent()
{
var result = "";
for ( var i = 0; i < 8; i ++ )
{
result +=
"Python is a high-level, general-purpose
and a very popular programming language.
Python programming language (latest Python3)
is being used in web development,
Machine Learning applications, along with
all cutting edge technology in the Software
Industry.Python Programming Language
is very well suited for Beginners,
also for experienced programmers with other
programming languages like C++ and Java.
<hr>"
}
return result;
}
</script>
</head>
<body>
<div id="leftDiv"></div>
<div id="rightDiv"></div>
</body>
</html>
Producción:
Ejemplo 3: el siguiente ejemplo muestra la vista de navegación dividida para cualquier página web que use el complemento de la interfaz de usuario de la aplicación .
html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"
content="width=device-width, initial-scale=1,
maximum-scale=1, user-scalable=no">
<script src="src/libs/jquery-1.7.1.js"></script>
<script src="src/libs/jquery.animate-enhanced.js">
</script>
<script src="src/libs/iscroll.js"></script>
<script src="src/libs/noClickDelay.js"></script>
/* Pre-compiled files for split navigations */
<link rel="stylesheet"
href="src/splitviewnavigator/splitviewnavigator.css"
type="text/css" />
<script src="src/splitviewnavigator/splitviewnavigator.js">
</script>
/* Pre-compiled files for default navigations */
<link rel="stylesheet"
href="src/viewnavigator/viewnavigator.css"
type="text/css" />
<script src="src/viewnavigator/viewnavigator.js">
</script>
<style>
li {
margin-bottom: 10px;
}
</style>
<script>
$(document).ready( function() {
var sidebarViewDescriptor = getSidebarView();
sidebarViewDescriptor.backLabel = null;
var bodyViewDescriptor = getBodyView();
bodyViewDescriptor.backLabel = null;
// Setup the ViewNavigator
new SplitViewNavigator( 'body', {
toggleButtonLabel: 'Menu'
});
window.splitViewNavigator.pushSidebarView
(sidebarViewDescriptor);
window.splitViewNavigator.pushBodyView
(bodyViewDescriptor);
});
function getSidebarView() {
var viewHTML = "<ul>" +
"<li onclick='pushSidebarView()'
class='viewNavigator_backButton'>
Push Sidebar View</li>" +
"<li onclick=
'window.splitViewNavigator.popSidebarView()'
class='viewNavigator_backButton'>
Pop Sidebar View</li>" +
"<li onclick='pushBodyView()'
class='viewNavigator_backButton'>
Push Body View</li>" +
"<li onclick='window.splitViewNavigator.popBodyView()'
class='viewNavigator_backButton'>
Pop Body View</li>" +
"</ul>";
return {
title: "Sidebar " +
parseInt( Math.random() * 100 ).toString(),
backLabel: "Back",
view: $(viewHTML)
};
}
function getBodyView() {
var viewHTML =
"<h3>Split view for sidebars and page content</h3>
<div>"
+getPageContent() +
"</div>";
return {
title: "My Page Content " +
parseInt( Math.random() * 100 ).toString(),
backLabel: "Back",
view: $(viewHTML)
};
}
function pushSidebarView()
{
window.splitViewNavigator.
pushSidebarView(getSidebarView());
}
function pushBodyView()
{
window.splitViewNavigator.
pushBodyView(getBodyView());
window.splitViewNavigator.hideSidebar();
}
function getPageContent() {
var result = "";
for ( var i = 0; i < 8; i ++ )
{
result +=
"Python is a high-level, general-purpose
and a very popular programming language.
Python programming language (latest Python3)
is being used in web development,
Machine Learning applications, along with
all cutting edge technology in the Software
Industry.Python Programming Language
is very well suited for Beginners,
also for experienced programmers with other
programming languages like C++ and Java.
<hr>"
}
return result;
}
</script>
</head>
<body></body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por geetanjali16 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA