jquery 插件重新綁定的處理方法分析
本文實(shí)例講述了jquery 插件重新綁定的處理方法。分享給大家供大家參考,具體如下:
比如有一個(gè)slide的jquery插件,頁(yè)面打開(kāi)就對(duì)dom進(jìn)行了綁定。
<div class="expert"> <div class="expert-list"> <ul> <li class="expert-item"> <a href="#" rel="external nofollow" rel="external nofollow" > <img src="./imgs/expert1.jpg" /> </a> </li> <li class="expert-item"> <a href="#" rel="external nofollow" rel="external nofollow" > <img src="./imgs/expert2.jpg" /> </a> </li> </ul> <a class="prev" href="javascript:void(0)" rel="external nofollow" rel="external nofollow" ></a> <a class="next" href="javascript:void(0)" rel="external nofollow" rel="external nofollow" ></a> </div> </div>
<script type="text/javascript"> $(".expert-list").slide({mainCell: "ul", autoPage: true, effect: "left", autoPlay: true}); </script>
現(xiàn)在需求是當(dāng)窗口大小發(fā)生改變時(shí),這個(gè)slide也會(huì)發(fā)生相應(yīng)變化。
單純的用jquery去控制expert-list、expert-item和img的寬、高效果并不怎么好。
想法是,解除expert-list上的slide插件綁定,然后在窗口大小改變的事件處理函數(shù)中再重新綁定,結(jié)果并沒(méi)有找到解除綁定的方法。
笨辦法是,先clone()一份,然后在把原先的dom刪除再添加,再重新綁定。
<script type="text/javascript"> var expert = $(".expert").clone(); $(".expert-list").slide({mainCell: "ul", autoPage: true, effect: "left", autoPlay: true}); $(window).resize(function () { $(".expert").empty(); //這里只需添加html結(jié)構(gòu),clone()好像會(huì)把行內(nèi)樣式也拷貝了。 $(".expert").append(expert.html()); $(".expert-list").slide({mainCell: "ul", autoPage: true, effect: "left", autoPlay: true}); }); </script>
此方法的效率并不怎么高。
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題:《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery切換特效與技巧總結(jié)》、《jQuery遍歷算法與技巧總結(jié)》、《jQuery常見(jiàn)經(jīng)典特效匯總》、《jQuery動(dòng)畫(huà)與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
- Json2Template.js 基于jquery的插件 綁定JavaScript對(duì)象到Html模板中
- 一個(gè)可綁定數(shù)據(jù)源的jQuery數(shù)據(jù)表格插件
- Angular指令封裝jQuery日期時(shí)間插件datetimepicker實(shí)現(xiàn)雙向綁定示例
- Jquery 模板數(shù)據(jù)綁定插件的使用方法詳解
- jquery彈窗插件colorbox綁定動(dòng)態(tài)生成元素的方法
- Vue.js列表渲染綁定jQuery插件的正確姿勢(shì)
- jQuery給動(dòng)態(tài)添加的元素綁定事件的方法
- jquery移除、綁定、觸發(fā)元素事件使用示例詳解
- JQuery中綁定事件(bind())和移除事件(unbind())
- jQuery事件的綁定、觸發(fā)、及監(jiān)聽(tīng)方法簡(jiǎn)單說(shuō)明
- jQuery事件綁定和委托實(shí)例
- jQuery事件綁定on()、bind()與delegate() 方法詳解
相關(guān)文章
jquery實(shí)現(xiàn)模擬百分比進(jìn)度條漸變效果代碼
這篇文章主要介紹了jquery實(shí)現(xiàn)模擬百分比進(jìn)度條漸變效果代碼,涉及jQuery基于時(shí)間函數(shù)操作頁(yè)面元素樣式變換的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10jQuery懸停文字提示框插件jquery.tooltipster.js用法示例【附demo源碼下載】
這篇文章主要介紹了jQuery懸停文字提示框插件jquery.tooltipster.js用法,涉及jQuery文字提示框插件的引入與調(diào)用實(shí)現(xiàn)技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2016-07-07深入理解jquery自定義動(dòng)畫(huà)animate()
下面小編就為大家?guī)?lái)一篇深入理解jquery自定義動(dòng)畫(huà)animate()。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05基于Jquery和html5實(shí)現(xiàn)炫酷的3D焦點(diǎn)圖動(dòng)畫(huà)
這篇文章主要介紹了基于Jquery和html5實(shí)現(xiàn)炫酷的3D焦點(diǎn)圖動(dòng)畫(huà)的相關(guān)資料,焦點(diǎn)圖中的圖片利用了CSS3的相關(guān)特性實(shí)現(xiàn)圖片傾斜效果,從而讓圖片出現(xiàn)3D的視覺(jué)效果,感興趣的小伙伴們可以參考一下2016-03-03JQuery.closest(),parent(),parents()尋找父結(jié)點(diǎn)
在50個(gè)必備的實(shí)用jQuery代碼段看到關(guān)于closest()方法的介紹,考慮到開(kāi)發(fā)過(guò)程中經(jīng)常有找爹的需求,以前用的都是parent()/parents()方法(還經(jīng)常找不到?。?,所以就此研究對(duì)比一下!2012-02-02jquery處理頁(yè)面彈出層查詢(xún)數(shù)據(jù)等待操作實(shí)例
這篇文章主要介紹了jquery處理頁(yè)面彈出層查詢(xún)數(shù)據(jù)等待操作,實(shí)例分析了jquery實(shí)現(xiàn)等待效果的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03EasyUi tabs的高度與寬度根據(jù)IE窗口的變化自適應(yīng)代碼
EasyUi tabs的高度與寬度根據(jù)IE窗口的變化自適應(yīng)代碼,需要的朋友可以參考下。2010-10-10JQuery 插件模板 制作jquery插件的朋友可以參考下
JQuery 插件模板 制作jquery插件的朋友可以參考下2010-03-03JQuery對(duì)表單元素的基本操作使用總結(jié)
這篇文章主要介紹了JQuery對(duì)表單元素的基本操作使用總結(jié),需要的朋友可以參考下2014-07-07