jQuery Mobile mit TYPO3 als HTML5 Template

Di, 08.11.2011 - 20:50 -- Daniel Espendiller

Will man Webseite recht einfach auf mobilen Geräte wie iPhone, iPad, Android und co. darstellen, so nimmt jQuery Mobile hier viel Arbeit ab, wenn man sich im Gegensatz dazu mit Responsive Design beschäftigt. Alle HTML Elemente werden bestmöglich über jQuery für die entsprechenden Geräte aufbereitet, so dass die Webseite auf einem Smartphone dem Look-and-Feel einer nativen App des jeweiligen Gerätes sehr nahe kommt inklusive Home Button.

Eigentlich war dieses TYPO3 Template für den Themeforest Market gedacht, genau wie TYPO3 Template inklusive Typoscript zum Customizing wurde es ablehnt.

This is merely a reskin of the original jQuery mobile skin. We're looking for something a little more original. Even a little more customization to make this stand apart will do. Right now, it's too apparent that this is based on jQ mobile.

Nun gibt es das Paket (JTSimple) hier als t3d Export inklusive PDF Dokumentation zum Download. Eine Demo gibt es noch unter demo.espend.de/jtsimple solange die TYPO3 Installation noch aktiv ist.

Einen interessanten Artikel zu TYPO3 und jQuery Mobile gibt es dazu noch in der t3n: Mobile Websites mit jQuery Mobile und TYPO3.

Updates (Januar, 2012):

Da doch einige Frage und Features angefragt wurden habe ich das Template etwas modifiziert und eine neue Version hier angehangen.

  • Update auf jQuery Mobile 1.0
  • 4 unterschiedliche Menütypen, auswahl über Konstanten
  • TYPO3 4.6 "Scriptmerger"

Features

  • kompletter Seiten mit alle Inhalten und fertigem Typoscript
  • Dokumentation als PDF
  • exportierte t3d zum einfachen Import in eine TYPO3 Installation
  • einfaches Header Bild
  • flaches Menü im jQuery Mobile Stil
  • Kopfbereich: Title, Home, Zurück, Logo
  • Apple Home Screen und Touch Icon
  • Content ToggleBox
  • Auswahl aller verfügbaren jQuery Themes über eine Konstante
  • Content Layouts: für Tabellen

Typoscript

Typoscript Konstanten

page {
 
  # cat=basic/xxx/010; type=string; label= string: Title (toolbar) text of page
  title = Your Header
 
  # cat=basic/xxx/010; type=string; label= string: Your Domain and path to ths site
  baseURL = http://demo.espend.de/
 
  # cat=basic/xxx/010; type=file[png,jpg,gif]; label=Logo file: Use this file as logo
  logo.path = fileadmin/templates/mobile/img/dummy_logo.png
 
  # cat=basic/xxx/010; type=int+; label=max image width of logo
  logo.width = 250
 
  # cat=basic/xxx/010; type=options[a,b,c,d,e]; label= jQuery Mobile: Color Theme
  data-theme = a
 
  # cat=basic/xxx/010; type=options[all,nav1,nav2,nav3,nav4]; label= Menutypes
  menu-type = all
}
 
 
path.jquery = fileadmin/jquery
path.template = fileadmin/templates/mobile
 
 
#typo3 4.5 lightbox feature
styles.content.imgtext.linkWrap {
  lightboxEnabled = 1
  lightboxRelAttribute = external
  lightboxCssClass = lightbox
}
 
styles.content.imgtext.linkWrap.width= 480

Typoscript Setup

#devel
[globalVar = TSFE : beUserLogin> 0]
config.no_cache = 0
[global]
 
page = PAGE
page.config {
  xhtml_cleaning = all
  xmlprologue = none
 
  doctype = html_5
 
  language = de
  locale_all = de_DE@euro
 
  disablePrefixComment = 1
 
  inlineStyle2TempFile=1
 
  spamProtectEmailAddresses = 2
  spamProtectEmailAddresses_atSubst = @
  baseURL = {$page.baseURL}
 
  meaningfulTempFilePrefix = 50
 
  sendCacheHeaders = 1
 
  disableImgBorderAttr = 1  
 
  // TYPO3 4.6 internal scriptmerger
  minifyCSS = 1
  minifyJS = 1
 
  concatenateCss = 1
  concatenateJs = 1    
 
}
 
 
page.includeCSS {
  file1 = {$path.jquery}/jquery.mobile/jquery.mobile-1.0.min.css
  file2 = {$path.template}/style.css
}
 
 
page.includeJS {
  file1 = {$path.jquery}/jquery.min.js
  file2 = {$path.jquery}/jquery.mobile/jquery.mobile-1.0.min.js
}
 
