focal press working with jqtouch to build websites on top of jquery

[...]... application with a custom launch page using jQTouch when the page has been saved to the main screen on the iPhone The following settings link a default loading page, icon, icon style, and color to the status bar: var jQT = new $ .jQTouch( { icon: jqtouch. png’, addGlossToIcon: false, startupScreen: ‘jqt_startup.png’, statusBar: ‘black’, 20   Working with jQTouch to Build Websites on Top of jQuery It... can be easily customized with jQTouch Figure 3.13 The toggle button is simply a checkbox—nice, huh? Figure 3.14 The iOS drum roll options window Working with jQTouch to Build Websites on Top of jQuery   13 Carrots Cucumber Apple... class=“counter”>5 One Two Three Four Five Save this list to a web page and view inside your mobile browser, as shown in Figure 3.10 Adding Buttons There are three basic buttons you can use in jQTouch: two d ­ ifferent buttons for the toolbar and one set of buttons you can add to the main screen It is becoming common to include a back button along the left-hand side of your toolbar to send... title of each page: function setTitleSelector(ts){ titleSelector=ts; } return { setTitleSelector: setTitleSelector }});} }) (jQuery) ; Figure 3.17 Geolocation in your iPhone 18   Working with jQTouch to Build Websites on Top of jQuery Figure 3.18 Editing JavaScript in Dashcode That's it Not too bad Check out how the code looks in Dashcode in Figure 3.18 Both Jonathan Stark and David Kaneda have done a... of your toolbar to send you back to the ­ revious p screen This can be done with jQTouch using HTML The f ­ ollowing adds a button in the toolbar, as shown in Figure 3.11 Figure 3.10  Additional content added to the “rounded” list Back Btn Working with jQTouch to Build Websites on Top of jQuery   11 This is where... back button is a basic HREF link The back button has an arrow shape that points to the left Notice that the class is labeled “back” and that the button is before the H1 title Placing the button before the title will force the button to be on the left-hand side of the title If you want the button to be on the right-hand side of the title, then place the HTML after the H1 In addition to the back button,... Boilerplate template for jQTouch 2 Save a copy of the web page and name it floating.html 14   Working with jQTouch to Build Websites on Top of jQuery 3 Open floating.html in your favorite text editor A new JavaScript reference needs to be added to the other JavaScript files in the HEAD element of the page, as shown here: @import jqtouch/ jqtouch. min.css”;... autotitles extension so you can see how easy it is to create your own extensions The code starts by associating itself with the jQTouch framework: (function($) { if ($ .jQTouch) { The next step is to create a new function that will do the work In this instance the function is named AutoTitles $ .jQTouch. addExtension(function AutoTitles(jQT){ The first variable in the function is to look for content within any... back button, you can also add a plain ­ utton b Here you can see the toolbar HTML content with a plain button: Buttons Plain Button Again, as with the back button, the plain button is created using a HREF ANCHOR The class, this time, is labeled “button” and the visual display does not have arrows... will create a string of text for the longitude and latitude var lookup = jQT.updateLocation(function(coords){ if (coords) { setDisplay(‘Latitude: ’ + coords.latitude + ‘ Longitude: ’ + coords.longitude); } else { setDisplay(‘Device not capable of geolocation.’); } }); if (lookup) { Working with jQTouch to Build Websites on Top of jQuery   17 setDisplay(‘Looking up location…’); } }); . you to WORKING WITH jQTOUCH TO BUILD WEBSITES ON TOP OF jQUERY 2 WORKING WITH jQTOUCH TO BUILD WEBSITES ON TOP OF jQUERY leverage. For instance, you can create a web app using jQTouch with. jQTouch. 4 WORKING WITH jQTOUCH TO BUILD WEBSITES ON TOP OF jQUERY Building a Basic jQTouch Site The goal of jQTouch is to allow you to create an iPhone- specific website very easily. To this end, all. media=“screen”> @import jqtouch/ jqtouch.min.css”; </style> <style type=“text/css” media=“screen”> 6 WORKING WITH jQTOUCH TO BUILD WEBSITES ON TOP OF jQUERY Figure 3.3 A basic template for your jQTouch