Come aggiungere il pulsante casa utilizzando jquery-mobile?

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

Domanda

Per jquery-mobile di default aggiunge un pulsante indietro su ogni pagina dopo pagina principale. Vorrei sapere come posso aggiungere anche il tasto home?
Ecco un esempio: http://jquerymobile.com/demos/1.0a1/#experiments /api-viewer/index.html

Nota: Questo collegamento è buono solo per firefox / chrome

Grazie.

È stato utile?

Soluzione

senza modificare il codice sorgente jquery-mobile.js, l'unico modo che posso pensare di farlo, è quello di aggiungere i propri link di navigazione per l'intestazione. Una volta aggiunto il tuo link, il pulsante automatico 'Indietro' scomparirà, quindi dovremo creare 2 collegamenti, uno per la parte posteriore, e uno per la casa.

Si noterà pagina 2 e 3 hanno entrambi i pulsanti e un pulsante di ritorno a casa e si può andare indietro o saltare direttamente a casa. Ciò richiede di modificare la sezione 'intestazione' per ogni pagina, ma non è così grande di un problema dato la sua sempre lo stesso (copia e incolla) nessuna modifica necessaria per ogni istanza.

Il link 'casa' sarà in alto a destra (come per il comportamento predefinito di un secondo collegamento a metterlo in alto a destra).

Ecco l'esempio: 

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

Se si voleva fargli fare in modo automatico, si potrebbe anche solo hack il js ...

Subito dopo questo pezzo di codice (intorno alla linea 1084 delle jquery.mobile-1.0a2.js non minified) 

$( "<a href='#' class='ui-btn-left' data-icon='arrow-l'>"+ o.backBtnText +"</a>" )
                                                .click(function() {
                                                        history.back();
                                                        return false;
                                                })
                                                .prependTo( $this );

Aggiungi una linea come questa, in cui #firstpage è l'ID della home page, non riuscivo a trovare un modo per fare riferimento alla home page senza chiamare per nome, sentitevi liberi di migliorare .. Non volevo fare / o semplicemente # non funziona ... ma questo metodo funziona 

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

Altri suggerimenti

Non c'è una soluzione più semplice: basta aggiungere un link al tuo div intestazione con class="ui-btn-right". Questo è così essenziale che il pulsante Indietro jQuery Mobile può essere aggiunta automaticamente a sinistra. C'è anche un pochi altri * dati- attributi che è possibile utilizzare in modo da poter utilizzare il built-in tema di icone, ecc, come mostrato: 

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

(Ovviamente modificare l'URL di casa href per qualcosa di sensato per il proprio ambiente, non basta usare "/" perché limita in cui la vostra applicazione può essere implementata.)

Al primo utilizzo jQm per sviluppare un'applicazione, ho voluto entrambi i pulsanti a casa e tornare sulla intestazione in alto perché l'albero di navigazione è profondo. Utilizzando le classi dei pulsanti di base come ad esempio "ui-BTN-destra" o "ui-BTN-sinistra" lavoro great-- se desideri solo un pulsante su ogni lato.

Ma se siete come me e vogliono due pulsanti a sinistra, è possibile utilizzare un po 'di CSS personalizzato e il posizionamento per arrivare dove vuoi. Ho anche avvolto i pulsanti in una classe personalizzata-header, così come l'uso di CSS per controllare il titolo nell'intestazione. Sarà necessario il luogo ogni pulsante su un diverso z-index, altrimenti ogni pulsante sarà in conflitto con l'altro.

Questa è l'intestazione:

    

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

Questo è il 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;
}

Spero che questo vi dà più opzioni. 

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

Si potrebbe utilizzare rel=external in voi href tag. Si aprirà la home page senza un pulsante indietro.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top