page.headerData.72 = TEXT
page.headerData.72.value (
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="apple-touch-icon" href="{$path.template}/apple-touch-icon.png"/>
  <link rel="apple-touch-icon-precomposed" href="{$path.template}/apple-touch-icon.png" />
  <link rel="apple-touch-startup-image" href="{$path.template}/apple-touch-icon-load.png">
)
 
 
 
 
#set logo
temp.logo = IMAGE
temp.logo {
  file = {$page.logo.path}
  file.width= {$page.logo.width}
 
  imageLinkWrap = 1
  imageLinkWrap.enable = 1
  imageLinkWrap.typolink {
    parameter.data = leveluid:0
    title = {$page.title}
    forceAbsoluteUrl = 1
  }
 
  altText = {$page.title}
}
 
# logo and menu should only show on frontpage
page.10.subparts.LOGO = TEXT
temp.menu = COA
 
[treeLevel = 0]
page.10.subparts.LOGO < temp.logo
 
 
temp.menulib.nav1 = HMENU
temp.menulib.nav1 {
  1 = TMENU
  1 {
    noBlur = 1
    expAll=1
    wrap.insertData = 1
    wrap =  <ul class="navi1" data-role="listview" data-inset="true" data-theme="{$page.data-theme}" data-dividertheme="{$page.data-theme}"><li data-role="list-divider">Navigation</li>|</ul>
    NO.wrapItemAndSub = <li>|</li>
  }
}
 
temp.menulib.nav2 = HMENU
temp.menulib.nav2 {
  1 = TMENU
  1 {
    noBlur = 1
    expAll=1
    wrap.insertData = 1
    wrap =  <ul class="navi2" data-role="listview" data-inset="true" data-theme="{$page.data-theme}" data-dividertheme="{$page.data-theme}"><li data-role="list-divider">Nav2</li>|</ul>
    NO.wrapItemAndSub = <li>|</li>
 
    IFSUB=1
    IFSUB{
      wrapItemAndSub = <li class="submenu">|</li>
    }      
 
 
  }
 
 
 
  2 < .1
  2.wrap =<ul data-role="listview" data-inset="true" data-theme="{$page.data-theme}" data-dividertheme="{$page.data-theme}">|</ul>
  #2.NO.wrapItemAndSub = <li class="submenu">|</li>  
 
}
 
temp.menulib.nav3 = HMENU
temp.menulib.nav3 {
  1 = TMENU
  1 {
    noBlur = 1
    expAll=1
    wrap.insertData = 1
    wrap =  <ul class="navi3" data-role="listview" data-inset="true" data-theme="{$page.data-theme}" data-dividertheme="{$page.data-theme}"><li data-role="list-divider">Nav3</li>|</ul>
    NO.wrapItemAndSub = <li>|</li>
  }
 
  2 < .1
  2.wrap =
  2.NO.wrapItemAndSub = <li class="submenu">|</li>
}
 
temp.menulib.nav4 = HMENU
temp.menulib.nav4 {
  1 = TMENU
  1 {
    noBlur = 1
    expAll=1
    wrap.insertData = 1
    wrap = <ul class="navi4" data-role="listview" data-inset="true" data-theme="{$page.data-theme}" data-dividertheme="{$page.data-theme}"><li data-role="list-divider">Nav4</li>|</ul>
    NO.wrapItemAndSub = <li>|</li>
 
    IFSUB = 1
    IFSUB {
      doNotLinkIt = 1
      wrapItemAndSub = <li>|</li>    
    }
 
  }  
 
  2 < .1
  2.wrap =
  2.NO.wrapItemAndSub = <li class="submenu">|</li>
}
 
#temp.menu < temp.menulib.nav4
 
[global]
 
[treeLevel = 0] && [globalVar = LIT:all = {$page.menu-type}]
 temp.menu.10 < temp.menulib.nav1
 temp.menu.20 < temp.menulib.nav2
 temp.menu.30 < temp.menulib.nav3
 temp.menu.40 < temp.menulib.nav4
[global]
 
 
[treeLevel = 0] && [globalVar = LIT:nav1 = {$page.menu-type}]
 temp.menu.10 < temp.menulib.nav1
[global]
 
[treeLevel = 0] && [globalVar = LIT:nav2 = {$page.menu-type}]
 temp.menu.10 < temp.menulib.nav2
[global]
 
[treeLevel = 0] && [globalVar = LIT:nav3 = {$page.menu-type}]
 temp.menu.10 < temp.menulib.nav3
[global]
 
[treeLevel = 0] && [globalVar = LIT:nav4 = {$page.menu-type}]
 temp.menu.10 < temp.menulib.nav4
[global]
 
#remove div wrap around h1-x tags
lib.stdheader.stdWrap.dataWrap >
 
