CODEWITHSUNDEEP
javascriptandroidiphonejquery-mobilecordova
redrom
redrom

Reputation: 11642

How to right use Fast buttons in jquerymobile and phonegap?

a need to speed up links with onClick attr in Phonegap app.

I would like to use Fast buttons plugin, that i found here: https://developers.google.com/mobile/articles/fast_buttons

But i dont know, how to right use this plugin should i add this after pageinit or where?

Maybe is it quite silly question, but if i tried to find some examples, with no luck.

Could You add somebody add put here some example, how solve this problem?

Many thanks.

Upvotes: 0

Views: 4210

Answers (3)

delkant
delkant

Reputation: 2294

What about fastclick ?

FastClick is a simple, easy-to-use library for eliminating the 300ms delay between a physical tap and the firing of a click event on mobile browsers. The aim is to make your application feel less laggy and more responsive while avoiding any interference with your current logic.

Upvotes: 0

Dan
Dan

Reputation: 1244

Jiri If it's not too late I had to do the same thing for my app and needed to pass parameters to the function. I did it by placing the parameters in the id of the button (separarted by underscores) and using this function which grabs the id from every clicked button with a classname of "clickbutton" and splits it into the individual parameters.

$('.clickbutton').live('click', function(event) {
    event.preventDefault();
var id = $(this).attr('id');
var parts = $(this).attr('id').split("_");
    var item = parts[0];
    var button = parts[1];
    var type = parts[2];
console.log(item+button+type);
    getItemCondition(item,type);
return false;
});

Still having issues with unresponsiveness from JQM click event though!

Upvotes: 0

Jasper
Jasper

Reputation: 76003

The touchstart (or touchend) event works great if you know the user won't be scrolling. That's actually the reason click events take so long to resolve on mobile devices, the device is waiting to see if the user is scrolling or clicking.

This will perform quite fast as there is no delay for dispatching this event:

$('#myButton').on('touchstart', function () {
    //run click code now
});

You can also use jQuery Mobile's vclick event which attempts to use the native touch events but it's main problem is that you can dispatch multiple events using vclick so you should set a timeout to only allow one click at a time, for example:

var clickOk = true;
$('#myButton').on('vclick', function () {
    if (clickOk === true) {
        clickOk = false;
        setTimeout(function () {
            clickOk = true;
        }, 350);
        //run click code now
    }
    return false;
});

This will allow the event handler to run only once per 350ms which will take care of the multiple events being dispatched since the second event will be ignored.

I would set these event handlers up in a delegated event handler that runs when a pseudo-page gets initialized:

$(document).on('pageinit', '.ui-page', function () {
    //bind "fast-click" event handlers now, use "$(this).find(...)" to only bind to elements of the current pseudo-page
});

Upvotes: 5

Related Questions