資訊專欄INFORMATION COLUMN
摘要：一款精簡而豐富的微型框架，非常適合以為核心的項(xiàng)目使用。并集成指令模板進(jìn)度條效果等功能。雖然支持載入頁面的運(yùn)行，但是由于安全限制以及可能出現(xiàn)的重復(fù)運(yùn)行的問題，建議將所有寫在主頁面，事件以委托方式綁定。使用模式請求頁面，這樣可以保證是完全重載。
jQloader v0.2.3
一款精簡而豐富的微型框架，非常適合以 jQuery 為核心的項(xiàng)目使用。
它的核心功能為 ajax + pushState 實(shí)現(xiàn)異步加載、路由、瀏覽器歷史。并集成指令模板、進(jìn)度條、loading效果等功能。
https://moerj.github.io/jQloader
Features指令模板，html 頁面直接引入其他頁面
動態(tài)加載，ajax 動態(tài)加載html頁面
歷史記錄，ajax 頁面會存入瀏覽器歷史記錄
路由機(jī)制，路由地址以#號連接在瀏覽器地址欄
自動載入效果，包括：進(jìn)度條、蒙層等方式
Install引入依賴 jQuery 或者 Zepto
HTML-Order jq-include
引入頁面
ajax 方式請求一個(gè)頁面，并放入在該容器中
jq-router
路由容器
整個(gè)瀏覽器窗口只能有一個(gè)jq-router，多余的將會被忽略。
用途：
呈現(xiàn)ajax頁面的容器，用于顯示地址欄#xxx.html部分的數(shù)據(jù)，如果頁面上沒有路由容器，則首次加載忽略路由地址。
提示：
當(dāng)你需要一個(gè)頁面有多個(gè)容器呈現(xiàn)其他 ajax 頁面數(shù)據(jù)時(shí)，請使用 jq-include 指令。
jq-router 指令僅僅是用來讀取瀏覽器歷史數(shù)據(jù)和路由頁面的。
可以直接使用 a 標(biāo)簽來請求一個(gè)頁面，當(dāng)你使用了 load 屬性時(shí)，會屏蔽 herf 屬性。
a 標(biāo)簽的錨點(diǎn)功能依然保留，但點(diǎn)擊后標(biāo)簽不會改變地址欄，因?yàn)?號已被路由功能占用。_to be optimized_
私有屬性：
load 點(diǎn)擊后請求的url地址
to 請求到的頁面存放容器，不設(shè)置時(shí)默認(rèn)存放在 jq-router 容器
支持所有 Options 參數(shù)，屬性參數(shù)可以為空，例如：
Options history
寫入瀏覽器歷史，默認(rèn) true
progress加載時(shí)顯示進(jìn)度條，默認(rèn) true
loading顯示加載提示，并鎖定界面，默認(rèn) false
cacheajax開啟緩存，默認(rèn) true
asyncajax請求異步，默認(rèn) true
title請求數(shù)據(jù)后，改變?yōu)g覽器tab頁名稱，默認(rèn) null
strict嚴(yán)格模式加載 ajxa，默認(rèn) false
使用嚴(yán)格模式進(jìn)行 ajxa 請求，此時(shí)請求會完全重載整個(gè)頁面，防止重復(fù)js運(yùn)行。
雖然支持 ajax 載入頁面的 js 運(yùn)行，但是由于安全限制以及可能出現(xiàn)的 js 重復(fù)運(yùn)行的問題，建議將所有 js 寫在主頁面，事件以委托方式綁定。
若你還是想在 ajax 頁面中寫 js， 有2種辦法確保安全：
請確保這部分 js 沒有對主頁面和全局對象有事件綁定，不然很可能再次打開此頁面時(shí)會重復(fù)綁定事件。
使用 strict 模式請求頁面，這樣可以保證是完全重載。
API loadPage加載頁面
ajax 方式加載頁面到容器中
// 在一個(gè) div 容器中加載頁面
$("div").loadPage({
url: "url string", //請求地址，必須
history: true, //寫入瀏覽器歷史，默認(rèn) true
progress: true, //加載時(shí)顯示進(jìn)度條，默認(rèn) true
loading: false, //顯示加載提示，并鎖定界面，默認(rèn) false
cache: true, //開啟緩存，默認(rèn) true
async: true, //異步，默認(rèn) true
title: "string", //瀏覽器tab頁名稱，默認(rèn) null
strict: false //嚴(yán)格模式加載 ajxa，默認(rèn) false
},function(){
// callBack
})
loadFinish
加載頁面后的回調(diào)
目標(biāo)容器使用 loadPage 或者指令方式加載完數(shù)據(jù)后的回調(diào)
$("div").loadFinish(function () {
// loadPage 完成，執(zhí)行的代碼
})
progressBar
加載進(jìn)度條
loading 狀態(tài)時(shí)頂部的進(jìn)度條，頁面加載時(shí)會自動執(zhí)行。(注意：除非你有其他用途，通常進(jìn)度條并不需要你去手動操作)
$.progressBar
.star() //進(jìn)度條開始
.stop() //暫停
.reset() //重置進(jìn)度條 0%
.finish() //走完進(jìn)度條 100%
.setColor("color") //設(shè)置進(jìn)度條顏色
loadingMask
手動開啟一個(gè) loading 效果并鎖定界面。
支持 FontAwesome 圖標(biāo)庫，當(dāng)引入后會有加載特效。
$.loadingMask .show() .hide()
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/79937.html
摘要：對于那些老網(wǎng)站或者老項(xiàng)目來說全盤改造成并不現(xiàn)實(shí)，于是就有了局部頁面刷新這個(gè)解決方案。如果不知道局部頁面刷新是何物請看這里，這里和這里。但實(shí)際上，第一次后退無法還原的內(nèi)容陷阱，第二次后退頁面刷新了一切恢復(fù)最初的樣子。 ajax在現(xiàn)代網(wǎng)站已經(jīng)得到非常普遍地應(yīng)用，主要的好處大家都知道（異步加載數(shù)據(jù)，不用刷新整個(gè)瀏覽器，更小的數(shù)據(jù)傳輸尺寸）。對于那些老網(wǎng)站或者老項(xiàng)目來說全盤改造成ajax并不現(xiàn)...
vue 頭條 demo 寫在前面 總結(jié)一下寫 demo 過程中 遇到的一些問題，方便自己的學(xué)習(xí)總結(jié)！如有錯(cuò)誤，還請指正！ 一直想學(xué)習(xí)使用 vue ，并準(zhǔn)備以后在實(shí)際項(xiàng)目使用，之前跟著慕課網(wǎng) 黃軼 老師 敲了一下 餓了么商品購買頁的demoele效果預(yù)覽 該 demo 借鑒自 hcy1996-github 這個(gè)項(xiàng)目，但內(nèi)部內(nèi)容，布局風(fēng)格，完全不同，只為共同學(xué)習(xí)，共同交流 數(shù)據(jù)接口 直接打開 今日...
摘要：實(shí)際的效果見沒有勾選的時(shí)候，點(diǎn)擊鏈接是跳轉(zhuǎn)的。為了支持，一個(gè)是在加載的時(shí)候判斷瀏覽器是否支持另一個(gè)是當(dāng)發(fā)現(xiàn)請求一段時(shí)間沒有回復(fù)的時(shí)候可以設(shè)置參數(shù)，直接做頁面跳轉(zhuǎn)。 背景 目前看到的很多的pc端頁面點(diǎn)擊頁面某塊鏈接的時(shí)候，原本應(yīng)該是頁面的某個(gè)部分更新的，但是卻整個(gè)頁面刷新，整個(gè)頁面都閃了一下。特別是看某些圖集的頁面，一個(gè)頁面本來就幾十張圖看，看完眼睛都閃瞎了。用ajax加載數(shù)據(jù)可以解決這...
閱讀 604·2023-04-26 02:58
閱讀 2339·2021-09-27 14:01
閱讀 3644·2021-09-22 15:57
閱讀 1208·2019-08-30 15:56
閱讀 1072·2019-08-30 15:53
閱讀 824·2019-08-30 15:52
閱讀 695·2019-08-26 14:01
閱讀 2193·2019-08-26 13:41
