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= 480Typoscript 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
Gibt es denn auch die Möglichkeit eine Unternavigation, also für Unterseiten zu erstellen, da bin ich irgendwie nich nicht drauf gekommen.
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}">
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.
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!