Compteur jquery avec jquery mobile

J'ai une pièce de code qui compte de 0 à un nombre spécifié et l'affiche pendant le comptage. Le problème est que je veux utiliser le code dans une application web qui est faite en utilisant jQuery mobile. Lorsque le code est utilisé avec un code html normal, je travaille bien, mais quand je l'utilise avec jQuery mobile, il ne fonctionnera pas. Je ne veux pas que le nombre commence à compter jusqu'à ce qu'une certaine page mobile est chargée, est-il un moyen de le faire? Je pense que le problème est que dans jquery mobile, toutes les pages sont contenues dans un document html et que le nombre de flèches compte quand la page html est ouverte et je veux que ça commence quand la section "#about" est affichée?Compteur jquery avec jquery mobile

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
    <script type="text/javascript"> 
$(function() { 
    $('#foo').counter({ 
     start: 1000, 
     end: 400000, 
     time: 1, 
     step: 50, 
     callback: function() { 
      $("#foo").html("400000"); 
     } 
    }); 
}); 

;(function($) {   
    $.fn.counter = function(options) { 


     var options = $.extend(defaults, options); 

     var counterFunc = function(el, increment, end, step) { 
      var value = parseInt(el.html(), 10) + increment; 
      if(value >= end) { 
       el.html(Math.round(end)); 
       options.callback(); 
      } else { 
       el.html(Math.round(value)); 
       setTimeout(counterFunc, step, el, increment, end, step); 
      } 
     } 

     $(this).html(Math.round(options.start)); 
     var increment = (options.end - options.start)/((1000/options.step) * options.time); 

     (function(e, i, o, s) { 
      setTimeout(counterFunc, s, e, i, o, s); 
     })($(this), increment, options.end, options.step); 
    } 
})(jQuery); 
    </script> 
    <style type="text/css"> 
    </style> 
</head> 

<body> 
    <span id="foo"></span> 
</body> 
</html>

Source

2011-09-29 mcneela86

départ la documentation des événements pour jQuery Mobile: http://jquerymobile.com/demos/1.0rc1/docs/api/events.html.

Plutôt que d'exécuter votre code sur document.ready vous voulez l'exécuter sur pageshow.

Change:

$(function() { 
    $('#foo').counter({ 
     start: 1000, 
     end: 400000, 
     time: 1, 
     step: 50, 
     callback: function() { 
      $("#foo").html("400000"); 
     } 
    }); 
});

Pour:

$(document).delegate('#about', 'pageshow', function() { 
    $('#foo').counter({ 
     start: 1000, 
     end: 400000, 
     time: 1, 
     step: 50, 
     callback: function() { 
      $("#foo").html("400000"); 
     } 
    }); 
});

Je ne l'ai pas utilisé le plug-in « contre » donc je ne sais pas comment le faire, mais vous pouvez arrêter le compteur lorsque l'utilisateur accède à une autre page, de le faire bind quel que soit le code arrête le compteur à l'événement pagehide:

$(document).delegate('#about', 'pagehide', function() { 
    //code to stop counter goes here 
});

A REMARQUE: utiliser la fonction .delegate() dans les exemples ci-dessus qui, lorsqu'ils sont utilisés sur les actes d'objet $(document) comme la fonction .live():

$(document).delegate('#about', 'event-name', function() {}); est similaire à $(#about).live('event-name', function() {}); cependant plus efficacement .delegate() réalise. La documentation pour le délégué est ici: http://api.jquery.com/delegate/

Source

2011-09-29 23:13:19 Jasper

Merci pour l'aide, Ok je pense que cela fonctionnera mais, quand je navigue vers la page en question le compteur montrera pendant une fraction de seconde, puis disparaîtra. Est-ce que tu as une idée de pourquoi ça fait ça ?? – mcneela86

Compteur jquery avec jquery mobile

Répondre

Questions connexes