Изображение в мобильном заголовке jQuery - PullRequest
Новая
       3

Изображение в мобильном заголовке jQuery

8 голосов
/ 15 марта 2012

Я пытаюсь добавить изображение в заголовок моей веб-страницы на основе jQuery Mobile.

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

(Проблема *) Между изображением и краем большой разрыв, и он также не выровнен с текстом заголовка. Вот код заголовка: 

<header data-role='header'><h1>My App<img src="my_logo.png" alt="Low resolution logo"class="align-right"/></h1></header>

и вот код CSS для класса align-right: 

.align-right{ 
    float:right; 
    margin-right: 5px;
}

Ответы [ 4 ]

26 голосов
/ 08 октября 2012

Нет необходимости добавлять пользовательские стили или тому подобное. Jquery-Mobile уже имеет встроенные решения для этого. Просто добавьте класс 'ui-btn-left' или 'ui-btn-right' к своему изображению (как будто это кнопка), и все готово. 

<header data-role="header">
<h1>My App</h1>
<img src="my_logo.png" class="ui-btn-right" />
</header>

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

3 голосов
/ 15 марта 2012

Исходя из примера кода, вам необходим пробел между атрибутом alt и атрибутом class.

У вас есть: 

alt="Low resolution logo"class="align-right"

Должно быть: 

alt="Low resolution logo" class="align-right"

Кроме того, вероятно, лучше не иметь тега <img /> внутри вашего элемента <h1>.

Проверьте документы для получения дополнительной информации о пользовательских заголовках: http://jquerymobile.com/test/docs/toolbars/docs-headers.html

1 голос
/ 15 марта 2012

Примерно так должно работать: 

<head>
    <style>
    body{ margin: 0; }
    .align-right{ float:right; margin-right: 0px;}
    </style>
</head>
<body>
<div data-role='header'><h1>My App<img src="my_logo.png" alt="Low resolution logo"class="align-right"/></h1></div>
</body>
0 голосов
/ 07 ноября 2018

В моем случае я использовал ссылку в качестве кнопки в своем заголовке и хотел получить те же результаты, что и в правом верхнем углу. Я также хотел, чтобы к изображению были добавлены дополнительные атрибуты, такие как отсутствие текста, углов, диска и т. Д. Использование только ui-btn-right сломало эти другие атрибуты. Исправление должно было включать как ui-btn, так и ui-btn-right для класса, как показано ниже: 

<a href="#entriesPanel" class="ui-btn ui-btn-right ui-icon-bars ui-btn-icon-notext ui-corner-all ui-alt-icon ui-nodisc-icon">Options</a>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...