Ссылки мобильного заголовка Jquery перекрываются длинным текстом - PullRequest
Новая
       13

Ссылки мобильного заголовка Jquery перекрываются длинным текстом

6 голосов
/ 19 июля 2011

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

  <header data-role="header" data-position="fixed">
    <a href="blah" data-icon="back">this is long text</a>
    <h1>page title</h1>
  </header>

Проблема в том, что обратная ссылка часто перекрывает заголовок, если один или оба из них немного длинны. Это, очевидно, происходит только при просмотре на мобильном устройстве с меньшим экраном (по сравнению с iPad) или когда я уменьшаю свой тестовый браузер. Но это выглядит хорошо при тестировании в более широких браузерах. Есть ли встроенный способ jquery, чтобы сделать эту работу? Либо уменьшая размер текста, либо автоматически обрезая текст в зависимости от ширины? Я могу сам урезать текст, но он выглядит глупо при просмотре в более широком браузере (или в альбомном режиме), и ссылки обрезаются без причины.

Любая помощь будет отличной. Спасибо!

UPDATE:

Вы можете проверить это, перейдя к http://jquerymobile.com/demos/1.0a4.1/#docs/toolbars/docs-headers.html

Используйте firebug / inspector, чтобы сделать текст в любой из ссылок панели инструментов длиннее и смотреть, как они перекрывают свои заголовки, когда браузер имеет меньшую ширину.

Ответы [ 3 ]

5 голосов
/ 13 ноября 2012

У меня также возникли проблемы с длинным заголовком и столкновением кнопок.По умолчанию заголовок центрируется по всей ширине заголовка, а кнопки расположены по бокам абсолютно точно.

Я решил это, сделав следующие настройки CSS в моей таблице стилей, загруженной послеjQuery Mobile's: 

.ui-header { 
    display: table;
    width: 100%;
}

.ui-header .ui-title {
    display: table-cell; 
    width: 100%;
    line-height: 2.5em;
}

.ui-header .ui-btn { 
    display: table-cell; 
}

.ui-header .ui-btn-left, .ui-header .ui-btn-right {
    position: static;
    top: 0;
}

Это центрирует заголовок в пространстве после кнопок в заголовке. Вот демонстрация нормального поведения , а вот пример с примененным выше исправлением .Чтобы увидеть разницу, измените размер браузера / представления.Мне известно, что отображение: {table | table-cell} не поддерживается в IE 7.

0 голосов
/ 19 июля 2011

Есть несколько вещей, которые вы можете попробовать. 

 <header data-role="header" data-position="fixed">

"header" и "data-role =" header "" могут конфликтовать друг с другом. Попробуйте сделать это div

Кроме того, если вы используете какой-либо CSS для стилизации этих заголовков, попробуйте использовать проценты и EMS для высоты. Это гарантирует, что заголовок будет выглядеть практически одинаково для каждого мобильного браузера (хотя некоторые действительно заставляют его выглядеть по-разному, например, как Opera Mobi)

Вот пример: 

.ui-header .ui-title, .ui-footer .ui-title {
    display: block;
    font-size: 1em; //Font size is a height, use ems
    margin: 0.6em 90px 0.8em;
    outline: 0 none !important;
    width: 50%; //For widths use %
}

Если это не сработает, попробуйте указать конкретный height для каждого элемента в заголовке. Для некоторых телефонов (особенно для iPhone) эти div будут перекрываться или обрезаться, если не указана конкретная высота. 

<a href="blah" data-icon="back" id = "link">this is long text</a>
<h1>page title</h1>

#link
{
   height: 10px; //(Or you can use ems, but this may not be needed)
}

Если это не решит проблему, то вам может понадобиться уменьшить размер шрифта, например. Эта проблема связана с мобильными телефонами, особенно с мобильными телефонами JQuery, которые не поддерживают подавляющее большинство мобильных телефонов (у HTC, Blackberry и т. Д. Есть некоторые небольшие проблемы, подобные этим, с которыми вы можете столкнуться)

Редактировать Еще одно примечание: Обычно оно работает лучше, если вы пытаетесь переиграть JQuery Mobile CSS, а не пытаться применить свою собственную. Под этим я подразумеваю: 

<header data-role="header" data-position="fixed" id ="header">

.ui-header {
 //CSS
}

обычно будет работать лучше, чем 

#header {
  /CSS
}
0 голосов
/ 19 июля 2011

Это обсуждалось на стеке потока. Следующая ссылка предлагает множество различных стратегий для усечения длинных строк:

Усечение длинных строк с помощью CSS: еще возможно?

...