#wrap content elements which can be toggled
temp.wrapcontent = CASE
temp.wrapcontent {
  key.field = section_frame
  default=|
  100 = TEXT
  100.value = <div class="box-content">|</div>
 
  101 < .100
}
 
tt_content.image.20.stdWrap.wrap.cObject < temp.wrapcontent
tt_content.text.20.stdWrap.wrap.cObject < temp.wrapcontent
tt_content.table.20.stdWrap.wrap.cObject < temp.wrapcontent
tt_content.bullets.20.dataWrap.wrap.cObject < temp.wrapcontent
 
 
tt_content.stdWrap.innerWrap.cObject {
  100 < tt_content.stdWrap.innerWrap.cObject.default
  100.15.noTrimWrap = | data-collapsed="true" data-role="collapsible" class="|" |
 
  101 < tt_content.stdWrap.innerWrap.cObject.default
  101.15.noTrimWrap = | data-collapsed="false" data-role="collapsible" class="|" |  
}
 
temp.title = TEXT
temp.title.value = {$page.title}
 
temp.button.home = TEXT
temp.button.home.value = Home
temp.button.home.typolink {
    parameter.data = leveluid:0
    ATagParams = data-role="button" data-icon="home" data-rel="home"
}
 
# show back button but not on frontpage
temp.button.back = TEXT
[treeLevel = 0]
temp.button.back.value =
[else]
temp.button.back.value = <a href="#" data-role="button" data-icon="back" data-rel="back">Back</a>
[global]
 
temp.header = IMAGE
temp.header {
  file.width = 480c
  file.height = 130c    
  file.import = uploads/media/
  file.import.data = levelmedia: -1, slide
  file.import.listNum = 0
  file.import.override.field = media
  wrap = <div id="header">|</div>
  required = 1
}
 
temp.content = COA
temp.content {
  5 = LOAD_REGISTER
  5.maxImageWidth = 150
  5.contentWidth = 480
 
  10 < styles.content.get
 
  15 = RESTORE_REGISTER
}
 
 
page.10 = TEMPLATE
page.10.template = FILE
page.10.template.file = {$path.template}/page.html
page.10.workOnSubpart = DOCUMENT_BODY
 
page.10.marks.DATA_THEME = TEXT
page.10.marks.DATA_THEME.value = {$page.data-theme}
 
page.10.subparts {
  HEADER < temp.header
  MENU < temp.menu
  CONTENT < temp.content
  FOOTER < temp.footer
  TITLE < temp.title
  SIDEBAR-RIGHT < styles.content.getRight
 
  HOME < temp.button.home
  BACK < temp.button.back
}

Disqus - noscript

Hammer, vielen Dank für dieses Template! Das hat mir echt das Leben leichter gemacht!
Ein wirklich sehr schönes Template, Danke :)
Gibt es denn auch die Möglichkeit eine Unternavigation, also für Unterseiten zu erstellen, da bin ich irgendwie nich nicht drauf gekommen.
jquery mobile unterstützt keine listenansicht mit verschachtelung. siehe dazu nested lists http://jquerymobile.com/test/d.... man könnte jedoch einfach mit padding und margin arbeiten.

hier ein beispiel mit für die nested list also "quasi untermenüs", einfach das temp.menu ersetzen:

temp.menu=HMENU
temp.menu{

noBlur=1
expAll=1

1=TMENU
1{
noBlur=1
expAll=1
wrap.insertData=1
wrap=<uldata-role="listview"data-inset="true"data-theme="{$page.data-theme}"data-dividertheme="{$page.data-theme}"><lidata-role="list-divider">Navigation|

NO.wrapItemAndSub=<li>|</li>

IFSUB=1
IFSUB{
doNotLinkIt=1
wrapItemAndSub=<li>|</li>
}

}</lidata-role="list-divider"></uldata-role="listview"data-inset="true"data-theme="{$page.data-theme}"data-dividertheme="{$page.data-theme}">
Erstmal Danke für die Antwort :)
Ich habe mal versucht die beiden Menü-Scripte zu tauschen, ich habe auch was mit den werten gespielt, doch komme ich leider zu keinem ergebnis, ausser das ich die Menüpunkte, bei denen Unterseiten exestieren, nicht mehr anklicken kann:

