Jquery 类似新浪微博，鼠标移到头像，用浮动窗口显示用户信息，已做成一个jquery插件

添加时间:2013-6-25 点击量:

　　须要如下图，

　　1、鼠标移动到头像DIV时，Ajax获取数据，并让浮动DIV显示出来。

　　2、鼠标可以移动到上方浮动的DIV。

　 3、鼠标移出浮动DIV且移出头像DIV时，浮动DIV消散，

　　第一步，给DIV添加mou搜刮引擎优化n事务，触发获取数据：这个斗劲简单，我应用的是经由过程ajax get：￥.get（url， function（data） {。。。。。}

　　第二步，显示DIV，　　

if（data==error）{

    alert（用户名片加载失败，请接洽经管员!）;

}else{

    ￥（wrap_uid）.append（data）;//外面一层DIV，data本身就是HTML代码，当然也可以再这边先组织出data来
　　￥（uid）.show（）;//浮动窗口的DIV，show函数必须，不然这个新加的DIV是不会自个儿主动出来的！

}

　　第三步，这是斗干劲疼的一步了，开端，是如许的思路，给头像DIV和浮动DIV的外面那层DIV添加一个事务，mou搜刮引擎优化ut事务，在事务中将浮动DIV删除

，题目来了，很多时辰，用户移动到头像DIV，然后浮动DIV显示出来了，用户就想去操纵浮动DIV了，然则中心是分隔的！只有一个箭头是和头像DIV在一路的，也就是说，鼠标从头像DIV移动到浮动DIV时，会有很可能率跑出大的DIV，一旦鼠标进入两个DIV中心的裂缝，mou搜刮引擎优化ut事务就触发了，浮动DIV就木有了，很蛋疼。

　　最后想了个办法，让移除浮动DIV放到一个setTimeout中，在必然的时候内（0.2s或者0.1s），若用户鼠标移动到浮动的DIV上时，触发一个clearTimeout事务，把移除浮动DIV按时器给删了！设法挺好，看着也挺简单，然则中心还是有各类BUG，各类失败，最首要的一点就是，最外面的DIV的mou搜刮引擎优化ut事务须要移除绑定，本身做过实验就会知道为什么了，下面直接贴代码

function load_user_info（uid， login_id） {

    var my_timeout;

    var url = xxxxxx;

     console.log（url）;

    ￥.get（url， function（data） {

        console.log（data）;

        if（data==error）{

            alert（用户名片加载失败，请接洽经管员!）;

        }else{

            ￥（wrap_id）.append（data）.mou搜刮引擎优化ut（function（） {

                my_timeout = setTimeout（function（） {

                    ￥（float_id）.remove（）;

                }， 200）;

                ￥（wrap_id）.unbind（mou搜刮引擎优化ut）;

            }）.mou搜刮引擎优化ver（function（） {

                clearTimeout（my_timeout）;

            }）;

            ￥（float_id）.show（）.mou搜刮引擎优化ver（function（） {

                clearTimeout（my_timeout）;

            }）.mou搜刮引擎优化ut（function（） {

                my_timeout = setTimeout（function（） {

                    ￥（float_id.remove（）;

                }， 200）;

            }）;

        }

    }）;

}

　　还是写点清楚吧，也算锤炼下本身的表达才能!起首，鼠标移出外层DIV时，有两种景象，一种是鼠标它真的走了，还有一种是它其实是去浮动DIV了，所以，给他200毫秒时候，时候一到，若是它没到浮动DIV，就认为它真的走了，就删掉浮动DIV，若是到了浮动DIV，就把按时器给删了！浮动DIV依旧显示，然后，从浮动DIV出来，也有两种景象，一种是去头像DIV，一种是鼠标他真的走了，老样子。至于为什么要外层的DIV解除mou搜刮引擎优化ut绑定，是因为当鼠标在浮动DIV移动的时辰，实际上鼠标已经移出了外层DIV的局限，当鼠标在浮动DIV上不绝滑动时，mou搜刮引擎优化ut事务络续触发，会造成BUG，第一次完全OK，在浮动DIV移动时，不绝clearTimeout 后面timeout越来越多，第二次开端timeout就乱了，无确删除clearTimeout事务.....还是有点说不清，囧....

感激＠tanshaohua的指导，指出了这段代码的改进之处，就是在用户鼠标移动到头像，显示出浮动框后，鼠标再次移动到头像时，不该该再去获取数据，增长了办事器的压力。最后贴一下改进后的代码，其实就是断定下float_id的DIV是否已经存在，存在了就不进行加载。代码还斗劲痴肥，先把手头上其他事解决了，再来处理惩罚这个题目

