我不是在问如何生成它,而是在问如何格式化它。是否有任何一组用于此目的的字符?我直观的方法是使用具有以下值的选项:
master
|-- foo 1
|-- foo 2
|-- bar 1
如果你想用一个 select 元素来做,并且你不需要超过两个级别,那么你可以使用optgroup
.
CSS 样式是有限的。据我所知,对于它select
本身,您可以更改诸如color
, background
, border
, font
,之类的东西text-align
。
对于optgroup
and option
,你可以改变......好吧,同样的事情。您还可以使用不同的样式设置所选选项[selected] {/*styles*/}
。你不能改变padding
或margin
......这样的事情。并且尝试嵌套optgroup
s 也不起作用。
你可以做什么:你可以对不同optgroup
的 s 和option
s 设置不同的样式(使用类、nth-child、属性选择器)。
如果您需要很多级别,那么使用嵌套列表可能会更好。
<ul>
<li>master
<ul>
<li>foo 1</li>
<li>foo 2
<ul>
<li>bar 1</li>
</ul>
</li>
</ul>
</li>
</ul>
如果您想使用 javascript 或 jQuery 来操作select
列表,这是我的解决方案
<select name="hierarchies">
<option class="level_1">Computer Science</option>
<option class="level_2">Java</option>
<option class="level_3">Martin Fowler</option>
<option class="level_3">Ian Galloway</option>
<option class="level_1">Computer Engr</option>
<option class="level_2">C#</option>
<option class="level_3">John Skeet</option>
<option class="level_3">Phil Haack</option>
<option class="level_3">Marc Garvel</option>
<option class="level_1">C</option>
</select>
然后使用 jQuery 或 JavaScript 根据关卡重新格式化内容
$(document).ready(
function(){
$('.level_2').each(
function(){
$(this).text('------'+$(this).text());
}
);
$('.level_3').each(
function(){
$(this).text('---------'+$(this).text());
}
);
}
);
结果屏幕
方框图字符或多或少是出于这样的目的。至少,你会使用 U+251C BOX DRAWINGS LIGHT VERTICAL 和 RIGHT “├” 和 U+2500 BOX DRAWINGS LIGHT HORIZONTAL“─”。例如,
<select>
<option>master
<option> ├─ foo 1
<option> ├─ foo 2
<option> ├─ bar 1
</select>
但是,很难使符号很好地对齐。使用上面的不间断空格是一个粗略的工具,最重要的是,字符宽度会有所不同——所以你可以考虑使用类似的 CSS 规则
select, option { font-family: Consolas, monospace }
以获得更可预测的渲染。