jQuery 中的异步页面加载插件 - AjaxPageParser

版本:

浏览量:1071

最后更新：2021-09-12

应用标签：MAC 软件 Jquery插件 git

推荐指数:

查看演示点击下载

详细信息

AjaxPageParser 是一个 jQuery 插件，用于对您的网站进行 ajaxify，它通过 AJAX 异步加载网页（或网页的一部分），就像原生移动应用程序一样。

该插件在从外部页面加载内容时显示加载微调器，并在页面完全加载到当前页面时更新标题和页面 URL（可选）。

还提供了一个错误回调，当页面加载失败时将触发该回调。

也可以看看：

使用 AJAX 将外部文件加载到网页中 - jQuery includeHTML.js
用于 Ajaxifying 网站的 jQuery 插件 - Ajaxify

如何使用它：

1. 下载并解压插件，并在您的网页上包含最新版本的 AjaxPageParser。

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

2. 在网页上创建一个页面加载微调器。

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

3. 创建一个指向您网站内页面的导航菜单。

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

4. 初始化菜单项上的插件并指定数据将在其中显示的容器。

<div id="container">
  ...
</div>

$(".menu a").pageParser({
  container: $('#container')
});

5. 更多配置选项。

$(".menu a").pageParser({
 
  // if false, the plugin doesn't update the URL to match the loaded page
  dynamicUrl: true,
 
  // the active element from which the page loaded from on initial load
  initialElement: null,
 
  // if empty it loads the whole page
  parseElement: null,
 
  // sets the title of the page
  setTitle: true,
 
  // custom trigger event
  trigger: 'click',
 
  // default attribute that holds the URL
  urlAttribute: 'href',
 
  // loading delay
  loadDelay: null
   
});

6. 事件处理程序。

$(".menu a").pageParser({
 
  before: function(){
    // fired before loading
    // 'this' returns the clicked button
  },
 
  //
  finished: function(){
    // fired after loading
    // 'this' returns the clicked button
  },
 
  error: function(){
    // fired on error
    // returns the xhr status.
  },
 
});

联系我们

免费复制

微信扫码关注领取验证码

注:需在公众号回复"验证码