jQuery Mobile mit TYPO3 als HTML5 Template

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

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