zoukankan      html  css  js  c++  java
  • jquery 处理重新绑定插件的方法

    比如有一个slide的jquery插件,页面打开就对dom进行了绑定。
    <div class="expert">
        <div class="expert-list">
            <ul>
                <li class="expert-item">
                    <a href="#">
                        <img src="./imgs/expert1.jpg" />
                    </a>
                </li>
                <li class="expert-item">
                    <a href="#">
                        <img src="./imgs/expert2.jpg" />
                    </a>
                </li>
            </ul>
            <a class="prev" href="javascript:void(0)"></a>
            <a class="next" href="javascript:void(0)"></a>
        </div>
    </div>
    
    <script type="text/javascript">
        $(".expert-list").slide({mainCell: "ul", autoPage: true, effect: "left", autoPlay: true});
    </script>
    
    现在需求是当窗口大小发生改变时,这个slide也会发生相应变化。
    单纯的用jquery去控制expert-list、expert-item和img的宽、高效果并不怎么好。
    想法是,解除expert-list上的slide插件绑定,然后在窗口大小改变的事件处理函数中再重新绑定,结果并没有找到解除绑定的方法。
     
    笨办法是,先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结构,clone()好像会把行内样式也拷贝了。
            $(".expert").append(expert.html());
            $(".expert-list").slide({mainCell: "ul", autoPage: true, effect: "left", autoPlay: true});
        });
    </script>
    
    此方法的效率并不怎么高。

     
  • 相关阅读:
    jquery的常用api和两个特性
    react脚手架和深入理解jsx语法
    前端常见的性能优化
    前后端交互模型(一个面试题引发的思考总结)
    jquery源码部分分析
    bootstrap快速上手
    vue总结
    MySQL连接查询驱动表被驱动表以及性能优化
    一分钟掌握MySQL的InnoDB引擎B+树索引
    一分钟明白MySQL聚簇索引和非聚簇索引
  • 原文地址:https://www.cnblogs.com/jkko123/p/6294617.html
Copyright © 2011-2022 走看看