上面的地方註釋

我需要做的是在文本的某些區域放置一些註釋。這裏是我的代碼

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（這是一個更大的計劃的一部分），我不能使用

位置：絕對

是否有標籤左邊偏移量來計算正確的方式？

來源

2013-06-24 alkis

你應該提供的jsfiddle –

我做它現在。 – alkis

完成。在開始時檢查 – alkis

試試這個

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>'); 
    }); 
});

來源

2013-06-24 12:02:48

你爲什麼要發佈另一個答案？只需更新你已有的那個。另外我需要它們在下面的文字中。此外，我真的認爲這種解決方案只適用於這種情況。 – alkis

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

這種方式幾乎和預期的一樣。它會做一些調整。日Thnx。 Upvoted和接受。 – alkis

上面的地方註釋

回答

相關問題