jQuery Plugin For Ajaxifying Your Website - Ajaxify

jQuery Plugin For Ajaxifying Your Website - Ajaxify
File Size: 23.3 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Ajaxify is a jQuery Ajax plugin which has the ability to ajaxify the whole website, by dynamically replacing any elements (e.g. header, sidebar, footer, etc) with Ajax contents across pages.

Basic usage:

1. Include the main JavaScript file ajaxify.min.js after loading jQuery JavaScript library.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="ajaxify.min.js"></script>

2. Ajaxify your web site. This will dynamically replace the divs with the ID #content and #navacross pages.

jQuery('#content, #nav').ajaxify();

3. Default options to config the plugin.

{

  // Selector for elements to ajaxify - without being swapped - e.g. a selection of links
  selector : "a:not(.no-ajaxy)",  

  // Default main content is last element of selection, specify a value like "#content" to override
  maincontent : false, 

  // jQuery selection for ajaxifying forms - set to "false" to disable
  forms : "form:not(.no-ajaxy)", 

  // Fetch current URL from "canonical" link if given, updating the History API.  In case of a re-direct...
  canonical : true, 

  // Refresh the page if clicked link target current page
  refresh : false, 

  // in msec - Delay of Pronto request
  requestDelay : 0, 

  // in msec - must be set for animations to work
  aniTime : 0,

  // Animation parameters - see below.  Default = off
  aniParams : false, 

  // Plugin previews prefetched pages - set to "false" to enable or provide a jQuery selection to selectively disable
  previewoff : true, 

  // Smart scroll, true = always scroll to top of page, false = no scroll
  scrolltop : "s", 

  // Copy body classes from target page, set to "true" to enable
  bodyClasses : false, 

  // in msec - master switch for slideshow / carousel - default "off"
  idleTime: 0, 

  // in msec - time between slides
  slideTime: 0, 

  // For toggling sliding - see below.  Default = off
  toggleSlide: false 

  // Selector for links in the menu
  menu: false, 

  // Class that gets added dynamically to the highlighted element in the slideshow
  addclass: "jqhover", 

  // true = deltas loaded, false = all scripts loaded
  deltas : true, 

  // default async value for dynamically inserted external scripts, false = synchronous / true = asynchronous
  asyncdef : false 

  // true = all inline scripts loaded, false = only specific inline scripts are loaded
  inline : true, 

  // strings - separated by ", " - if matched in any inline scripts - only these are executed - set "inline" to false beforehand
  inlinehints : false, 

  // strings - separated by ", " - if matched in any inline scripts - these are NOT are executed - set "inline" to true beforehand 
  inlineskip : "adsbygoogle", 

  // append scripts to the main content div, instead of "eval"-ing them
  inlineappend : true, 

  // true = all style tags in the head loaded, false = style tags on target page ignored
  style : true, 

  // Plugin pre-fetches pages on hoverIntent
  prefetch : true, 

  // Debugging level to console: default off.  Can be set to 10 and higher (in case of logging enabled) 
  verbosity : 0,  

  // strings - separated by ", " - if matched in any URLs - only these are NOT executed - set to "true" to disable memory completely
  memoryoff : false, 

  // callback handler on completion of each Ajax request
  cb : null, 

  // Plugin set "on" or "off" (==false) manually
  pluginon : true 
  
}

4. Animation parameters (aniParams):

{

  // no fade, set to 0 for maximum fade
  opacity: 1, 

  // in percent -  "100%" means no change
  width: "100%", 

  // in percent -  "100%" means no change
  height: "100%" 
  
}

5. Toggling sliding parameters (toggleSlide):

{ 

  // parent element, where the above images will be prepended 
  parentEl: '#content', 

  // graphic for indicating sliding is on
  imgOn: 'http://4nf.org/images/pinOn.gif', 

  // graphic for indicating sliding is off
  imgOff: 'http://4nf.org/images/pinOff.gif', 

  // title tag when on
  titleOn: 'Turn slideshow off', 

  // title tag when off
  titleOff: 'Turn slideshow on', 

  // image props
  imgProps: { marginLeft: '85%', marginTop: '20px' }

}

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