将注释放在span上方 [英] Place annotation above span
本文介绍了将注释放在span上方的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我需要什么要做的是在文本的某些区域放置一些注释。
这里是我的代码
HTML
<！DOCTYPE html>
< html>
< head>
< link rel =stylesheethref =css / demo.css/>
< script type =text / javascriptsrc =js / jquery-1.9.1.min.js>< / script>
< script type =text / javascriptsrc =js / demo.js>< / script>
< / head>
< body>
< div class =dialog-container>
< div class =annotation-head>< / div>
< div class =annotation-segment>
< span class =markerdata-anno-id =0>这是< / span>
< span class =markerdata-anno-id =1>样本< / span>
text
< span class =markerdata-anno-id =2>另一个< / span>
text
< span class =markerdata-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'：' （'body'）），
w = o。宽度（）;
o.remove（）;
return w;
$ b $（document）.ready（function（）{
var annos = ['first'，'second'，'third'，'forth '）; //您的注释数据
$（'。marker'）。each（function（）{
var $ t = $（this），
pos = parseInt （$ t.attr（'data-anno-id'）），
annoStr = annos [pos];
//为每个标记创建一个注释
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;
背景颜色：＃999999;
}
我想我快到了。问题是，因为我使用不同的div作为注释，而实际的文本不同，所以我不能将注释放在正确的跨度之上。它适用于第一个注释（将标签置于下方文本的中间），但在此之后被破坏。
我需要有不同的div（这是一个更大的程序的一部分），我不能使用
position：absolute
有没有一种方法可以计算标签的右侧偏移？
解决方案
试试这个
.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;
背景颜色：＃999999;
}
String.prototype.width = function（font）{
var f = font || '12px arial'，
o = $（'< div> + this +'< / div>'）
.css（{'position'：'absolute'，'float'：' （'body'）），
w = o。宽度（）;
o.remove（）;
return w;
$ b $（document）.ready（function（）{
var annos = ['first'，'second'，'third'，'forth '）; //您的注释数据
$（'。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（）;
}）
//为每个标记创建一个注解
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>'）;
}）;
}）;
What I need to do is place some annotation on some spans of text. Here is my code
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;
}
I think I'm almost there. The problem is, because I'm using different div for the annotation and different for the actual text I can't place the annotation above the right span. It works right for the first annotation (places the label in the middle of the text below), but after that is ruined. I need to have different divs (this is part of a bigger program) and I can't use
position: absolute
Is there a way to calculate the right left offset for the labels?
解决方案
try this
.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>');
});
});
这篇关于将注释放在span上方的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
