Ace admin 如何实现类似于freamset加载页面

 

 

     如上标题所述，ace admin做后台页面的时候，可以实现类似于用freamset的功能，但是ace admin做的比freamset更好，他可以用异步加载的形式展示，而加载的页面的内容可以尽可能的少（或者说按需加载）。

     这个主要是使用了pjax的功能，pjax的实现原理如下：

    history API中有几个新特性，分别是history.pushState和history.replaceState，我们把pushState+AJAX进行封装，合起来简单点叫，就是PJAX~ 虽说实现技术上没什么新东西，但是概念上还是有所不同的。

PJAX的基本思路是，用户点击一个链接，通过ajax更新页面变化的部分，然后使用HTML5的pushState修改浏览器的URL地址，这样有效地避免了整个页面的重新加载。如果浏览器不支持history的两个新API或者JS被禁用了，那这个链接就只能跳转并重新刷新整个页面了。和传统的ajax设计稍微不同，ajax通常是从后台获取JSON数据，然后由前端解析渲染，而PJAX请求的是一个在服务器上生成好的HTML碎片

引用至：http://www.cnblogs.com/hustskyking/p/history-api-in-html5.html

 

     因为有pjax的支持，我们可以异步加载页面的时候，页面的标题、历史信息都可以更新，当我们再次刷新页面的时候回出现在当前页面，直接点击浏览器上的后退按钮可以回到上一个界面。

    话题扯得有点远，回到ace admin。

      还是按照项目来说吧，我最近的接收的项目，是一个统计项目，相当于后台管理，而每一个很多现实在浏览器的url，都是这样的：http://localhost:8080/analytics/main#bizReport?type=L&functionId=140101，我一下子又一点懵逼，url里带“#”，好吧，百度一下就知道了，10年9月，twitter改版。开始正式使用这样的url，然后就变成的流行。详情请见http://www.cnblogs.com/kaituorensheng/p/3776527.html。

当然使用#号，也没有打不了，我们写js的时候，经常写回到顶部的时候，会用这个“#”+一个页面顶部的元素的id，实现定位跳转。但是我的项目是使用springmvc，url restful编码的啊，加“#”是几个意思？而且项目还能够正常的跳转和使用，最糟糕的是，我竟然在百度上没有找到详细所以说明原理的地方，公司的前辈说自己要独立思考（不是一般要学会问问题么？）负责我这个项目的人在我入职之前离职了，等于说我现在能够解惑的人都找不到，坑死爹了。

在百度上说这个页面使用了pajx，jquery有一个插件，专门写pajx的，叫jquery.pjax.js,我在想我的项目里是不是也有这个文件，然后去找，没有找到啊，有木有！

我的项目前端是使用的ace admin框架，所以就可能出现在这里，在我的模板页里找到了如下代码：

<script type="text/javascript">

    jQuery(function($) { //Load content via ajax

       if ('enable_ajax_content' in ace) {

           var options = {

              content_url : function(url) {

                  return url;

              },

              default_url : 'dashboard' //default url

           };

           ace.enable_ajax_content($, options);

       }

    });

</script>

 

 

 

So，我的代码在点击目录的时候，调用了ace.enable_ajax_content($, options);这一个函数，函数是在刷新是加载的，而点击的时候后点击事件。Ok，找到了函数，在我的ace. ajax_content.js里刚好有这个函数：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272

ace.enable_ajax_content = function($, options) {       //var has_history = 'history' in window && typeof window.history.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(window.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(function() {              contentArea.css('opacity', 0.8)              $(document).on('ajaxscriptsloaded', function() {                 contentArea.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, 200)                            }                        })                        link_element.closest('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              result = String(result)                 .replace(/<(title|link)([\s\>])/gi,'<div class="hidden ajax-append-$1"$2')                 .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-stylesheet').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: 'stylesheet', '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})

这一处代码，实现在原始的页面上加一个层，并显示一个旋转的加载按钮。

    $.ajax({

           'url': url

       })

之后的代码就是异步加载你想要加载的页面。

 

contentArea.empty().html(result);

这一行，就是替换之前的页面里的内容。

var contentArea = $('.page-content-area');就是你的页面的主体部分，也就是需要异步更新的部分。

 

 其实我并不是做前端的，只是有一点兴趣，如果这篇文章有什么漏洞和缺陷，欢迎批评指正，谢谢！！！