JQuery мобильное название позиции с кнопкой - PullRequest
Новая
       14

JQuery мобильное название позиции с кнопкой

3 голосов
/ 29 ноября 2011

У меня есть простое приложение, которое я запускаю на iPhone (iOS 5), которое неправильно определяет размер и расположение кнопки «Назад» и текста заголовка. Текст заголовка оказывается под кнопкой. Я предполагаю, что jQuery Mobile не определяет размер / положение вещей, как ожидалось, из коробки ...

После чего текст заголовка обрезается и начинается справа от кнопки «Назад». Справа от заголовка не будет другой кнопки, поэтому хорошо, если она перейдет в правую часть страницы. 

    <!DOCTYPE html>
    <html>
        <head>
            <title>Page Title</title>
            <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css"/>        
            <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
            <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>    </head>
        <body>
            <div data-role="page">
                <div data-role="header">
                    <a data-icon="arrow-l" data-rel="back">A long button</a>
                    <h1>A very very very long title</h1>
                </div>

                <div data-role="content">
                    <p>Page content goes here.</p>   
                </div>

                <div data-role="footer">
                    <h4>Page Footer</h4>
                </div>
            </div>
        </body>
    </html>

Работоспособный пример: http://jsfiddle.net/5n8WN/

Я посмотрел на этот ответ , но то, что я попробовал, не дало мне то, что я хотел.

Ответы [ 2 ]

3 голосов
/ 29 ноября 2011

Причина, по которой ваш заголовок покрывается, заключается в том, что справа / слева от тега H1 имеется поле 90px, а кнопка "Назад" больше 90px. Вы можете изменить правила CSS для класса .ui-title, чтобы исправить это: 

.ui-title {
    margin     : 0.6em 1em 0.8em 140px !important;
    text-align : left !important;
}

Вот jsfiddle: http://jsfiddle.net/jasper/5n8WN/1/

2 голосов
/ 29 ноября 2011

Конфигурации пользовательских заголовков
Если вам нужно создать заголовок, который не соответствует конфигурации по умолчанию, просто оберните ваш пользовательский стилизованная разметка в контейнере div внутри контейнера заголовка и плагин не будет применять автоматическую логику кнопок, чтобы вы могли писать собственные стили для размещения контента в вашем заголовке.

Также возможно создание пользовательских баров без использования заголовка. Роль данных вообще. Например, начните с любого контейнера и добавьте класс ui-bar, чтобы применить стандартное заполнение панели и добавить класс ui-bar-b назначить стили образца панели из вашей темы («b» может быть любым образец письма).

Eample: 

<div class="ui-bar ui-bar-b">
    <h3>I'm just a div with bar classes and a <a href="#" data-role="button">Button</a></h3>
</div>
...