Question

我需要做的是在一些文本上添加一些注释。这是我的代码

HTML

<!DOCTYPE html>
<html> 
<head>  

    <link rel="stylesheet" href="css/demo.css" />

    <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="js/demo.js"></script>
</head>
<body>
    <div class="dialog-container">
        <div class="annotation-head"></div>
        <div class="annotation-segment">
            <span class="marker" data-anno-id="0">This is a</span> 
            <span class="marker" data-anno-id="1">sample</span> 
            text
            <span class="marker" data-anno-id="2">another one</span> 
            text
            <span class="marker" data-anno-id="3">one mooooorreee</span> 
        </div>
    </div>  
</body>
</html>

的Javascript

String.prototype.width = function(font) {

  var f = font || '12px arial',
      o = $('<div>' + this + '</div>')
            .css({'position': 'absolute', 'float': 'left', 'white-space': 'nowrap', 'visibility': 'hidden', 'font': f})
            .appendTo($('body')),
      w = o.width();

  o.remove();

  return w;
}

$(document).ready(function() {

    var annos = ['first', 'second', 'third', 'forth']; // your annotation data

    $('.marker').each(function () {
        var $t = $(this),
            pos = parseInt($t.attr('data-anno-id')),
            annoStr = annos[pos]; 

        // create an annotation for each marker
        var top = this.offsetTop - 5, 
            left = this.offsetLeft + ($t.width() - annoStr.width())/2,
            width = $t.width(),
            style = 'style="top:' + top + 'px; left:' + left + 'px;"';

        $('.annotation-head').append('<span class="anno label" ' + style + '>' + annoStr + '</span>');
    });
});

CSS

.dialog-container {
    width: 600px;
    height: 200px;
    border-style: solid;
    border-width: 1px;
    border-color: black;
    border-radius: 10px;
    padding-left: 5px;
}

.annotation-head {
    padding-top: 7px;
}

.annotation-segment, .annotation-head {
    position: relative;
}

.marker {
    background: lightgreen;
}

.anno {
    position: relative;
    text-align: center;
}

.label {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;

    position: relative;
    display: inline-block;
    padding: 2px;
    font-size: 11.844px;
    font-weight: bold;
    line-height: 14px;
    color: #ffffff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    white-space: nowrap;
    vertical-align: baseline;
    background-color: #999999;
}

我想我差不多了。问题是，因为我使用不同的div作为注释而不同于实际文本我不能将注释放在右边的上方。它适用于第一个注释（将标签放在下面文本的中间），但之后就会被破坏。我需要有不同的div（这是一个更大的程序的一部分），我不能使用

位置：绝对

有没有办法计算标签的左右偏移？

Answer 1

试试这个

http://jsfiddle.net/jPYgM/6/

.dialog-container {
    width: 600px;
    height: 200px;
    border-style: solid;
    border-width: 1px;
    border-color: black;
    border-radius: 10px;
    padding-left: 5px;
}

.annotation-head {
    padding-top: 7px;
}

.annotation-segment, .annotation-head {
    position: relative;
}

.marker {
    background: lightgreen;
}

.anno {
    position: relative;
    text-align: center;

}

.label {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;

    display: inline-block;
    padding: 2px 0 ;
    font-size: 11.844px;
    font-weight: bold;
    line-height: 14px;
    color: #ffffff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    white-space: nowrap;
    vertical-align: baseline;
    background-color: #999999;
}

    String.prototype.width = function(font) {

  var f = font || '12px arial',
      o = $('<div>' + this + '</div>')
            .css({'position': 'absolute', 'float': 'left', 'white-space': 'nowrap', 'visibility': 'hidden', 'font': f})
            .appendTo($('body')),
      w = o.width();

  o.remove();

  return w;
}

$(document).ready(function() {

    var annos = ['first', 'second', 'third', 'forth']; // your annotation data

    $('.marker').each(function () {
        var $t = $(this),
            pos = parseInt($t.attr('data-anno-id')),
            annoStr = annos[pos]; 
        var total_width=0;
        $('.annotation-head .anno').each(function(){
        total_width += $(this).width();
        })
        // create an annotation for each marker
        var top = this.offsetTop - 5, 
            left = this.offsetLeft -total_width,
            width = $t.width(),
                style = 'style="top:' + top + 'px; left:' + left + 'px;width:'+width +'px;"';

        $('.annotation-head').append('<span class="anno label" ' + style + '>' + annoStr + '</span>');
    });
});

将注释放在跨度上方

1 个答案: