CallbackEvents - jqtouch - Built-in Triggers/Events in jQTouch.

Updated Oct 13, 2009 by davidcolbykaneda

CallbackEvents

Built-in Triggers/Events in jQTouch.

Events must be added after document has loaded. For this, we use the jQuery .ready() method.

Page Animations

pageAnimationStart, {direction: _in/out_}
pageAnimationEnd, {direction: _in/out_}

    $(document).ready(function(e){
        $('#portfolio').bind('pageAnimationEnd', function(event, info){
            if (info.direction == 'in') loadWorks();
        })
    });

Orientation Changes

    $(function(){
        $('body').bind('turn', function(event, info){
              console.log(info.orientation); // landscape or profile
        });
        
    });

Touch Events

Touch events will only trigger on items which are initialized, either automatically via the initialization function (initializeTouch: 'a, .touchable') or manually ( $('#mydiv').addTouchEvents()).

    $(function(){
        $('#swipeme').bind('swipe', function(event, info){
              console.log(info.direction);
        });
    });

You can also use the jQuery-style event shortcut, like:

    $(function(){
        $('#swipeme').swipe( function(event, info){
              console.log(info.direction);
        });
    });

Comment by i.chris.jacob, Oct 12, 2009

I'm pretty sure console.log(info.orientation); // landscape or portrait should be console.log(info.orientation); // landscape or profile

Comment by stevegabrio, Oct 19, 2009

Is there a way to force rotation to landscape?

Comment by paul.vudmaska, Nov 05, 2009

I wanted to be able to attach an onsubmit to forms, here is how I did in in jqtouch.js about line 472.

function submitForm(e, callback){

var $form = (typeof(e)==='string') ? $(e) : $(e.target);
if ($form.length && $form.is(jQTSettings.formSelector) && $form.attr('action')) {

var onsubmit = false;
if($form.attr('onsubmit')){onsubmit = (new Function($form.attr('onsubmit')))()};
if(onsubmit)
{
showPageByHref($form.attr('action'), {
        data: $form.serialize(),
        method: $form.attr('method') || "POST",
        animation: animations[0] || null,
        callback: callback
    });
}

   return false;
}
return true;
}

This allows you to use onsubmit like you regularly would. Note that you can not however use arguments ( which I usually use something like onsubmit="return validate(this)".

Not sure this is the best way to do it but this worked and I thought I'd share :)

Comment by i.dream.scape, Yesterday (22 hours ago)

paul.vudmaska,

You can just use the jQuery form submit event handler. The jqTouch submit is attached to the html body, so the submit event on the form will be called first. If you wish to stop the submit from going through, just use event.Propagation() or event.stopImmediatePropagation()

basic example:

$(function()
{
    $('#theFormId').submit(function(e)
    {
        validateFields();
        if (error)
        {
            e.stopImmediatePropagation();
            alert(error);
        }
    });
});