關(guān)于hashchangebroker和statehashable的補(bǔ)充文檔
url hash:url中#號(hào)后面那段,通常用來定位到html頁面中某一錨點(diǎn)。因?yàn)閔ash變化頁面不會(huì)刷新,所以在ajax應(yīng)用中用hash來存儲(chǔ)腳本運(yùn)行狀態(tài),例如gmail的做法。
jquery hash change event plugin: Internet Explorer 8, Firefox 3.6+, 和Chrome 5+里,已經(jīng)提供了window.onhashchange事件,但是在老版本的瀏覽器中并沒有這個(gè)事件,這個(gè)插件通過定時(shí)器判斷hash是否產(chǎn)生了變化,以便在老版本的瀏覽器重提供hashchange事件。
hashchangebroker:之前寫了這個(gè)jquery extend,提供了四個(gè)方法:
$.hashchangebroker.subscrib(fragName, handler)
訂閱fragName對(duì)應(yīng)的hash段落變化,并轉(zhuǎn)發(fā)給指定的handler。
url hash由若干個(gè)frag組成,一個(gè)frag格式為:[fragName]:[state]。fragName為自定義hash狀態(tài)名稱。state為base64編碼的json字符串。
handler只有一個(gè)參數(shù)state:json格式字符串,描述自定義狀態(tài)。
$.hashchangebroker.publish(hash)
此方法應(yīng)綁定到window.onhashchange事件。接收hash并解碼找到變更的frag,并轉(zhuǎn)發(fā)給訂閱該frag的handler。
$.hashchangebroker.changeFrag(fragName,state)
此方法由statehashable類型調(diào)用,用于修改hash中對(duì)應(yīng)fragName的frag的state。
$.hashchangebroker.init()
此方法用于在頁面刷新后,獲取hash并publish。在$(document).ready中調(diào)用即可。應(yīng)放到所有subscrib方法之后。
statehashable:提供這個(gè)widget是希望可以比較方便的將控件的狀態(tài)發(fā)布到url hash,并獲取控件對(duì)應(yīng)的hash frag的state變化,觸發(fā)相應(yīng)的statechange事件。
用法$(dom).statehashable();調(diào)用此方法后,給dom對(duì)象增加了hashchange事件。當(dāng)statehashable對(duì)象發(fā)現(xiàn)控件對(duì)應(yīng)的hash frag變化后,會(huì)觸發(fā)dom對(duì)象的hashchange事件。
使用方法:
$(dom).bind("hashchange",function(e,stateObj){
//判斷stateObj的狀態(tài),還原dom到對(duì)應(yīng)的狀態(tài)
});
應(yīng)在更改dom狀態(tài)的方法中增加statechange的事件觸發(fā),statehashable對(duì)象會(huì)捕捉該事件,并調(diào)用hashchangebroker的changeFrag方法,修改hash。statechange觸發(fā)示例:
$(dom).trigger("statechange",[stateName,stateValue]);
相關(guān)文章
淺談jQuery綁定事件會(huì)疊加的解決方法和心得總結(jié)
下面小編就為大家?guī)硪黄獪\談jQuery綁定事件會(huì)疊加的解決方法和心得總結(jié)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-10
jQuery實(shí)現(xiàn)滑動(dòng)頁面固定頂部顯示(可根據(jù)顯示位置消失與替換)
這篇文章主要介紹了jQuery實(shí)現(xiàn)滑動(dòng)頁面固定頂部顯示,還可根據(jù)顯示位置消失與替換對(duì)應(yīng)的當(dāng)前顯示項(xiàng),具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10
jQuery實(shí)現(xiàn)向下滑出的二級(jí)菜單效果實(shí)例
這篇文章主要介紹了jQuery實(shí)現(xiàn)向下滑出的二級(jí)菜單效果,涉及jquery鼠標(biāo)事件及頁面元素樣式動(dòng)態(tài)變換的相關(guān)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-08-08
jQuery實(shí)現(xiàn)的模仿雨滴下落動(dòng)畫效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)的模仿雨滴下落動(dòng)畫效果,涉及jQuery結(jié)合時(shí)間函數(shù)動(dòng)態(tài)修改頁面元素屬性相關(guān)操作技巧,需要的朋友可以參考下2018-12-12
瀏覽器窗口大小變化時(shí)使用resize事件對(duì)框架不起作用的解決方法
有時(shí)候我們需要用resize事件調(diào)整瀏覽器窗口大小,但對(duì)框架卻不起作用,這里介紹下實(shí)現(xiàn)方法,需要的朋友可以參考下2014-05-05
使用jQuery和Bootstrap實(shí)現(xiàn)多層、自適應(yīng)模態(tài)窗口
這篇文章主要介紹了使用jQuery和Bootstrap實(shí)現(xiàn)多層、自適應(yīng)模態(tài)窗口,需要的朋友可以參考下2014-12-12
學(xué)習(xí)從實(shí)踐開始之jQuery插件開發(fā) 菜單插件開發(fā)
從軟件到網(wǎng)站,菜單可以說是無處不在。在傳統(tǒng)應(yīng)用軟件開發(fā)中,一般都有現(xiàn)成的控件可以使用;但是在網(wǎng)頁開發(fā)時(shí),基本上要靠開發(fā)人員自己動(dòng)手設(shè)計(jì)2012-05-05

