How Ace admin implements a page similar to Freamset loading

As mentioned in the title above, Ace Admin does the background page, can be implemented similar to using Freamset function, but Ace Admin do better than freamset, he can be loaded in the form of asynchronous loading, and load the content of the page can be as little as possible (or load on demand).

This is mainly the use of the Pjax function, the Pjax implementation principle is as follows:

There are several new features in the history API, namely, History.pushstate and history.replacestate, we encapsulate the pushstate+ajax, and simply call it, that is, pjax~ although there is nothing new in the implementation of technology. , but the concept is still different.

The basic idea of Pjax is that the user clicks on a link, updates the part of the page with Ajax, and then uses HTML5 's pushstate to modify the browser's URL address, effectively avoiding the entire page reload. If the browser does not support the history of the two new API or JS is disabled, then this link can only jump and re-refresh the entire page. Unlike traditional Ajax designs, Ajax typically fetches JSON data from the background and then renders it by the front-end parsing, while Pjax requests a HTML fragment that is generated on the server.

Citation to: http://www.cnblogs.com/hustskyking/p/history-api-in-html5.html

Because of the support of Pjax, we can load the page asynchronously, the title of the page, the history of information can be updated, when we refresh the page back to the current page, directly click on the browser Back button can go back to the previous interface.

The topic pulled a little farther back to ace Admin.

or according to the project, I recently received the project, is a statistical project, equivalent to the background management, and each a lot of reality in the browser URL, is this: Http://localhost:8080/analytics/main#bizReport?type =l&functionid=140101, I suddenly a little confused force, url with "#", well, Baidu a bit to know, September 10, Twitter revision. Start by formally using such URLs and then become popular. Please see http://www.cnblogs.com/kaituorensheng/p/3776527.html for details.

Of course use #, also no hit, we write JS, often write back to the top of the time, will use this "#" + a page at the top of the element ID, to achieve positioning jump. But my project is using Springmvc,url restful coding ah, add "#" is a few meaning? And the project can also be normal jump and use, worst of all, I unexpectedly in Baidu did not find detailed so explain the principle of the place, the company's predecessors said they want to think independently (not generally to learn to ask questions?) The person in charge of my project had left before I entered the office, which was tantamount to saying that I could not find the right person to answer the questions.

In Baidu said this page used Pajx,jquery has a plug-in, specifically written PAJX, called Jquery.pjax.js, I think my project is not also have this file, and then go to find, did not find Ah, there are wood!

