ajax page parser - Free Download Asynchronous Page Loading Plugin In jQuery - AjaxPageParser

Free Download Asynchronous Page Loading Plugin In jQuery – AjaxPageParser

Posted on

This time I will share jQuery Plugin and tutorial about Asynchronous Page Loading Plugin In jQuery – AjaxPageParser, hope it will help you in programming stack.

ajax page parser - Free Download Asynchronous Page Loading Plugin In jQuery - AjaxPageParser
File Size: 12.5 KB
Views Total: 1090
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

AjaxPageParser is a jQuery plugin to ajaxify your website that asynchronously loads web pages (or a part of your web page) via AJAX just like a native mobile app.

The plugin displays a loading spinner while loading content from external pages and updates the title & page URL (OPTIONAL) when the page is completely loaded into the current page.

Also provides an error callback which will be fired when the page fails to load.

How to use it:

1. Download & unzip the plugin and include the latest version of the AjaxPageParser on your web pages.

1 <script src="/path/to/jquery.min.js"></script>
2 <script src="/path/to/jquery.pageparser.min.js"></script>

2. Create a page loading spinner on the webpages.

1 <div class="loader">
2   <span><img src="img/loader.gif" alt="" /></span>
3 </div>

3. Create a navigation menu pointing to the pages within your website.

1 <div class="menu">
2   <a href="/demo/AjaxPageParser/index.html" class="active">Index page</a>
3   <a href="/demo/AjaxPageParser/pages/second.html">Second page</a>
4   <a href="/demo/AjaxPageParser/pages/third.html">Third page</a>
5 </div>

4. Initialize the plugin on the menu items and specify the the container in which the data will display.

1 <div id="container">
2   ...
3 </div>
1 $(".menu a").pageParser({
2   container: $('#container')
3 });

5. More configuration options.

01 $(".menu a").pageParser({
02  
03   // if false, the plugin doesn't update the URL to match the loaded page
04   dynamicUrl: true,
05  
06   // the active element from which the page loaded from on initial load
07   initialElement: null,
08  
09   // if empty it loads the whole page
10   parseElement: null,
11  
12   // sets the title of the page
13   setTitle: true,
14  
15   // custom trigger event
16   trigger: 'click',
17  
18   // default attribute that holds the URL
19   urlAttribute: 'href',
20  
21   // loading delay
22   loadDelay: null
23    
24 });

6. Event handlers.

01 $(".menu a").pageParser({
02  
03   before: function(){
04     // fired before loading
05     // 'this' returns the clicked button
06   },
07  
08   //
09   finished: function(){
10     // fired after loading
11     // 'this' returns the clicked button
12   },
13  
14   error: function(){
15     // fired on error
16     // returns the xhr status.
17   },
18  
19 });

This awesome jQuery plugin is developed by terwanerik. For more Advanced Usages, please check the demo page or visit the official website.

source : jquery.net