Bild in jQuery Mobile Kopfzeile

Question

Bild in jQuery Mobile Kopfzeile

Gefragt el 15 de Marsch, 2012: Wann wurde die Frage gestellt
36915 Ansichten: Anzahl der Besuche der Frage
4 Antworten: Anzahl der Fragenantworten
Gelöst: Aktueller Status der Frage

Ich versuche, ein Bild in der Kopfzeile meiner jQuery Mobile basierten Webseite hinzuzufügen.

Ich möchte, dass das Bild am rechten Rand ausgerichtet wird und verwende zu diesem Zweck CSS. Aber die Ergebnisse sind nicht zufriedenstellend.

(Problem*)Es gibt eine große Lücke zwischen dem Bild und dem Rand und es ist auch nicht mit dem Kopfzeilentext ausgerichtet.

Hier ist der Header-Code:

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

und hier ist der CSS-Code für die Klasse align-right:

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

Gefragt el 15 de Marsch, 2012 von user1107888

Answer 1

4 Antworten

Answer 2

26voto

Gilly Punkte 8664

Es ist nicht nötig, benutzerdefiniertes Styling oder ähnliches hinzuzufügen. Jquery-Mobile hat bereits integrierte Lösungen für diese. Fügen Sie einfach die Klasse "ui-btn-left" oder "ui-btn-right" zu Ihrem Bild hinzu (als ob es eine Schaltfläche wäre) und Sie sind fertig.

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

Ich weiß, dass die Frage schon oft gestellt wurde, aber ich dachte, das könnte denen helfen, die noch nach Lösungen suchen. Außerdem wurde die Frage nicht als beantwortet eingestellt.

Beantwortet el 8 de Oktober, 2012 von Gilly (8664 Punkte )

Answer 3

3voto

shanabus Punkte 12764

Ausgehend von Ihrem Codebeispiel benötigen Sie ein Leerzeichen zwischen den alt class Attribut.

Sie haben:

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

Sollte sein:

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

Außerdem ist es wahrscheinlich besser, die <img /> Tag innerhalb Ihrer <h1> Element.

Weitere Informationen zu benutzerdefinierten Kopfzeilen finden Sie in den Dokumenten: http://jquerymobile.com/test/docs/toolbars/docs-headers.html

Beantwortet el 15 de Marsch, 2012 von shanabus (12764 Punkte )

Answer 4

1voto

greatwitenorth Punkte 2081

So etwas sollte funktionieren:

<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>

Beantwortet el 15 de Marsch, 2012 von greatwitenorth (2081 Punkte )

Answer 5

0voto

S. Costello Punkte 35

In meinem Fall habe ich einen Link als Schaltfläche in meiner Kopfzeile verwendet und wollte das gleiche Ergebnis erzielen, bei dem das Bild in der oberen rechten Ecke angezeigt wird. Außerdem wollte ich, dass dem Bild zusätzliche Attribute hinzugefügt werden, z. B. kein Text, keine Ecken, keine Scheibe usw. Die Verwendung von ui-btn-right allein machte diese anderen Attribute zunichte. Die Lösung war, sowohl ui-btn als auch ui-btn-right in die Klasse aufzunehmen, wie unten gezeigt:

<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>

Beantwortet el 7 de November, 2018 von S. Costello (35 Punkte )

Bild in jQuery Mobile Kopfzeile

Antworten

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by:

Bild in jQuery Mobile Kopfzeile

Antworten

Verwandte Fragen

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by: