Per impostazione predefinita jquery-mobile aggiunge un pulsante indietro in ogni pagina dopo la pagina principale. Vorrei sapere come posso aggiungere anche il pulsante Home?
Ecco un esempio: http://jquerymobile.com/demos/1.0a1/#experiments/api-viewer/index.htmlCome aggiungere il pulsante Home utilizzando jquery-mobile?
Nota: Questo collegamento è buono solo per firefox/chrome
Grazie.
Senza modificare il codice sorgente jquery-mobile.js, l'unico modo in cui posso pensare di farlo è aggiungere i propri collegamenti di navigazione all'intestazione. Una volta aggiunto il tuo link, il pulsante "Indietro" automatico scomparirà, quindi creeremo 2 collegamenti, uno per il retro e uno per la casa.
Noterai che le pagine 2 e 3 hanno entrambi i pulsanti sul retro e un pulsante di casa e puoi tornare indietro o saltare direttamente a casa. Ciò richiede che tu modifichi la sezione 'header' per ogni pagina, ma non è un grosso problema dato che è sempre lo stesso (copia e incolla) nessuna modifica necessaria per istanza.
Il collegamento "home" si trova in alto a destra (come per il comportamento predefinito di un secondo collegamento per inserirlo 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 i js ...
Subito dopo questo pezzo di codice (intorno alla linea 1084 del non minified 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);
Aggiungi una linea come questa, in cui #firstp l'età è l'id della tua home page, non ho trovato il modo di fare riferimento alla home page senza chiamarla per nome, sentiti libero di migliorare .. Non volevo fare/o semplicemente # non funzionava .. ., ma questo metodo funziona
$("<a href='#firstpage' class='ui tn-right'>Home</a>").appendTo($this);
Grazie mille, questo è quello che stavo cercando. –
C'è una soluzione più semplice: basta aggiungere un link al tuo div intestazione con class="ui-btn-right". Questo è essenziale in modo che il pulsante back di jQuery Mobile possa essere automaticamente aggiunto a sinistra. C'è anche un paio di altri dati- * attributi che è possibile utilizzare in modo da poter utilizzare il tema di icone built-in, 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 l'ambiente, don 't basta usare "/" perché limita in cui la vostra applicazione può essere implementata.)
se si imposta 'href' sullo stesso url dell'URL di casa, funziona perfettamente –
<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 usare rel=external in voi href tag. Questo aprirà la homepage senza un pulsante Indietro.
Quando per la prima volta si utilizzava jqm per sviluppare un'applicazione, volevo sia i pulsanti home e back sull'intestazione superiore perché l'albero di navigazione è profondo. Utilizzare le classi del pulsante principale come "ui-btn-right" o "ui-btn-left" funziona alla grande-- SE vuoi solo un pulsante su ciascun lato.
Ma se sei come me e vuoi due pulsanti a sinistra, puoi usare un piccolo CSS personalizzato e posizionarlo per ottenerlo dove vuoi. Ho anche avvolto i pulsanti in una classe di intestazione personalizzata, oltre a utilizzare i CSS per controllare il titolo nell'intestazione. Avrai bisogno di posizionare ciascun pulsante su un diverso z-index, altrimenti ogni pulsante entrerà 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.
il collegamento punta a 1.0alpha1. Solo perché tu sappia - l'ultima versione è alpha3 e se usi qualche riferimento o tutorial - quelli per alpha1 sono incompatibili. – naugtur