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.

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.