Come sovrascrivere ajax = false, quindi passa alla pagina dom caricata se esiste

Ho alcuni elementi HTML, ognuno dei quali contiene una singola pagina JQM. Ho anche una pagina indice. Si tratta di un html con più pagine JQM, con ogni pagina JQM come categoria che elenca gli articoli.Come sovrascrivere ajax = false, quindi passa alla pagina dom caricata se esiste

index.html     item1.html   item2.html 
    +------------------+  +--------+--------+ +-------- 
    |+-------+   |  +--|Cat. | Next|->|Cat. 
    ||.cont- |   |  | +--------+--------+ |-------- 
    ||ent |+-------+|<----+ |     | | 
    |+-------+|#cat1 ||  |     | | 
    |   |  ||  |bla bla bla  | |bla bla 
    |   |link1+---------->|     | | 
    |   |link2 ||  |     | | 
    |   +-------+|  +-----------------+ +-------- 
    |+-------++-------+| 
    ||#cat2 ||#cat3 || 
    ||  ||  || 
    ||link4 ||link3 || 
    ||  ||  || 
    |+-------++-------+| 
    +------------------+

Attualmente posso collegare dall'indice all'elemento, con caricamento regolare dell'ajax. Tuttavia mi sono reso conto che se voglio ricollegarmi dall'articolo all'indice # cat1, ho bisogno di usare data-ajax='false' come indice è un html multipagina. (Non posso usare data-rel='back' perché la pagina precedente non è sempre index.html).

Se utilizzo ajax='false', perdo la transizione senza problemi se si passa da un elenco a un altro di elementi (ogni passaggio alla lista è un ricaricamento completo). ad esempio:

-full-load-> N ° cat1 -ajax-load-> item2 -full-carico (di nuovo) -> N ° cat1

Domanda

che voglio:

-full-load-> N ° cat1 -ajax-load-> item2 -ajax-switch-to-già-loaded-> N ° cat1

Come posso ignorare la logica jQuery Mobile in modo che quando il collegamento data-ajax='false' viene cliccato, si cerca prima di vedere se quella pagina di indice # cat1 è già nella dom? Se lo è, passa alla pagina JQM. Se non esiste, eseguire un caricamento completo dell'indice # cat1 senza ajax (come il comportamento predefinito).

Ricorda che un utente può iniziare da item1.html e navigare a index.html # cat1.

So che avrei bisogno di contrassegnare ogni pagina JQM con alcuni attributi personalizzati, come data-full-url="index.html#cat1" per rendere più facile la ricerca di pagine esistenti. Tuttavia, la mia principale debolezza è il modo in cui posso modificare la logica di collegamento esistente di Jquery Mobile.

fonte

2012-06-27 lulalala

+1 per la bella disegno :) –

non può farlo senza http://www.asciiflow.com/ – lulalala

Perché non basta separare ogni pseudo-page in diversi documenti HTML? Cosa stai guadagnando creando questa logica complessa? Se si tratta di tempo di caricamento percepito, suggerisco di utilizzare documenti separati e utilizzare l'attributo 'data-prefetch' per evitare il ritardo di navigazione indesiderato. – Jasper

Ho creato la tua situazione nei seguenti violini.

Pagina 1) Indice: http://jsfiddle.net/nachiket/RpZW7/
pagina 2) voce di dettaglio: http://jsfiddle.net/nachiket/cHmhW/ (questo è già collegato in pagina di indice violino)

Non ho usato dati-ajax = 'false', vuol risolvere il tuo problema? In caso contrario, aggiorna questi violini alla tua situazione esatta, quindi può aiutare meglio.

fonte

2012-06-27 05:40:05 Nachiket

grazie. Quindi il mio problema è che se il mio utente inizia dalla pagina dell'articolo, voglio consentirgli di collegarsi all'indice # cat1. La mia versione attuale è http://jsfiddle.net/lulalala/nuL6h/2/ – lulalala

beh, non penso, sarà facile raggiungere la transizione senza Ajax. Quello che faccio è che tengo solo l'app per una sola pagina, e navighi attraverso ajax e mantieni la cronologia/aggiornamento usando le modifiche dell'hash. quindi, se è più semplice caricare item1 e item2 usando solo Ajax. puoi ancora richiedere il server per caricare il contenuto di item1 e item2, ma fornirà solo la parte del corpo, piuttosto che la pagina HTML completa. – Nachiket

l'indice del tempo di abete viene caricato, ovviamente non sarà un carico ajax. Un caso sarebbe: item1 --full-load-> index # cat1 --ajax-load-> item2 --js-switch-> index # cat1 – lulalala

jsfiddle sembra giù, è questo vicino al tuo esempio?

ho messo in un server locale

Per il pulsante Indietro del item1 si può mettere l'URL completo: http://localhost/home.html#cat1, funzionerà anche

home.html:

<!doctype html> 
<html manifest=""> 
<head> 
<meta charset="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1" /> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> 
<link type="text/css"> 

</link> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> 
</head> 

<body> 

<div data-role="page" id="home"> 
    <div data-theme="b" data-role="header" data-position="fixed"> 
     <h3>home</h3> 
    </div> 
    <div data-role="content"> 
     hello home 
     <a href="home.html#cat1" type="button">cat1</a> 
     <a href="home.html#cat2" type="button">cat2</a> 
    </div> 
</div> 

<div data-role="page" id="cat1"> 
    <div data-theme="b" data-role="header" data-position="fixed"> 
     <h3>cat1</h3> 
    </div> 
    <div data-role="content"> 
     hello cat1 
     <a href="#home" type="button">home</a> 
     <a href="item1.html" type="button">see item1</a> 
    </div> 
</div> 

<div data-role="page" id="cat2"> 
    <div data-theme="b" data-role="header" data-position="fixed"> 
     <h3>"cat2</h3> 
    </div> 
    <div data-role="content"> 
     hello cat2 
     <a href="#home" type="button">home</a> 
    </div> 
</div> 

    </body> 
</html>

item1.html

<!doctype html> 
<html manifest=""> 
<head> 
<meta charset="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1" /> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> 
<link type="text/css"> 

</link> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> 
</head> 

<body> 

<div data-role="page" id="item1Home"> 
    <div data-theme="b" data-role="header" data-position="fixed"> 
     <h3>item1's home</h3> 
    </div> 
    <div data-role="content"> 
     hello item1 
     <a href="home.html#cat1" type="button" rel="external">back?</a> 
    </div> 
</div> 


    </body> 
</html>

fonte

2012-06-29 11:16:27

sì questa è la mia soluzione attuale, ma quello che voglio è di evitare di ricaricare l'intero home.html se è stato caricato in precedenza – lulalala

il browser userà la sua cache, più facilmente se si mantiene la navigazione ajax –

anche con la cache è notevolmente lento, come la mia pagina indice è abbastanza grande . E provare ad avere una navigazione Ajax è il problema che voglio risolvere, non qualcosa che cerco di evitare. – lulalala

Come sovrascrivere ajax = false, quindi passa alla pagina dom caricata se esiste

risposta

Problemi correlati