Nützliches für die Anzeige von mobilen jQuery Seiten

 

Trennlinien zwischen Items entfernen

Mit dem DirectSmile Cross Media Designer kann man neben der normalen Webseitengestaltung für Kampagnen auch mobile Seiten (mobile pages) erstellen. Der Besucher hat somit die Möglichkeit mit seinem mobilen Gerät auf angepasste Inhalte von Webseiten zuzugreifen.

Platziert man einige Items wie Bilder, Texte oder ein Eingabefeld auf einer mobilen Seite werden vom jQuery Mobile Framework automatisch Trennlinien zwischen den einzelnen Items angezeigt. Diese Linien dienen der optischen Abgrenzung der Items, wenn das mobile Gerät vertikal ausgerichtet ist. Sobald man das Gerät dreht und horizontal hält, verschwinden diese Linien automatisch, da die Items dann für diese Darstellung optimiert ausgerichtet werden. Bei einer vertikalen Ausrichtung können diese Linien jedoch recht störend sein. Um sie zu entfernen, platziert man einfach ein HTML-Item auf einer Seite, in welches man folgendes Script einfügt:

<!-- Script zum Ausblenden der Gruppen Linien -->
<script type="text/javascript">

$('[data-role*="page"]').live("pageshow", function(event, ui) {
$('[class*="ui-br"]').removeClass('ui-br');
});
</script>

 

ohne Skript mit Skript
image image

 

Ränder von platzierten jQuery Items entfernen

Items die auf einer mobilen Seite platziert werden sind grundsätzlich immer mit Rändern versehen. Um diese zu entfernen fügt man auf der mobilen Seite ein CSS Item hinzu und platziert darin den folgenden Code:

.ui-content, .ui-field-contain{
	margin: 0 !important;
	padding: 0 !important;
}

 

ohne CSS mit CSS
image image
Advertisements

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden /  Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden /  Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden /  Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden /  Ändern )

Verbinde mit %s

%d Bloggern gefällt das: