web前端:map area的popover解决方案

最近做一个页面掉到奇怪的坑里,使用bootstrap 2.x的popover插件,可是popover出现的地方不对,而且firefox和chrome、ie各自的表现还不一样,firefox是在父元素img的周围,稍微调调位置还能正常显示,chrome和ie里面就整个页面乱跑了,完全无解。

后来研究了一下,原来是问题出在map area上面,图片热点map area是设计切图以及一些将图片输出为html的常见手段,但是浏览器对area的支持并不完善,无法获取area的位置和尺寸,于是popover自然也不能确定该元素的位置,只能到处乱跑了。

网上有人写了一个用js获取area的位置和尺寸的插件,我将其扩展了一下,现在可以很方便的为area调用bootstrap的popover插件了。

以下是代码:

/* ===========================================================
 * area-popover.js v1.0.0
 * author: pockry
 * dependent: jQuery 1.x, Bootstrap 2.x(include the tooltip & popover plugin)
 * ========================================================== */


var getMapAreaBox = function (area) {
    // parse
    var ret = { left: 0, top: 0, width: 0, height: 0 };
    var shape = area.attr('shape').toLowerCase(), coords = area.attr('coords').split(',');
    for (var len = coords.length, i = 0; i < len; i++) { coords[i] = parseInt(coords[i], 10); }
    // generate
    if (shape === 'rect' || shape === 'rectangle') {
        ret.left = Math.min(coords[0], coords[2]);
        ret.top = Math.min(coords[1], coords[3]);
        ret.width = Math.abs(coords[2] - coords[0]);
        ret.height = Math.abs(coords[3] - coords[1]);
    } else if (shape === 'circ' || shape === 'circle') {
        var radius = coords[2], x = coords[0], y = coords[1];
        ret.left = (x - radius);
        ret.top = (y - radius);
        ret.width = (radius * 2);
        ret.height = (radius * 2);
    } else if (shape === 'poly' || shape === 'polygon') {
        var x = [], y = [];
        for (var len = coords.length, i = 0; i < len; i++) {
            if (i % 2 === 0) {
                x.push(coords[i]);
            } else {
                y.push(coords[i]);
            }
        }
        ret.left = Math.min.apply(null, x);
        ret.top = Math.min.apply(null, y);
        ret.width = Math.max.apply(null, x) - ret.left;
        ret.height = Math.max.apply(null, y) - ret.top;
    }
    // fix
    var map = area.closest('map');
    if (map.length > 0) {
        var img = $('img[usemap~="#' + map.attr('name') + '"]');
        if (img.length === 0) { img = $('img[usemap~="#' + map.attr('id') + '"]'); }
        var pos = img.offset();
        if (pos) {
            ret.top += pos.top;
            ret.left += pos.left;
        }
    }
    // ret
    return ret;
};
var    areaPopover = function(areaClass,place){
    var areabox=$("."+areaClass);
    var box=getMapAreaBox(areabox);
    
    switch(place){
        case 'top':
            var boxX=box.left+box.width/2-$('.popover').width()/2;
            var boxY=box.top-$('.popover').height()-14;
            $('.popover').offset({top:boxY,left:boxX});
            break;
        case 'left':
            var boxX=box.left-$('.popover').width()-15;
            var boxY=box.top+box.height/2-$('.popover').height()/2;
            $('.popover').offset({top:boxY,left:boxX});
            break;
        case 'bottom':
            var boxX=box.left+box.width/2-$('.popover').width()/2;
            var boxY=box.top+box.height+11;
            $('.popover').offset({top:boxY,left:boxX});
            break;
        case 'right':
            var boxX=box.left+box.width+11;
            var boxY=box.top+box.height/2-$('.popover').height()/2;
            $('.popover').offset({top:boxY,left:boxX});
            break;
    };
};    

这个插件依赖于jQuery和Bootstrap,建议用jQuery 1.x和Bootstrap 2.x,Bootstrap需要引入其Tooltip和Popover插件。

然后在页面上就只需要引入该插件并设置一些参数了:

$(function(){
            var options={
                animation:true,
                trigger:'hover'
            };
            $('area').popover(options);
            
          
            
            $('.areaClass').hover(function(){areaPopover("areaClass","place");});

            
        });

这段代码其中上半部分是bootstrap popover的参数,下半部分就是我们的插件,里面有两个参数:

areaClass:你为该area设置的Class;

place:就是popover的四个方向,取值为 top|left|bottom|right

至于area的设置,则和bootstrap的popover一样:

<area shape="circle" coords="46,84,33" href="#7" data-placement="left" title="移动阅读大战" data-content="以网易为代表的传统门户在移动时代也不好过,虽然推出了新闻客户端,但今日头条、Zaker等新闻阅读应用也正在侵蚀它们的生存空间。" class="wangyi" />

 

插件效果:

posted @ 2013-12-25 23:57 pockry 阅读(...) 评论(...) 编辑 收藏