Счетчик номеров jquery с помощью jquery mobile - PullRequest
Новая
       0

Счетчик номеров jquery с помощью jquery mobile

0 голосов
/ 30 сентября 2011

У меня есть кусочек кода, который считает от 0 до указанного числа и отображает его во время подсчета. Проблема заключается в том, что я хочу использовать код в веб-приложении, созданном с помощью jQuery mobile. Когда код используется с обычным HTML, я отлично работаю, но когда я использую его с мобильным jQuery, он не будет работать. Я не хочу, чтобы число начинало считать, пока не загрузится определенная мобильная страница. Есть ли способ сделать это? Я думаю, что проблема заключается в том, что в jquery mobile все страницы содержатся в одном html-документе, и число сартов считается, когда html-страница открыта, и я хочу, чтобы она запускалась при отображении раздела «#about»? 

<!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>

1 Ответ

1 голос
/ 30 сентября 2011

Ознакомьтесь с документацией о событиях для jQuery Mobile: http://jquerymobile.com/demos/1.0rc1/docs/api/events.html.

Вместо того, чтобы запускать код на document.ready, вы хотите запустить его на pageshow.

Изменение: 

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

Кому: 

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

Я не использовал плагин "counter", поэтому я не уверен, как это сделать, но вы можете остановить счетчик, когда пользователь переходит на другую страницу, для этого просто привязайте любой код, который останавливает счетчик, pagehide событие: 

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

A ПРИМЕЧАНИЕ. В приведенных выше примерах я использую функцию .delegate(), которая при использовании на объекте $(document) действует как функция .live():

$(document).delegate('#about', 'event-name', function () {}); аналогично $(#about).live('event-name', function () {});, однако .delegate() работает более эффективно. Документация для делегата здесь: http://api.jquery.com/delegate/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...