中文前端UI框架Kit(九)IE下實現W3C標准的range對象所有api,支持通過xpath跨瀏覽器實現特定選區高亮,書簽標記功能


號外:kitjs官方討論QQ群建立了,QQ群號88093625,歡迎大家加入,討論前端相關話題

kit是目前已知框架中第一個支持完美IE下跨段落,跨任意元素,以及多個textNode的偏移問題的高亮工具,以及對range對象的修復,完美修復IE下的range對象以支持了W3C標准range模型的所有的屬性以及接口

demo地址:http://xueduany.github.com/KitJs/KitJs/index.html#highlight,類似iCloud的高亮書簽,類似有道閱讀類似的書簽功能,與他不同的是,kit支持跨段落,且標准化以及兼容性更好

(一)Fix IE range對象,模擬W3C的標准模型,支持開始節點,結束節點,開始位移,結束位移等

我們都知道IE9之前不支持W3C的標准Selection和Range對象,無法或者選區內容的開始節點和結束節點,以及開始位移和結束位移

現在kit幫你fix了IE下的range對象兼容

中文api doc地址: http://xueduany.github.com/jsdoc/out/$Kit.Selection.html

(二)可以根據選中內容生成xpath字符串,保存高亮標簽

先用鼠標選中一段文本

image

 

,然后在console里面,可以看到選中內容,可以序列化為一條xpath的字符串

//BODY/DIV[1]/DIV[3]/DIV[2]/P[4]/text()[5]|31|//BODY/DIV[1]/DIV[5]/DIV[2]/TABLE[1]/TBODY[1]/TR[1]/TD[2]/LI[1]/I[1]/I[1]/text()[1]|17

 

(三)根據xpath實現跨瀏覽器高亮

根據之前的xpath字符串,在IE的console里面輸入

$kit.selection.highlight('//BODY/DIV[1]/DIV[3]/DIV[2]/P[4]/text()[5]|31|//BODY/DIV[1]/DIV[5]/DIV[2]/TABLE[1]/TBODY[1]/TR[1]/TD[2]/LI[1]/I[1]/I[1]/text()[1]|17')

image

我們可以看到同樣的選區在ie中被高亮了

(四)擴展

這樣,基於kit,你可以很輕松的實現任意設備的高亮書簽保存,類似iCloud的書簽功能,有任何疑問,歡迎討論


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM