Получение кнопки на нижнем колонтитуле в мобильном телефоне Jquery

Question

Мне нужно добавить кнопку с правой стороны нижнего колонтитула. Я добавляю это так

<div data-role="footer" id="ftrMain" name="ftrMain" data-position="fixed">
<h4>Copyright 2011</h4>
<a class="ui-btn-right" data-theme="a"  data-ajax="false" href="/login.php?mode=logout">Logout</a>
</div>

Я получаю кнопку, но она появляется в начале следующей строки. Если я поменяю роль на заголовок, кнопка отлично позиционируется. Даже если я добавлю class = "ui-header" в нижний колонтитул div, все будет в порядке, но тогда просто не будет зафиксирована его позиция. (потому что теперь у него есть стиль ui-footer и ui-header)

Как я могу поместить кнопку в нижний колонтитул в крайнее правое положение, не жертвуя позицией данных? (Мне нужно исправить положение данных)

Answer 1

нижний колонтитул имеет правое поле, установленное по умолчанию на 90 пикселей.Вам нужно переопределить его и заставить два элемента управления плавать, например, так:

<div data-role="footer" id="ftrMain" style="text-align:center" name="ftrMain" 
    data-position="fixed">
    <h4 style="display: inline-block; margin-left: 65px; margin-right: 0">
        Copyright 2011</h4>
    <a class="ui-btn-right" style="margin: 0.4em; float: right" data-theme="a" 
        data-ajax="false" href="/login.php?mode=logout">
        Logout</a>
</div>

PS С точки зрения удобства использования, я бы поместил кнопку «Выход» в верхнем правом углу страницы, а нечем в нижнем колонтитуле.

Answer 2

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

<div data-theme="a" data-role="footer" data-position="fixed" data-id="footer">
    <a class="ui-btn-right" href="/login.php?mode=logout">Logout</a>
    <h3>Copyright 2011</h3>
</div>

(я до сих пор проверял это только в своем браузере на рабочем столе.) Похоже, магия в классе ui-btn-rightСуществует также ui-btn-left.