Включение заголовков столбцов в списки треков в приложениях Spotify

Question

Я работал над приложением Spotify, которое отображает список треков, используя такой код:

var tpl = new models.Playlist();
var tempList = new views.List(tpl);
body.document.appendChild(tempList.node);
tpl.add(track1);
tpl.add(track2);
...
tpl.add(trackn);

Однако при этом отображается только содержимое столбцов и не отображаются заголовки (дорожка, исполнитель, альбом и т. Д.). В идеале я хочу включить их, так как рекомендации по пользовательскому интерфейсу говорят: «Для лучшего пояснения, пожалуйста, добавьте заголовок описания столбцов в свой треклист».

Существует ли стандартный способ включения этих заголовков, или для этого требуется что-то нестандартное (в таком случае я думаю, что было бы сложно выровнять их точно по столбцам)?

Answer 1

Вы должны быть в состоянии ограничить до определенного размера.Используйте инспектор, чтобы выяснить все имена классов, а затем установите для каждого поля определенную ширину, тогда вы сможете поместить div над списком с такими же именами классов и текстом заголовка.

Например:

.sp-track-field-name { width: 150px; }

Затем

<div class="list-header">
    <span class="sp-track-field-name">Title</span>
</div>
<div id="playlist" />

Где playlist - узел, к которому вы присоединяете представление списка.

В противном случае используйте javascript для полученияфактическая ширина столбцов и установить ее программно