temp.menu = HMENU
temp.menu {

noBlur = 1
expAll = 1

1 = TMENU
1 {
noBlur = 1
expAll = 1
wrap.insertData = 1
wrap = <ul data-dividertheme="{$page.data-theme}" data-inset="true" data-role="listview" data-theme="{$page.data-theme}"><li data-role="list-divider">Navigation</li>|</ul>

NO.wrapItemAndSub = <li>|</li>

IFSUB = 1
IFSUB {
doNotLinkIt = 1
wrapItemAndSub = <li>|</li>
}

}Das sichtbar stellen bei IFSUB löst dieses problem zwar, doch sehe ich leider die genannten unterpunkte nicht :( Oder muss ich noch im Template ein Sub-Menü anlegen? Vielleicht kann man mir noch mal kurz zur Seite stehen, das wäre super.
hast du irgendein beispiel oder "test link"?
oh, natürlich das ist sicherlich hilfeich: http://mobil.tourenfahrer-hote...
Ich habe das ganze template mal etwas upgedatet insbesondere bei dem menü hat sich einiges getan!
so guck dir mal die neue version an. steht auch auf der demo seite bereit. da ist hoffentlich ein passendes menü mit submenus dabei.
Das sieht super aus! Mit den erweiteren Menüpunkten ist es echt Klasse! Vielen Dank für das Update :)
Vielen Dank für diese Seite. Kann man wunderbar zum üben benutzen...
Vielen Dank für das Template, sehr gut und hilfeich.
Eine Sache schaff ich nicht: Ich möchte Nav2 wählen. Auf der ersten Unterseite (FAQ / Tab) soll der Inhalt dieser Seite erscheinen & darüber das Untermenu "Text / Images". Mit Klick darauf, kommt man auf die Seite. Wie schaff ich das?
Danke für den Denkanstoss!

Ich finde das Template super! Danke für das Posten!
Ich habe nur eine Frage: die Mobile Seite hat einen eigenen Knoten im Seitenbaum
und ich möchte im mobilen Teil tt_news einbinden, wobei auf ein bestehendes Newsarchiv der Hauptseite zugegriffen werden soll.
Habe schon einige Möglichkeiten durchprobiert, die Seite bleibt leer.
Ich weiss nicht, wie ich Typoscript/Templates von tt_news integrieren soll.
Herzlichen Dank im Voraus!

Hallo, ich habe den Fehler gefunden,
es hatte mit danpextendnews zu tun,
habe jetzt im mobilen  Typoscript
includeLibs.danpextendnews = typo3conf/ext/danp_extendnews/pi1/class.tx_danpextendnews_pi1.php eingefügt,jetzt funktionierts.

Hallo,

vielen Dank für diesen Beitrag. Hat mir sehr weitergeholfen!!

Eine Frage dazu:
Gibt es eine Möglichkeit hier einen Link einzubauen, der dann die Desktopversion anzeigt?

Gruß Carsten

Hallo,

einfach nur spitze das Template! Genial!
In Verbindung mit einem Redirect bei Mobil-Telefonen: unschlagbar.

Eine Frage hab ich trotzdem: Wie kann ich eine zweite Sprache einbauen?
Hat da jemand eine Idee?

Gruß
Dirk

 Ich würd dafür einfach ein Menü bzw. eine Menüeintrag auf die Startseite der jeweiligen Sprache legen

Sehr schönes Template, danke!

Wirklich ein klasse Template!

Ich habe allerdings ein kleines Problem bzw. ein Anzeigefehler:
Ich habe eine Subdomain für die mobile Version angelegt. Wenn nun die Subdomian http://mobile.grafikhaus.de direkt aufgerufen, auf eine der Unterseiten geklickt und dann wieder auf den "Home"-Button gedrückt wird, verschiebt sich der obere Teil der Startseite. Der Home-Button zieht sich über die komplette Breite, der Header rutscht in die nächste Zeile und der Text + Navigation klatscht direkt an den Rand.

Wenn ich allerdings die Subdomain inkl. Seite, also http://mobile.grafikhaus.de/in... aufrufe, funktioniert alles ?!

Ich kann mir das nicht erklären. Habe alles so eingerichtet, wie hier beschrieben.
Hat jemand das gleiche Problem und vielleicht auch eine Lösung?

Liebe Grüße

Hallo,

vielen Dank für dieses Template, alles funktioniert gut, nur das Aufrufen von internen Dateien per Link (z.B. Download von pdf-Dateien) klappt bei mir nicht. Beim Anklicken der links erscheint immer nur eine leere Seite mit "undefined". Kennt jemand eine Lösung?

Viele Grüße

Hallo. Absolut spitzen Template !!!!!
Gibt es schon eine Version für jquery mobile 1.4.0. Hab soweit alles am Laufen aber die Themes werden nicht geladen.

Hi,

ich bin großer Fan dieser mobilen Webseite bzw mobilen Version. Ich habe folgende Frage. Und zwar woran kann es liegen, dass die "ToggleBoxes" bei mir nicht angezeigt werden? Ich kann zwar im BE Open oder Close auswählen, aber die gesamte ToggleBox wird nicht angezeigt. Es steht lediglich der Seitenname und dann der Inhalt, der eigentlich getogglet sein sollte. Screenshot: http://s14.directupload.net/im...

Über Hilfestellungen wäre ich sehr dankbar.

Viele Grüße und Danke im Voraus.