號外: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字符串,保存高亮標簽
先用鼠標選中一段文本
,然后在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')
我們可以看到同樣的選區在ie中被高亮了
(四)擴展
這樣,基於kit,你可以很輕松的實現任意設備的高亮書簽保存,類似iCloud的書簽功能,有任何疑問,歡迎討論