Extensions

markransom edited this page Dec 20, 2011 · 2 revisions

Extensions allow any developer to easily extend jQTouch with additional functionality. Including an extension is easy, simply include it in the <head> of your document, after including the base jQTouch script:

<script src="jqtouch/jqtouch.js" type="application/x-javascript" charset="utf-8"></script>
<script src="extensions/jqt.location.js" type="application/x-javascript" charset="utf-8"></script>

Included Extensions

  • Location Provides access to geo-location features in iPhone 3.0. See demos/ext_location for usage.
  • Floaty Allows the user to create a "floaty" bar. See demos/ext_floaty for usage.
  • Offline A JS debugger for offline capable apps. See also: Offline Support
  • Autotitles Auto set the title in the toolbar from referrer

Creating Extensions

The following shows the typical structure of a jQTouch extension:

(function($) {
    if ($.jQTouch)
    {
        $.jQTouch.addExtension(function Counter(jQTouch){

            var mycount = 0;

            function addOne() {
                ++mycount;
            }

            function getCount() {
                return mycount;
            }

            return {
                addOne: addOne,
                getCount: getCount
            }
        });
    }
})(jQuery);

There are a few things happening here. First we wrap the overall code in an anonymous, self-executing function, so we can cleanly substitute the dollar sign ($) for the Zepto namespace. This is general good practice when working with Zepto or jQuery.

Specific to jQTouch, we call $.jQTouch.addExtension(), and pass it a function. The function will be run each time a new jQTouch object is created, (var jQT = new $.jQTouch()), and receives a copy of the jQTouch object as a parameter. The function can store local variables (var mycount) and can attach public functions/variables to the jQTouch object, by returning an object. For example, with the above extension, we could do this on our page:

$(document).ready(function(){
    var jQT = new $.jQTouch();
    jQT.addOne();
    jQT.addOne(); 

    console.log(jQT.getCount()); // 2
});

Obviously, this is an simple example, but with the ability to use Zepto/jQuery $.fn-style plugins, run on instance initialization, and directly extend jQTouch's public functions/attributes, plugins can be quite powerful.