我正在创建一个类似于SO的标签编辑器,我必须说它工作得很好。唯一的事情是给我一些问题是计算文本框的宽度后,用户选择一个标签。
对于用户添加的每个标签,我都重新计算它旁边的输入字段的宽度,但我似乎不能得到它的正确。
我有两个div彼此相邻。左边的div包含标签,右边的div包含输入字段。
有人能告诉我如何做到这一点,或者告诉我如何计算一个div的宽度?(假设带有标签的div只包含纯文本+删除标签图像)
编辑:我有一个完整的编辑器工作在一个类似的方式,所以做它。我唯一在挣扎的是在用户添加标签(或删除一个)后调整输入字段的大小。
您可能正在寻找这样的东西,尽管非常简单:
演示工作它只是使用标签中的图像来存储删除按钮,并且在文本和图像之间有一个轻微的边距来保持一些空间。标签被浮动,以保持彼此之间的距离。
你可以通过查看源代码找到SO使用的按钮类:
.post-tag, .post-text .post-tag, .wmd-preview a.post-tag {
color: #3E6D8E;
background-color: #E0EAF1;
border-bottom: 1px solid #3E6D8E;
border-right: 1px solid #7F9FB6;
padding: 3px 4px 3px 4px;
margin: 2px 2px 2px 0;
text-decoration: none;
font-size: 90%;
line-height: 2.4;
white-space: nowrap;
}
a.post-tag:hover, .post-text a.post-tag:hover, .wmd-preview a.post-tag:hover {
background-color: #3E6D8E;
color: #E0EAF1;
border-bottom: 1px solid #37607D;
border-right: 1px solid #37607D;
text-decoration: none;
}
你应该能够通过使用jQuery或javascript获得宽度:
//jQuery
var width = $('#yourTag').width(); //or $(this).width();
//javascript
var tag = document.getElementById('yourTag');
var width = tag.width // or tag.clientWidth
你知道你的初始宽度,如果你把你在<span>
或类似的东西中添加的标签包装起来,你可以得到那个标签的宽度。所以每次你添加一个标签时你都要从容器div的初始宽度中减去该标签的宽度。
我不知道这里是不是这样做的,但这似乎是一个很好的方法。