Блог

Главная - Вопросы по программированию - счетчик номеров jquery с помощью jquery mobile

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

#jquery #jquery-mobile

#jquery #jquery-мобильный

Вопрос:

У меня есть фрагмент кода, который считает от 0 до указанного числа и отображает его во время подсчета. Проблема в том, что я хочу использовать код в веб-приложении, созданном с использованием jQuery mobile. Когда код используется с обычным html, я отлично работаю, но когда я использую его с jQuery mobile, он не будет работать. Я не хочу, чтобы число начинало отсчет до тех пор, пока не будет загружена определенная мобильная страница, есть ли способ сделать это?? Я думаю, проблема в том, что в 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:

Ознакомьтесь с документацией по событиям для 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");
        }
    });
});

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

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

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

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

Комментарии:

1. Спасибо за помощь, хорошо, я думаю, это сработает, но когда я перехожу на страницу в очереди, счетчик отображается на долю секунды, а затем исчезает. У вас есть какие-либо идеи, почему он это делает??