var my_timeout;

    if（￥（float_id）.size（）>0）{

        ￥（wrap_id）.mou搜刮引擎优化ut（function（） {

            my_timeout = setTimeout（function（） {

                ￥（float_id）.remove（）;

            }， 200）;

            ￥（wrap_id）.unbind（mou搜刮引擎优化ut）;

        }）.mou搜刮引擎优化ver（function（） {

            clearTimeout（my_timeout）;

        ￥（float_id）.show（）.mou搜刮引擎优化ver（function（） {

            clearTimeout（my_timeout）;

        }）.mou搜刮引擎优化ut（function（） {

            my_timeout = setTimeout（function（） {

                ￥（float_id）.remove（）;

            }， 200）;

        }）;

    }else{

        var url = XXXXXXX;

//         console.log（url）;

        ￥.get（url， function（data） {

//            console.log（data）;

            if（data==error）{

                alert（用户名片加载失败，请接洽经管员!）;

            }else{

                ￥（wrap_id）.append（data）.mou搜刮引擎优化ut（function（） {

                    my_timeout = setTimeout（function（） {

                        ￥（float_id）.remove（）;

                    }， 200）;

                    ￥（wrap_id）.unbind（mou搜刮引擎优化ut）;

                }）.mou搜刮引擎优化ver（function（） {

                    clearTimeout（my_timeout）;

                ￥（float_id）.show（）.mou搜刮引擎优化ver（function（） {

                    clearTimeout（my_timeout）;

                }）.mou搜刮引擎优化ut（function（） {

                    my_timeout = setTimeout（function（） {

                        ￥（float_id）.remove（）;

                    }， 200）;

                }）;

            }

        }）;

    }

　　　　今天把这个功能做成了一个jquery插件：，下面是插件的代码：

（function（￥） {

    ￥.fn.popovercard = function（op） {

        var nowObj = ￥（this）;

        var defaults = {

            obj_type : user，

            obj_id : 21，

            url : ，

            user_url : /user/user_info_card？id=，

            prod_url : /prod/prod_info_card？id，

            needParam : true，

            popover_id : popover，

            popover_wrap_id : popover_wrap，

            onSuccess : null，

            onError : null

        };

        if （typeof （￥（this）.data（obj_id）） != undefined） {

            defaults.obj_id = ￥（this）.data（obj_id）;

        }

        if （typeof （￥（this）.data（url）） != undefined） {

            defaults.url = ￥（this）.data（url）;

        }

        if （typeof （￥（this）.data（obj_type）） != undefined） {

            defaults.obj_type = ￥（this）.data（obj_type）;

        }

        if （typeof （￥（this）.data（needParam）） != undefined） {

            defaults.needParam = ￥（this）.data（needParam）;

        }

        if （typeof （￥（this）.data（popover_id）） != undefined） {

            defaults.popover_id = ￥（this）.data（popover_id）;

        }

        if （typeof （￥（this）.data（popover_wrap_id）） != undefined） {

            defaults.popover_wrap_id = ￥（this）.data（popover_wrap_id）;

        }

        return this.each（function（） {

            var opts = ￥.extend（defaults， op）;

            nowObj.mou搜刮引擎优化ver（function（） {

                load_user_info（opts.obj_id， opts.obj_type，opts.needParam，opts.url）;

            }）;

        }）;

        function load_user_info（uid， type，needParam，url） {

            var data_url;// 获取数据的URL

            var my_timeout;// 隐蔽浮动DIV的按时器

            var popover_wrap_div;// 最外层包裹的DIV

            // 浮动框的ID

            var popover_id = defaults.popover_id + _ + type + _ + uid;

            // 浮动框和IMG外面包裹的DIV的ID

            var popover_wrap_id = defaults.popover_wrap_id + _ + type + _

                    + uid;

            if （￥（＃ + popover_id）.size（） <= 0） {

                if（url==）{

                    if （type == user） {

                        if （needParam == true） {

                            data_url = defaults.user_url + uid;

                        } else {

                            data_url = defaults.user_url;

                        }

                    } else if （type = prod） {

                        // 扩大其他url

                        data_url = defaults.prod_url;

                    } else {

                        if （needParam == true） {

                            data_url = defaults.url + uid;

                        } else {

                            data_url = defaults.url;

                        }

                    }

                }else{

                    data_url = url;

                }

                

                console.log（data_url）;

                ￥.get（data_url， function（data） {

                    if （data == error） {

                        alert（加载失败，请接洽经管员!）;

                    } else {

                        if （￥（＃ + popover_wrap_id）.size（） <= 0） {

                            // 在最外面包裹一层DIV

                            popover_wrap_div = <div id = + popover_wrap_id

                                    + ></div>;

                            nowObj.wrap（popover_wrap_div）;

                        }

                        ￥（＃ + popover_wrap_id）.append（data）;

                        od = ￥（＃ + popover_wrap_id + >div:last）.attr（id，

                                popover_id）;

                        ￥（＃ + popover_id）.show（）;

                        bindEvent（popover_wrap_id， popover_id）;

                    }

                }）;

            }

            bindEvent（popover_wrap_id， popover_id）;

            function bindEvent（popover_wrap_id， popover_id） {

                ￥（＃ + popover_wrap_id）.mou搜刮引擎优化ut（function（） {

                    my_timeout = setTimeout（function（） {

                        ￥（＃ + popover_id）.hide（）;

                    }， 200）;

                    ￥（＃ + popover_wrap_id）.unbind（mou搜刮引擎优化ut）;

                }）.mou搜刮引擎优化ver（function（） {

                    clearTimeout（my_timeout）;

                }）;

                ￥（＃ + popover_id）.show（）.mou搜刮引擎优化ver（function（） {

                    clearTimeout（my_timeout）;

                }）.mou搜刮引擎优化ut（function（） {

                    my_timeout = setTimeout（function（） {

                        ￥（＃ + popover_id）.hide（）;

                    }， 200）;

                }）;

            }

        }

    };

}）（jQuery）;

　　　　接下来是应用申明：

　参数申明：

　 Øobj_type : user， //类型，便利今后扩大

　　　　Øobj_id : 21’; //经由过程data-popover_id获取

　　　　Øpopover_id : ‘popover’，//浮动框的DIV的ID，目标是可防止ID冲突

　　　　Øpopover_wrap_id : ‘popover_wrap’，//包含浮动框和头像的外层DIV的ID，目标是防止ID冲突，可以自行更改

　　　　Øurl : ‘/user/user_info_card？id=’，//接管外面自定义的url

　　　　Øuser_url : ‘/user/user_info_card？id=’，//当 type=prod时，应用该URL

　　　　Øprod_url : /user/user_info_card？id=， //当type=prod时，应用该URL

　　　　ØneedParam : ‘true’，//是否有参数，默认为true

　　　　ØonSuccess : null， //便利今后扩大

　　　　ØonError : null //便利今后扩大

举例一：常规，应用内部定死的URL

       <script type=‘text/javascript’ src=‘/js/jquery.js’></script>

　　　　<script type=‘text/javascript’ src=‘js/jquery.popovercard.js’></script>

　　　　<a  data-obj_id=‘21‘  data-obj_type =user id=‘test_header’></a>  // data-popover_id=‘21’此中21是主键的值

　　　　<script type=‘text/javascript’>

　　　　￥（function（）{

　　　　￥（＃ test_header ）.popovercard（）;

　　　　}）;

　　　　</script>

　　　　//此中， needParam 默认也是true.若是今后想用到prod的url，改变data-obj_type=‘prod’就可以了

举例二：应用外部自定义URL　　

       <script type=‘text/javascript’ src=‘/js/jquery.js’></script>

　　　　<script type=‘text/javascript’ src=‘js/jquery.popovercard.js’></script>

　　　　<a  data-obj_id=‘21‘  data-url=/getsm/sm？id= id=‘test_header’></a>  // data-popover_id=‘21’此中21是主键的值

　　　　<script type=‘text/javascript’>

　　　　￥（function（）{

　　　　￥（＃ test_header ）.popovercard（）;

　　　　}）;

　　　　</script>

　　//其实就是给一个data-url即可。若是不须要参数，再加data-needParam=false，删掉data-obj-id即可。

最后补充申明：

参数的设置，也可以再popovercard实例化的时辰设置，结果一样

例如：

 <a  id=‘test_header’ data-obj_id=‘12’ data-obj_type=‘prod’ ></a>

<script type=‘text/javascript’>

￥（function（）{

￥（＃ test_header ）.popovercard（）;

}）;

</script>

等同于：

<a  id=‘test_header’></a>

<script type=‘text/javascript’>

￥（function（）{

￥（＃ test_header ）.popovercard（{

    obj_type：‘prod’， obj_id=‘12’

}）;

}）;

</script>

迎接转载，原文地址:http://www.cnblogs.com/wangmy/p/3144723.html ，转载请注明地址，感谢！

读书，不要想着实用，更不要有功利心。读书只为了自身的修养。邂逅一本好书如同邂逅一位知己，邂逅一个完美之人。有时心生敬意，有时怦然心动。仿佛你心底埋藏多年的话，作者替你说了出来，你们在时光深处倾心相遇的一瞬间，情投意合，心旷神怡。

分享到：

相关文章

按版本划分

按功能划分

企业管理软件

Jquery 类似新浪微博，鼠标移到头像，用浮动窗口显示用户信息，已做成一个jquery插件