Customizing jQTouch

You can customize the jQTouch default behavior by sending a variety of property settings into the constructor. You saw this previously with the icon property, but there are several others that you should be aware of (Table 4-1).

Table 4-1. jQTouch customization options

Property addGlossTolcon backSelector cubeSelector dissolveSelector fadeSelector

Default true cacheGetRequests true

'.dissolve'

Expects true or false

'.back, .cancel, Any valid CSS selector; .goback' separate multiple values with a comma true or false

Any valid CSS selector; separate multiple values with a comma

Any valid CSS selector; separate multiple values with a comma

Any valid CSS selector; separate multiple values with a comma

Notes

If set to true, gloss will be added to the home screen icon on iPhone. Has no effect on Android.

Defines elements that will trigger the "back" behavior of jQTouch when tapped. When the back behavior is invoked, the current panel moves off screen with a reverse animation and is removed from history.

If set to true, automatically caches GET requests, so subsequent clicks reference the already-loaded data.

Defines elements that will trigger a cube animation from the current panel to the target panel.

Defines elements that will trigger a dissolve animation from the current panel to the target panel.

Defines elements that will trigger a fade animation from the current panel to the target panel.

fixedViewport true flipSelector '.flip'

formSelector fullscreen

true true or false

Any valid CSS selector; separate multiple values with a comma

Any valid CSS selector; separate multiple values with a comma true or false fullScreenClass 'fullscreen'

String null null or a relative or absolute path to a .png image file popSelector

preloadlmages false

Any valid CSS selector; separate multiple values with a comma

An array of image paths slidelnSelector 'ul li a' Any valid CSS selector;

separate multiple values with a comma slideupSelector '.slideup' Any valid CSS selector;

separate multiple values with a comma startupScreen null null or a relative or ab solute path to an image file

If set to true, prevents users from being able to zoom in or out of the page.

Defines elements that will trigger a flip animation from the current panel to the target panel.

Defines elements that should receive the onsubmit handler.

iPhone only; has no effect on Android. When set to true, your app will open in full-screen mode when launched from the user's home screen. Has no effect on the display ifthe app is running in Mobile Safari.

iPhone only; has no effect on Android. Class name that will be applied to the body when the app is launched in fullscreen mode. Allows you to write custom CSS that only executes in fullscreen mode.

The home screen icon for your app. This is the image that will be displayed when a user adds a bookmark for your app to his home screen.

Defines elements that will trigger a pop animation from the current panel to the target panel.

Defines images that will be loaded before the page loads. For example: ['images/link_over.png', 'images/link_select.png']

Defines elements that will trigger a slide left animation from the current panel to the target panel.

Defines elements that will cause the target panel to slide up into view in front of the current panel.

iPhone only; has no effect on Android. Pass a relative or absolute path to a 320px x 460px startup screen for fullscreen apps. Use a 320px x 480px image if you set statusBar to black-translucent.

Customizing jQTouch | 69

statusBar swapSelector

'default'

submitSelector '.submit'

.swap useAnimations true default, black-translucent, black

Any valid CSS selector; separate multiple values with a comma

Any valid CSS selector; separate multiple values with a comma true or false iPhone only; has no effect on Android. Defines the appearance of the 20-pixel status bar at the top of the window in an app launched in full-screen mode.

Selector that, when clicked, will submit its parent form (and close keyboard if open).

Defines elements that will cause the target panel to swap into view in front of the current panel.

Set to false to disable all animations.

0 -2

Responses

  • ciara
    How to customize jqtouch options?
    7 years ago

Post a comment