Выравнивание заголовка мобильного заголовка Jquery - PullRequest
6 голосов
/ 31 августа 2011

Просто интересно, знает ли кто-нибудь, как переопределить поведение по умолчанию в Jquery mobile, чтобы выровнять заголовок заголовка слева и сохранить тот же формат.Я не могу заставить его выстроиться в линию.Вот что у меня есть:

<div class="ui-body-x" data-role="header" data-position="fixed">
  <div class="ui-grid-x">
    <h1 class="ui-link">Add New Record</h1>
    <div data-type="horizontal" style="top:5px;position:absolute;float:right;z-index:10;display:inline;" align="right" class="ui-btn-right"> 
        <a href="www.google.com" data-role="link" data-icon="settings" data-ajax="false">Cancel</a>
        <a href="www.google.com" class="ui-btn-up-x" data-role="button" data-icon="" data-ajax="false">Submit</a> 
    </div>
  </div>                                    
</div><!-- /header -->

Теперь это успешно перемещает заголовок влево, но текст не сохраняет тот же формат.Это становится огромным, и расстояние все неправильно.У кого-нибудь был какой-либо успех в выравнивании заголовка?Заранее спасибо.

Извините, если это нубский вопрос.Я только сейчас перехожу в Интернет из нативных мобильных приложений ...

Ответы [ 2 ]

10 голосов
/ 01 сентября 2011

Глядя на расположение объектов в заголовке, они используют абсолютное позиционирование для кнопок и выравнивание текста для заголовка.Вы можете выровнять текст по левому краю и изменить положение левой кнопки следующим образом (конечно, вы должны добиться этого, правильно установив атрибуты class вместо style):

<div data-role="header" data-position="fixed" >
    <h1 style="text-align:left; margin-left:10px;">Page title</h1>
    <a href="www.google.com" data-icon="delete" style="left:auto; right:120px;">Cancel</a>
    <a href="www.google.com" data-icon="check" data-theme="b">Submit</a>
</div><!-- /header -->
0 голосов
/ 07 апреля 2015

Единственное, что вам нужно сделать - это обернуть ваш h1-тег в тег div, который не является div data-role = "header". Ваш код должен выглядеть следующим образом ...

<section id="firstpage" data-role="page">
    <div data-role="header">
      <div>
        <h1>Grade Calculator</h1>
      </div>
    </div><!-- end data-role = header -->
 </section>

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

 [data-role="header"] h1 {
    margin-left: 10px;
}

Это даст вам левое поле слева.

...