JTSimplejQuery Mobile meets TYPO3 2011-09-20

jTSimple - manual

table of contentsTemplate included elements................................................................................................................2Install....................................................................................................................................................2

Extract delivered archive.................................................................................................................2Import t3d file..................................................................................................................................2

Page Configs..........................................................................................................................................3jQuery Mobile Themes....................................................................................................................4Themes.............................................................................................................................................4

Other Configs..............................................................................................................................5Content Layouts....................................................................................................................................5

Tables...............................................................................................................................................5Header Layout.............................................................................................................................6Table Layout................................................................................................................................6

Toggle-Box........................................................................................................................................7Header..............................................................................................................................................7

Add stuff...............................................................................................................................................8Create a new page...........................................................................................................................8Add new content to page.................................................................................................................9

Additional Information.......................................................................................................................11Homescreen Icon and loading page..............................................................................................11

Page 1 of 14

JTSimplejQuery Mobile meets TYPO3 2011-09-20

Template included elements• basic page tree including example content elements

• Typoscript Template and TSConfig (RTE, ..)

• all HTML/JS/CSS Files and Libraries

• HTML preview file

• Exported t3d file, to import a fully working site

InstallYou should already have a running TYPO3 System on Version 4.5, some older should work too but not tested yet. The archive contains all necessary files and a simple site structure to get a working page tree out of the box.

1. Extract the downloaded archiv file to fileadmin folder of your running TYPO3 system

2. Import the t3x file to get a running page structure

3. Edit Template Constants to match your environment

4. Replace example content and create own one

Extract delivered archiveAll files must put in the fileadmin of yout TYPO3 Installation. The Templates folder contains all HTML and CSS files.The jquery folder contains all jQuery and Libraries.In the root folder you found a t3d file give you a simple page strcture

Import t3d fileTo starting working with this template you only need to import the t3d file. It provides a complete page tree and example content.

Page 2 of 14

JTSimplejQuery Mobile meets TYPO3 2011-09-20

Page ConfigsTYPO3 contains a “Content Editor” to edit some page config like Logo and jQuery Mobile Theme. You can find all available parameter in the Template of the Rootpage. Follow following steps to open the “Content Editor”.

You should change the BaseURL, so the system knowns your site url!

Page 3 of 14

JTSimplejQuery Mobile meets TYPO3 2011-09-20

jQuery Mobile ThemesAll possible jQuery Mobile Themes can selected on a simple selectbox. After edit this value think of clear the TYPO3 cache to see any change.

Themes

Theme: a Theme: b Theme: c

Page 4 of 14

JTSimplejQuery Mobile meets TYPO3 2011-09-20

Theme: d Theme: e

Other Configs• Logo image and width can set by simply edit the values and upload an image• Set the http url of you page• Define the title of page

Page 5 of 14

JTSimplejQuery Mobile meets TYPO3 2011-09-20

Content LayoutsEvery content element on TYPO3 can have a different Layout. This template adds some Layout styles to this elements.

Tables

Implemented Functions:• You can select Layout: default, Layout 1,

Layout 2• “Use Table Footer” to set last table row

as footer• “Table Header Position” set where table

headers row should be displayed

Header LayoutYou can define how table headers should be displayed.

Page 6 of 14

JTSimplejQuery Mobile meets TYPO3 2011-09-20

Table Header Position = „None“

Table Header Position = „Left“

Table Header Position = „Top“

Table Layout

Layout = „Default“• only table border

Layout = „Layout 1“• background for even odd rows• dark header row (if selected)• draker footer row (if selected)

Layout = „Layout 2“• bold header• italic footer

All colors a set by CSS rgba() and semi-transparency, so it should work on every jQuery Mobile

Page 7 of 14

JTSimplejQuery Mobile meets TYPO3 2011-09-20

theme

Toggle-Box

Most content elements can be wrap into a toggle box which can be toggled on touch to open and close it.

Indentation and Frames = „ToggleBox Closed“

Indentation and Frames = „ToggleBox Open“

HeaderYou can define a header image on each page or leave it blank if not necessary. The uploaded image is automatically scaled down to a friendly mobile resolution. The first image of the Page Resources Media field is used.

Page 8 of 14

JTSimplejQuery Mobile meets TYPO3 2011-09-20

Add stuff

Create a new pageTo create an new page in the menu and create content on this page flow these step first

Page 9 of 14

JTSimplejQuery Mobile meets TYPO3 2011-09-20

Page 10 of 14

JTSimplejQuery Mobile meets TYPO3 2011-09-20

Add new content to pageTo add a new content to page follow this steps. (Keep mind that every page can have multiple elements)

Page 11 of 14

JTSimplejQuery Mobile meets TYPO3 2011-09-20

Page 12 of 14

JTSimplejQuery Mobile meets TYPO3 2011-09-20

Some content elements provide additional tabs on which you can attach images to content. You can also set how they should be displayed (right, center, intext, below, …). These options can be

found on the Appearance tab.

Finally Clear the Cache on TYPO3 if you do not see any change on the page.

Additional Information

Homescreen Icon and loading pageThe template includes a apple-touch-icon file in which you can set an icon which will be shown on the Homescreen of iPhone, if the user adds a „Shoutcut“ on this device Homescreen.If the user loads your page from the Homebutton it looks like a really app, without the Safri browser bars. Also an icon (apple-touch-icon-load) will appear until the website is fully loaded.Some example Icons are include in this template including a simple Photshop file.

Page 13 of 14

JTSimplejQuery Mobile meets TYPO3 2011-09-20

Page 14 of 14