My project frontend is using the ACE Admin Framework, so it may appear here, and the following code is found on my Templates page:

 <script type= "Text/javascript" > JQuery ( function  ($) {// load content via Ajax  if  (' enable_ajax_content ' in   ACE) { /span>var  options = {content_url: function   (URL) { return   URL; }, Default_url:  ' dashboard ' // defa           Ult URL  };       Ace.enable_ajax_content ($, options); }    }); </script> 

So, when I clicked on the directory, my Code called Ace.enable_ajax_content ($, options); this one function, the function is in the refresh is loaded, and click on the time after the click event. Ok, find the function in my ace. There's just this function in Ajax_content.js:

Ace.enable_ajax_content = function ($, options) {//var has_history = ' history ' in Window && typeof Window.histo        Ry.pushstate = = = ' function '; var content_url = Options.content_url | | false var Default_url = Options.default_url | |    False var Loading_icon = Options.loading_icon | |    ' Fa-spinner fa-2x Orange '; var loading_text = Options.loading_text | |    ‘‘; var update_breadcrumbs = Options.update_breadcrumbs | |    typeof Options.update_breadcrumbs = = = ' undefined '; var update_title = Options.update_title | |    typeof Options.update_title = = = ' undefined '; var update_active = Options.update_active | |    typeof options.update_active = = = ' undefined '; var close_active = Options.close_active | |     typeof options.close_active = = = ' undefined '; $ (window). Off (' Hashchange.ajax '). On (' Hashchange.ajax ', function (e, manual_trigger) {var hash = $.trim (windo       W.location.hash);             if (!hash | | hash.length = = 0) return; hash = Hash.replace (/^ (\#\!)? \#/, ‘‘);             var url = false;       if (typeof Content_url = = = ' function ') URL = content_url (hash);    if (typeof url = = = ' String ') getUrl (URL, hash, Manual_trigger | | false);       }). Trigger (' Hashchange.ajax ', [true]);         /** if (has_history) {window.onpopstate = function (event) {json.stringify (event.state);       GETURL (Event.state.url, Event.state.hash, true);      }} */if (default_url && Window.location.hash = = ") Window.location.hash = Default_url; function getUrl (URL, hash, manual_trigger) {var event $ (document). Trigger (event = $.              Event (' Ajaxloadstart '), {url:url, hash:hash}) if (event.isdefaultprevented ()) return;       var Contentarea = $ ('. Page-content-area '); Contentarea. CSS (' opacity ', 0.25) var loader = $ (' <div style= ' position:fixed; z-index:2000; class= "Ajax-loading-overlay" ><i class= "Ajax-loading-icon fa fa-spin ' +loading_icon+ '" ></i> "+loading_text+ ' </div> '). InsertBefore (Contentarea);       var offset = Contentarea.offset (); Loader.css ({top:offset.top, left:offset.left}) $.ajax ({' url ': url}). Complete ( {contentarea.css (' opacity ', 0.8) $ (document). On (' ajaxscriptsloaded ', function () {cont           Entarea.css (' opacity ', 1) contentarea.prevall ('. Ajax-loading-overlay '). Remove ();       });       }). Error (function () {$ (document). Trigger (' Ajaxloaderror ', {url:url, hash:hash});                 }). Done (function (result) {$ (document). Trigger (' Ajaxloaddone ', {url:url, hash:hash});           var link_element = $ (' a[data-url= "' +hash+ '"] ');           var link_text = ';              if (Link_element.length > 0) {var nav = link_element.closest ('. Nav ');                 if (Nav.length > 0) {if (update_active) {nav.find ('. Active '). each (function () {        var $class = ' active ';                                                 if ($ (this). Hasclass (' hover ') | | close_active) $class + = ' open ';                                                 $ (this). Removeclass ($class);                            if (close_active) {$ (this). Find (' > submenu '). CSS (' Display ', ');                            var sub = $ (this). Find (' >. submenu '). Get (0); if (sub) Ace.submenu.hide (Sub, $)}}) Link_element.clo                     Sest (' Li '). addclass (' active '). Parents ('. Nav li '). addclass (' active open ');                         if (' Sidebar_scroll ' in Ace.helper) {ace.helper.sidebar_scroll.reset ();                     First time only if (Manual_trigger) ace.helper.sidebar_scroll.scroll_to_active (); }} if (Update_breadcrumbs) {link_Text = Updatebreadcrumbs (link_element); }}}//convert "title" and "link" tags to "div" tags for later processing res              Ult = String (Result). Replace (/< (Title|link) ([\s\>])/gi, ' <div class= ' hidden ajax-append-$1 "$")           . Replace (/<\/(title|link) \>/gi, ' </div> ') contentarea.empty (). HTML (result);            Contentarea.css (' opacity ', 0.6); Remove previous stylesheets inserted via Ajax setTimeout (function () {$ (' head '). Find (' Link.ajax-s              Tylesheet '). Remove ();              var Ace_style = $ (' head '). Find (' Link#main-ace-style ');                  Contentarea.find ('. Ajax-append-link '). each (function (e) {var $link = $ (this); if ($link. attr (' href ')) {var new_link = jQuery (' <link/> ', {type: ' Text/css ', rel: ' Styleshe Et ', ' class ': ' Ajax-stylesheet '}) if (ace_style.length > 0) New_link.insertbefore (ace_style);                     else New_link.appendto (' head ');                  New_link.attr (' href ', $link. attr (' href '));//we set "href" after insertion, for IE to work}              $link. Remove ();            })}, 10);           if (update_title) updatetitle (Link_text, Contentarea);           if (!manual_trigger) {$ (' html,body '). Animate ({scrolltop:0}, 250);       }//////////////////////$ (document). Trigger (' Ajaxloadcomplete ', {url:url, hash:hash}); })     }              }

　　

var contentarea = $ ('. Page-content-area ');

Contentarea

. CSS (' opacity ', 0.25)

var loader = $ (' <div style= "position:fixed; z-index:2000;" class= "Ajax-loading-overlay" ><i class= " Ajax-loading-icon fa fa-spin ' +loading_icon+ ' ></i> ' +loading_text+ ' </div> '). InsertBefore ( Contentarea);

var offset = Contentarea.offset ();

Loader.css ({top:offset.top, left:offset.left})

This code is implemented by adding a layer to the original page and displaying a rotated load button.

$.ajax ({

' url ': URL

})

The next code is to asynchronously load the page you want to load.

Contentarea.empty (). HTML (result);

This line is to replace the contents of the previous page.

var contentarea = $ ('. Page-content-area ') is the body part of your page, which is the part that needs to be updated asynchronously.

In fact, I do not do the front-end, just a little interest, if this article has any loopholes and flaws, welcome criticism, thank you!!!

How Ace admin implements a page similar to Freamset loading