Il metodo di jQuery Mobile change page serve per cambiare pagina, la cosa è banale se non fosse per il meccanismo ajax che governa il passaggio.
Prepariamo dunque la nostra solita pagina e invece di incorporare il link nell’html lo gestiamo da programmazione.
<!DOCTYPE html> <html> <head> <title>Change Page</title> <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"> <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> <script> ... </script> </head> <body> <div data-role="page"> <div data-role="header"><h1>Change page</h1></div> <div data-role="content"><a href="#" id="change" data-role="button">Change Page</a></div> </div> </body> </html>
Il binding dell’evento per gestire tutto da programmazione lo facciamo con javascript:
$(document).ready(function() {
$(‘#change’).on(‘click’, function(event) {
$.mobile.changePage(’43b-change-page.html’,{transition: ‘fade’});
});
});
usiamo il metodo on che è quello da preferire.
Per visualizzare il meccanismo ajax la pagina di destinazione conterrà solo l’html senza i link alle librerie:
<!DOCTYPE html> <html> <head> <title>Linked Page</title> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Linked File</h1> </div> <div data-role="content"> <p><a href="43-change-page.html">Link to an original file</a></p> </div> </div> </body> </html>
Tramite l’esempio si può vedere come venga applicato il parsing di jquery mobile e di conseguenza come ci sia un’iniezione di contenuti via ajax.
Sorry, the comment form is closed at this time.