jQuery Mobile - Footer - navbar - при рендеринге отображается как три столбца и две строки сетки - PullRequest
Новая
       12

jQuery Mobile - Footer - navbar - при рендеринге отображается как три столбца и две строки сетки

1 голос
/ 11 октября 2011

Нижний колонтитул страницы добавлен как фиксированный значок на основе навигационной панели.но когда дело доходит до отображения, naevbar преобразуется в макет сетки.то есть три столбца и два ряда сетки.

Следующий скрипт, который я использовал для нижнего колонтитула nevBar, 

    <div data-role="footer" class="nav-footer"  data-position="fixed"> 
        <div data-role="navbar" class="nav-footer" data-grid="d"> 
            <ul> 
                <li><a href="#" id="home" data-icon="custom">H</a></li> 
                <li><a href="#" id="messages" data-icon="custom">M</a></li> 
                <li><a href="#" id="activities" data-icon="custom">A</a></li> 
                <li><a href="#" id="trackers" data-icon="custom">T</a></li> 
                <li><a href="#" id="settings" data-icon="custom">S</a></li> 
            </ul> 
        </div> 
    </div>

, но он выглядит следующим образом. 

    <div class="nav-footer ui-bar-a ui-footer ui-footer-fixed fade ui-fixed-overlay" data-position="fixed" data-role="footer" role="contentinfo">
      <div class="nav-footer ui-navbar" data-grid="d" data-role="navbar" role="navigation">
        <ul class="ui-grid-b">
          <li class="ui-block-a">XXX</div>
          <li class="ui-block-b">...</div>
          <li class="ui-block-c">...</div>
          <li class="ui-block-a">...</div>
          <li class="ui-block-b">...</div>
        </ul>
      </div>
    </div>

Содержимое каждого li выглядит следующим образом.

XXX ==> 

 <li class="ui-block-a">
  <a id="home" class="ui-btn ui-btn-icon-top ui-btn-up-a" data-icon="custom" href="#" data-theme="a">
    <span class="ui-btn-inner">
        <span class="ui-icon ui-icon-custom"></span>
        <span class="ui-btn-text">H</span>
    </span>
  </a>
</li>

Мой вывод отображается в виде сетки из двух строк и трех колонок.Пожалуйста, вы можете найти причину.

Ответы [ 2 ]

1 голос
/ 11 октября 2011

Проверьте это: http://jquerymobile.com/test/docs/buttons/buttons-grouped.html

<div data-role="controlgroup" data-type="horizontal"> your items </div>
0 голосов
/ 09 января 2012

Вы указали классы в своих элементах li, чтобы указать, сколько столбцов вы хотите 

<ul class="ui-grid-b">
   <li class="ui-block-a">XXX</div>
   <li class="ui-block-b">...</div>
   <li class="ui-block-c">...</div>
   <li class="ui-block-D">...</div>     <--D here, column 4
   <li class="ui-block-E">...</div>     <--E here, column 5
</ul>

По умолчанию количество столбцов равно трем, поэтому последние два были перенесены в следующий ряд.

...