Cómo agregar el botón de inicio usando jquery-mobile?

StackOverflow https://stackoverflow.com/questions/4147376

Pregunta

Por jquery-mobile por defecto añade un botón de retroceso en cada página tras página principal. Me gustaría saber cómo puedo agregar el botón de inicio también?
He aquí un ejemplo: http://jquerymobile.com/demos/1.0a1/#experiments /api-viewer/index.html

Nota: Este enlace sólo es bueno para Firefox / Chrome

Gracias.

¿Fue útil?

Solución

Sin modificar el código fuente jQuery-mobile.js, la única manera que puedo pensar para hacerlo, es añadir sus propios enlaces de navegación para la cabecera. Una vez que añadir su propio enlace, el botón automático 'Volver' va a desaparecer, por lo que vamos a crear 2 enlaces, uno para atrás, y uno para la casa.

Se dará cuenta de la página 2 y 3 ambos tienen botones y un botón de vuelta a casa y que tampoco puede regresar o ir directamente a casa. Esto requiere que se modifique la sección 'cabecera' para cada página, pero no es tan grande de un acuerdo ya que su siempre la misma (copiar y pegar) ninguna modificación necesaria por ejemplo.

El enlace de 'casa' estará en la parte superior derecha (según el comportamiento predeterminado de un segundo enlace que ponerlo arriba a la 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 usted quiere que sea lo haga automáticamente, usted podría también acaba de cortar el js ...

Justo después de esta pieza de código (alrededor de la línea 1084 de los no jquery.mobile-1.0a2.js minified) 

$( "<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 #firstpage es el ID de la página principal, no pude encontrar una manera de hacer referencia a la página principal sin llamarlo por su nombre, siento libre para mejorar .. Yo no quiero hacer / o simplemente no funcionará # ... pero este método funciona 

$( "<a href='#firstpage' class='ui tn-right'>Home</a>" ).appendTo( $this );

Otros consejos

No es 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 tan esencial que el botón de retroceso jQuery Mobile se puede agregar automáticamente a la izquierda. Hay también atribuye algunos otros * Data- que se puede utilizar para que pueda utilizar la incorporada en el tema de iconos, 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 dirección URL a casa a href algo sensato para su entorno, no sólo tiene que utilizar "/" porque limita en su aplicación puede ser desplegado.)

Cuando utilice por primera JQM para desarrollar una aplicación, quería ambos botones de inicio y volver a la parte superior de cabecera porque el árbol de navegación es profunda. El uso de las clases de botón central, tales como "ui-BTN-derecha" o "ui-BTN-izquierda" trabajo great-- Si sólo desea un botón en cada lado.

Pero si usted es como yo y quieres dos botones de la izquierda, se puede usar un poco de CSS personalizado y posicionando para conseguir el lugar que desee. También me envolví los botones en una clase personalizada-cabecera, así como el uso de CSS para controlar el título en la cabecera. Necesitará el lugar cada botón en un diferente índice z, de lo contrario cada botón estará 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;
}

Espero que esto le da más opciones. 

<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>

Se podría utilizar rel=external en que href etiqueta. Esto abrirá la página de inicio sin un botón de retroceso.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top