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>
    
    此方法的效率并不怎么高。

     
  • 相关阅读:
    initializer_list形参
    前置递增运算符和后置递增运算符的区别
    基本的TCP socket API
    C++ find()函数
    python-对目录下的文件按时间排序
    js常用方法
    selenium中的对文本进行全选,复制,粘贴,剪切和删除的操作
    python 打包exe 命令及去除 cmd框
    mysql命令行修改密码
    html文件转换成excel
  • 原文地址:https://www.cnblogs.com/jkko123/p/6294617.html
Copyright © 2011-2022 走看看