JQueryMobile1.3

In AppStudio 3, we have updated jQuery Mobile to the current version of 1.3.

The jQuery Mobile team has made a number of changes to their controls which could affect apps using the jQuery Mobile controls. This document discusses the differences and the best way of dealing with them.

AppStudio started supporting jQuery Mobile when version 1.0 was still in Beta. A lot has been done to improve jQM since. The last major release of AppStudio, 2.6, used jQuery Mobile 1.1.0. The current jQM release, 1.3, has changed substantially. The most obvious difference is that many of the controls draw at different sizes than before, which will change the layout of forms using them.

We considered making wrappers for each of the controls, so they would behave as they did before. While this would have made it easy for users in the short run, the result would be that we would always be using the controls in a way that was less than optimal.

If your project uses jQuery Mobile controls, you will probably have to go through each of your forms and fine tune the size of each control. Please let us know if you have trouble doing this with particular controls: we will try to create tools and techniques to help.

TextBox

• New mini property for a smaller TextBox.
• Slight off white color background. Clear the backgroundColor property so the input area does not show up as white. In the image below, the left TextBox has the old default value. The right TextBox shows it with backgroundColor cleared.

Buttons

• Standard height now seems to be 29 pixels. Buttons look best with this height.
• Grouped buttons have changed. For any button groups, you need to set the groupBegin and groupEnd properties again.

RadioButton

• RadioButtons calculate their height and width automatically. For best results, set Height to 0. For horizontal Radio Buttons, set Width to 0 as well.
• Horizontal RadioButtons appear to be glitchy.

Select

• Grouped Select buttons have changed. For any groups, you need to set the group property again.

Date, DateTime, Month, Time

• Slight off white color background. Clear the backgroundColor property so the input area does not show up as white.