How to load navigation history when using jQuery mobile class library

This article mainly introduces the method of loading navigation history in the development of jQuery mobile. jQuery mobile is a JavaScript library developed by jQuery for mobile devices. Friends in need can refer to it

jQuery.mobile.navigate( url [, data ] )

Change URL and track history. Works for browsers and new API without history

• url: is a required parameter. Type: String

• data: is an optional parameter. Type: Object.

Change the hash fragment twice and then log the history of moving the browser backwards when providing navigation event data

// Starting at http://example.com/
// Alter the URL: http://example.com/ => http://example.com/#foo

$.mobile.navigate( "#foo", { info: "info about the #foo hash" });
 
// Alter the URL: http://example.com/#foo => http://example.com/#bar

$.mobile.navigate( "#bar" );
 
// Bind to the navigate event

$( window ).on( "navigate", function( event, data ) {
 console.log( data.state.info );
 console.log( data.state.direction )
 console.log( data.state.url )
 console.log( data.state.hash )
});


 
// Alter the URL: http://example.com/#bar => http://example.com/#foo

window.history.back();
 
// From the `navigate` binding on the window, console output:
// => "info about the #foo hash"
// => "back"
// => "http://example.com/#bar
// => "#bar"

Hijack a link, click to use the navigation method, and then load the content

// Starting at http://example.com/
// Define a click binding for all anchors in the page

$( "a" ).on( "click", function( event ) {
 
 // Prevent the usual navigation behavior

 event.preventDefault();
 
 // Alter the url according to the anchor's href attribute, and
 // store the data-foo attribute information with the url
 $.mobile.navigate( this.attr( "href" ), { foo: this.attr( "data-foo" ) });
 
 // Hypothetical content alteration based on the url. E.g, make
 // an ajax request for JSON data and render a template into the page.

 alterContent( this.attr( "href" ) );
});

The above is the entire content of this article. I hope it will be helpful to everyone's learning. For more related content, please pay attention to PHP Chinese net!

Related recommendations:

Jquery method of obtaining url parameters and url adding parameters

Jquery ajax technology achieves an interval of N seconds Pass the value

to a page

The above is the detailed content of How to load navigation history when using jQuery mobile class library. For more information, please follow other related articles on the PHP Chinese website!