Ajax Content Ajax内容布局

Ajax

Overview

$('#some-content-area').ace_ajax({

//options

});

$('[data-ajax-content=true]').ace_ajax({

//options

});

Setting up 参数设置

content_url

default_url

loading_icon

$('#some-content-area').ace_ajax({

content_url: function(hash) {

//hash is the value from document url hash

//take "url" param and return the relevant url to load

return "path/to/content/"+hash+".html";

},

default_url: 'homepage.html'//default url

,

loading_icon: "fa-cog fa-2x blue"

});

Options

content_url：”是最重要的部分。功能返回URL检索。default_url：默认URL加载loading_icon：图标显示加载新内容的时候。默认的是：fa-spinner fa-2x orangeloading_text：显示加载新的内容时，文本。默认值为“”update_active：一个函数或布尔值，指示是否更新“新选定的链接及其父母主动”状态。默认是真的update_breadcrumbs和布尔值指示一个函数更新面包。默认trueupdate_title：一个函数或布尔值，指示是否更新窗口标题。默认trueclose_active：是否关闭先前的活动项目或子菜单。默认为falsemax_load_wait：等待时间在秒之前如果需要太长的内容来停止AJAX内容检索。默认为false

Functions

停止加载

$('#some-content-area').ace_ajax('stopLoading', true);

开始加载

$('#some-content-area').ace_ajax('startLoading');

loadScripts、loadUrl

$('#some-content-area').ace_ajax('loadUrl', hash);

Loading JS & CSS Files

'loadScripts' 加载的js脚本只执行一次

<script type="text/javascript">

var scripts = ['path/to/plugin1.js', 'path/to/other-plugin.js']

$('#some-content-area').ace_ajax('loadScripts', scripts, function() {

//put inline scripts related to this page here

alert('hello!');

})

</script>

执行多次可以用 jQuery.getScript

<script type="text/javascript">

var scripts = ['path/to/plugin1.js', 'path/to/other-plugin.js']

$('#some-content-area').ace_ajax('loadScripts', scripts, function() {

//for example put inline scripts related to this page here

jQuery.getScript('path/to/mypage-script.js', function() {

//this page's script is loaded

//now do domething else

});

})

</script>

清理上个页面的内容 ，例子

var scripts = ['path/to/plugin1.js', 'path/to/other-plugin.js']

$('#some-content-area').ace_ajax('loadScripts', scripts, function() {

//put inline scripts related to this page here

//and clean up some plugin remainings before leaving to another page

$('#some-content-area').one('ajaxloadstart', function(e, params) {

//cleanup plugin1

//for example for jqGrid:

$('#grid_selector').jqGrid('GridUnload');

$('.ui-jqdialog').remove();

//or for some datepicker, etc elements:

$('.daterangepicker.dropdown-menu').remove();

//or inline editable

$('.editable').editable('destroy');

})

})

Events 事件

ajaxloadstart触发时。如果调用 “preventdefault()”事件对象，加载将被取消ajaxloaddone内容加载ajaxloadcomplete 内容被加载并插入到DOMajaxloaderror 加载失败ajaxloadlong如果max_load_wait指定，则加载时间太久 ajaxscriptsloaded 加载脚本完成

$('#some-content-area')

//or

//$(document)

.on('ajaxloadstart', function(e, params) {

//params.url and params.hash are available

if(params.url == 'something') e.preventDefault();

if(params.hash == 'something') e.preventDefault();

//you can also return "false" from "content_url" function to prevent loading

})