JQTouch

Einleitung

Auf jQuery basierendes Framework für Smartphones

Links

http://blog.peepcode.com/tutorials/2009/jqtouch-cheat-sheet

Kurzanleitung

Einrichten

        <style type="text/css" media="screen">@import "../../jqtouch/jqtouch.min.css";</style>
        <style type="text/css" media="screen">@import "../../themes/jqt/theme.min.css";</style>
        <script src="../../jqtouch/jquery.1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../jqtouch/jqtouch.min.js" type="application/x-javascript" charset="utf-8"></script>

Initialisieren

Siehe hierzu auch die Demos

        <script type="text/javascript" charset="utf-8">
            var jQT = new $.jQTouch({
                icon: 'jqtouch.png',
                addGlossToIcon: false,
                startupScreen: 'jqt_startup.png',
                statusBar: 'black',
                preloadImages: [
                    '../../themes/jqt/img/back_button.png',
                    '../../themes/jqt/img/back_button_clicked.png',
                    '../../themes/jqt/img/button_clicked.png',
                    '../../themes/jqt/img/grayButton.png',
                    '../../themes/jqt/img/whiteButton.png',
                    '../../themes/jqt/img/loading.gif'
                    ]
            });

Konventionen

Ausschnitte aus dem jQTouch Cheatsheet

a.back

   Just like native apps, pages are navigated in a stack. jQTouch handles backward navigation and animation if you include a back link in the toolbar.

Custom HTML

   Although jQTouch includes styling for many elements, you don't have to use them! Style up your own interfaces with HTML and CSS.

ul

   Lists make great menus or table-like displays. Add the rounded, plastic or edgetoedge classes to an unordered list for different styles.

Images

   Stock and freeware icons are easy to use and can make your app look great. A 12px square icon works best. Try Helveticons, Glyphish or Eddit.

li.arrow & li.forward

   Themes include classes for indicating the clickability of list items.

JavaScript Callbacks

   Use jQuery to attach to the tap event. Or bind to pageAnimationEnd to add your own custom page behavior.

h2

   Subtitles separate sections.

ul.individual

   This class styles unordered lists as half-width buttons.

div.info

   A styled div for auxiliary notes.

div.current

the default container which is shown at first