jQloader 开源，集成 ajax、history、loading、orderTemplate 的页面模块化东西

2024年1月21日 202次阅读 来源: moer

jQloader v0.2.3

一款精简而雄厚的微型框架，异常合适以 jQuery 为中心的项目运用。
它的中心功用为 ajax + pushState 完成异步加载、路由、浏览器汗青。并集成指令模板、进度条、loading结果等功用。

Home

https://moerj.github.io/jQloader

Features

  • 指令模板，html 页面直接引入其他页面

  • 动态加载，ajax 动态加载html页面

  • 汗青记录，ajax 页面会存入浏览器汗青记录

  • 路由机制，路由地点以#号连接在浏览器地点栏

  • 自动载入结果，包含：进度条、蒙层等体式格局

Install

引入依靠 jQuery 或许 Zepto

<script src="jquery.js"></script>
<script src="jQloader.js"></script>

HTML-Order

jq-include

引入页面
ajax 体式格局要求一个页面，并放入在该容器中

<!-- somePage页面将会以 ajax 体式格局加进来 -->
<jq-include src="./somePage.html"></jq-include>

jq-router

路由容器
全部浏览器窗口只能有一个jq-router，过剩的将会被疏忽。

用处：
显现ajax页面的容器，用于显现地点栏#xxx.html部份的数据，假如页面上没有路由容器，则初次加载疏忽路由地点。

<!-- 把 loadPage 要领要求的数据塞入这里 -->
<jq-router></jq-router>

提醒：
当你须要一个页面有多个容器显现其他 ajax 页面数据时，请运用 jq-include 指令。
jq-router 指令仅仅是用来读取浏览器汗青数据和路由页面的。

a

能够直接运用 a 标签来要求一个页面，当你运用了 load 属性时，会屏障 herf 属性。
a 标签的锚点功用依旧保存，但点击后标签不会转变地点栏，因为#号已被路由功用占用。_to be optimized_

私有属性：

  • load 点击后要求的url地点

  • to 要求到的页面寄存容器，不设置时默许寄存在 jq-router 容器

<!-- 将hellow页面加载到id为container的容器中，页面称号显现为hellow jQloader -->
<a load="./hellow.html" to="#container" title="hellow jQloader"></a>

支撑一切 Options 参数，属性参数能够为空，比方：

<a strict loading></a>
<!--等价于-->
<a strict="true" loading="true"></a>

<a></a>
<!--等价于-->
<a strict="false" loading="false"></a>

Options

history

写入浏览器汗青，默许 true

progress

加载时显现进度条，默许 true

loading

显现加载提醒，并锁定界面，默许 false

cache

ajax开启缓存，默许 true

async

ajax要求异步，默许 true

title

要求数据后，转变浏览器tab页称号，默许 null

strict

严厉形式加载 ajxa，默许 false
运用严厉形式举行 ajxa 要求，此时要求会完整重载全部页面，防备反复js运转。
虽然支撑 ajax 载入页面的 js 运转，然则因为平安限定以及能够涌现的 js 反复运转的题目，发起将一切 js 写在主页面，事宜以托付体式格局绑定。
若你照样想在 ajax 页面中写 js， 有2种方法确保平安：

  • 请确保这部份 js 没有对主页面和全局对象有事宜绑定，不然极能够再次翻开此页面时会反复绑定事宜。

  • 运用 strict 形式要求页面，如许能够保证是完整重载。

API

loadPage

加载页面
ajax 体式格局加载页面到容器中

// 在一个 div 容器中加载页面
$('div').loadPage({
    url: 'url string',  //要求地点，必需
    history: true,      //写入浏览器汗青，默许 true
    progress: true,     //加载时显现进度条，默许 true
    loading: false,     //显现加载提醒，并锁定界面，默许 false
    cache: true,        //开启缓存，默许 true
    async: true,        //异步，默许 true
    title: 'string',    //浏览器tab页称号，默许 null
    strict: false       //严厉形式加载 ajxa，默许 false
},function(){
    // callBack
})

loadFinish

加载页面后的回调
目的容器运用 loadPage 或许指令体式格局加载完数据后的回调

$('div').loadFinish(function () {
    // loadPage 完成，实行的代码
})

progressBar

加载进度条
loading 状况时顶部的进度条，页面加载时会自动实行。(注重：除非你有其他用处，一般进度条并不须要你去手动操纵)

$.progressBar
.star()             //进度条最先
.stop()             //停息
.reset()            //重置进度条 0%
.finish()           //走完进度条 100%
.setColor('color')  //设置进度条色彩

loadingMask

手动开启一个 loading 结果并锁定界面。
支撑 FontAwesome 图标库，当引入后会有加载殊效。

$.loadingMask
.show()
.hide()
    原文作者：moer
    原文地址: https://segmentfault.com/a/1190000005913107
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