Где разместить элементы HTML 5 при использовании SPRY? - PullRequest
Новая
       11

Где разместить элементы HTML 5 при использовании SPRY?

1 голос
/ 10 июня 2011

Я создаю веб-сайт с использованием HTML 5 разметки, но столкнулся с проблемой относительно того, где разместить элемент NAV - потому что я использую SPRY 'Панель с вкладками 'для навигации и содержание: 

<header>
 <div id="TabbedPanels1" class="TabbedPanels">
  <ul class="TabbedPanelsTabGroup">
   <li class="TabbedPanelsTab" tabindex="0">Home</li>
   <li class="TabbedPanelsTab" tabindex="0">Profile/li>
   <li class="TabbedPanelsTab" tabindex="0">Contact</li>
  </ul>
 <div class="TabbedPanelsContentGroup">
  <div class="TabbedPanelsContent">Content 1</div>
  <div class="TabbedPanelsContent">Content 2</div>
  <div class="TabbedPanelsContent">Content 3</div>
 </div>
 </div>

Я думал, что лучшее место для вставки элемента NAV - это обертывание элемента UL , но это нарушает панель вкладок SPRY (возможно, я могу просто исправить это, изменив некоторые пути к файлам в CSS?).

Кроме того, поскольку основное содержимое сайта будет размещаться в областях «Содержимое» панели с вкладками, мне интересно, каков наилучший подход к созданию этого сайта в отношении NAV, ARTICLE и т. Д., Поэтому что семантически правильно?

Возможно, я поступаю неправильно?

1 Ответ

0 голосов
/ 14 сентября 2011

Я не знаком со SPRY, но вы, вероятно, правы в том, что вам нужно будет редактировать CSS, если вы хотите иметь больше семантической разметки.

Предполагая, что каждая "вкладка" - это отдельная статья, вот как я бы это отметил: 

<div id="TabbedPanels1" class="TabbedPanels">
    <nav>
        <ul class="TabbedPanelsTabGroup">
            <li class="TabbedPanelsTab" tabindex="0">Home</li>
            <li class="TabbedPanelsTab" tabindex="0">Profile/li>
            <li class="TabbedPanelsTab" tabindex="0">Contact</li>
        </ul>
    </nav>
    <div class="TabbedPanelsContentGroup">
        <article class="TabbedPanelsContent">Content 1</article>
        <article class="TabbedPanelsContent">Content 2</article>
        <article class="TabbedPanelsContent">Content 3</article>
    </div>
</div>

Это не большое изменение, но оно добавляет по крайней мере некоторую лучшую семантику к разметке, в то же время оставляя большую часть структуры нетронутой, поэтому нет необходимости вносить МАСИВНЫЕ изменения SPRY Framework код.

...