De manera predeterminada, jquery-mobile agrega un botón Atrás en cada página después de la página principal. Deseo saber cómo puedo agregar el botón de inicio también?
Aquí se muestra un ejemplo: http://jquerymobile.com/demos/1.0a1/#experiments/api-viewer/index.htmlCómo agregar el botón de inicio con jquery-mobile?
Nota: Este enlace sólo es bueno para Firefox/Chrome
Gracias.
Sin modificar el código fuente de jquery-mobile.js, la única forma en que puedo pensar es agregar sus propios enlaces de navegación al encabezado. Una vez que agregue su propio enlace, el botón automático "Atrás" desaparecerá, por lo que crearemos 2 enlaces, uno para el reverso y el otro para el hogar.
Notarás que las páginas 2 y 3 tienen botones para volver y un botón de inicio, y puedes retroceder o saltar directamente a casa. Esto requiere que modifiques la sección 'encabezado' para cada página, pero no es una gran cosa ya que siempre es la misma (copiar y pegar) no se necesita ninguna modificación por instancia.
El enlace 'Inicio' estará en la parte superior derecha (según el comportamiento predeterminado de un segundo enlace, colóquelo en la parte superior derecha).
Aquí está el ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
</head>
<body>
<div data-role="page" id="firstpage">
<div data-role="header">
<h1>First Page</h1>
</div>
<div data-role="content">
<p>I'm first in the source order so I'm shown as the page.</p>
<p>View internal page called <a href="#secondpage">second page</a></p>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
<div data-role="page" id="secondpage">
<div data-role="header">
<a href='#' class='ui-btn-left' data-icon='arrow-l' onclick="history.back(); return false">Back</a><h1>Bar</h1><a href="#firstpage">home</a>
</div>
<div data-role="content">
<p>I'm first in the source order so I'm shown as the page. (this is secondpage)</p>
<p><a href="#thirdpage">Go to third page</a></p>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
<div data-role="page" id="thirdpage">
<div data-role="header">
<a href='#' class='ui-btn-left' data-icon='arrow-l' onclick="history.back(); return false">Back</a><h1>Bar</h1><a href="#firstpage">home</a>
</div>
<div data-role="content">
<p>I'm first in the source order so I'm shown as the page. (this is thirdpage)</p>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
</body>
</html>
Si quisiera hacerlo lo haga automáticamente, también se puede simplemente cortar el js ...
Justo después de esta pieza de código (alrededor de la línea 1084 de la no-miniaturizada jquery.mobile 1.0a2.js)
$("<a href='#' class='ui-btn-left' data-icon='arrow-l'>"+ o.backBtnText +"</a>")
.click(function() {
history.back();
return false;
})
.prependTo($this);
añadir una línea como esta, donde #firstp la edad es la identificación de su página de inicio, no pude encontrar una manera de hacer referencia a la página de inicio sin llamarla por su nombre, no dude en mejorar ... No quise hacer/o simplemente # no funcionará ... ., pero este método funciona
$("<a href='#firstpage' class='ui tn-right'>Home</a>").appendTo($this);
Gracias montones, esto es lo que estaba buscando. –
Hay una solución más simple: sólo tiene que añadir un enlace a su div cabecera con class="ui-btn-right". Esto es esencial para que el botón de atrás de jQuery Mobile se pueda agregar automáticamente a la izquierda. Hay también algunos otros Data- * atributos que se pueden utilizar para que pueda utilizar el tema de iconos incorporados etc, como se muestra:
<div data-role="page">
<div data-role="header">
<h1>Title</h1>
<a href="/" class="ui-btn-right" data-icon="home" data-iconpos="notext"
data-direction="reverse">Home</a>
</div>
<div data-role="content">
...
(Obviamente cambiar la URL de inicio href a algo sensato para su entorno, don 't sólo tiene que utilizar '/' porque limita en su aplicación puede ser desplegado.)
si establece el 'href' en la misma URL que la URL de inicio, funciona perfectamente –
<div data-role="footer" class="ui-bar">
<div data-role="controlgroup" data-type="horizontal">
<a href="Main.html" data-role="button" rel=external><img src="/MobileTest/images/Home.png" /> </a>
<a href="index.html" data-role="button" rel=external><img src="/MobileTest/images/MyShare.png" /></a>
<a href="index.html" data-role="button" rel=external><img src="/MobileTest/images/SharedWithMe.png" /></a>
<a href="index.html" data-role="button" rel=external><img src="/MobileTest/images/settings.png" /></a>
</div>
</div>
usted podría utilizar rel=external en que href etiqueta. Esto abrirá la página de inicio sin un botón de retroceso.
Cuando primero usé jqm para desarrollar una aplicación, quería los botones de inicio y atrás en el encabezado superior porque el árbol de navegación es profundo. El uso de las clases de botón de núcleo como "ui-btn-right" o "ui-btn-left" funciona bien, SI solo quieres un botón en cada lado.
Pero si eres como yo y quieres dos botones a la izquierda, puedes usar un poco de CSS personalizado y posicionamiento para conseguirlo donde quieras. También envolví los botones en una clase de encabezado personalizado, y también uso CSS para controlar el título en el encabezado. Necesitará colocar cada botón en un índice Z diferente, de lo contrario, cada botón entrará en conflicto con el otro.
Este es el encabezado:
<div id="home-btn" class="header-btn-left-pos1">
<a href="config.html" data-role="button" data-icon="home" data-rel="home">Home</a>
</div><!-- /home-btn -->
<div id="back-btn" class="header-btn-left-pos2">
<a href="#" data-role="button" data-icon="back" data-rel="back">Back</a>
</div><!-- /back-btn -->
<div class="header-title" align="center">
<h4>Business Locations</h4>
</div><!-- /header-title -->
</div><!-- /custom header -->
Este es el CSS:
.custom-header
{
height:18px;
}
.header-title
{
position:relative;
top:-10px;
}
.header-btn-left-pos1
{
position:absolute;
left:25px;
top:5px;
z-index:1;
}
.header-btn-left-pos2
{
position:absolute;
left:105px;
top:5px;
z-index:2;
}
Hope esto le da más opciones.
su enlace apunta a 1.0alpha1. Para que lo sepas, la última versión es alpha3 y si usas alguna referencia o tutorial, las de alpha1 son incompatibles. – naugtur