1

我正在使用 phone gap 开发跨平台移动应用程序。

现在，如果我使用 Swipe 事件。它们仅适用于 index.html 等应用程序的第一页。

但是如果我重定向如果它是第二页

登录 --> 索引.html

滑动和链接停止工作

无法弄清楚问题。请帮助

这是代码

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet"
    href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script
    src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

<script>
    $(document).ready(function() {

        $('.ui-slider-handle').live('touchstart', function() {
            // When user touches the slider handle, temporarily unbind the page turn handlers
            doUnbind();
        });

        $('.ui-slider-handle').live('mousedown', function() {
            // When user touches the slider handle, temporarily unbind the page turn handlers
            doUnbind();
        });

        $('.ui-slider-handle').live('touchend', function() {
            //When the user let's go of the handle, rebind the controls for page turn
            // Put in a slight delay so that the rebind does not happen until after the swipe has been triggered
            setTimeout(function() {
                doBind();
            }, 100);
        });

        $('.ui-slider-handle').live('mouseup', function() {
            //When the user let's go of the handle, rebind the controls for page turn
            // Put in a slight delay so that the rebind does not happen until after the swipe has been triggered
            setTimeout(function() {
                doBind();
            }, 100);
        });

        // Set the initial window (assuming it will always be #1
        window.now = 1;

        //get an Array of all of the pages and count
        windowMax = $('div[data-role="page"]').length;

        doBind();
    });
    // Functions for binding swipe events to named handlers
    function doBind() {
        $('div[data-role="page"]').live("swipeleft", turnPage);
        $('div[data-role="page"]').live("swiperight", turnPageBack);
    }

    function doUnbind() {
        $('div[data-role="page"]').die("swipeleft", turnPage);
        $('div[data-role="page"]').die("swiperight", turnPageBack);
    }

    // Named handlers for binding page turn controls
    function turnPage() {
        // Check to see if we are already at the highest numbers page            
        if (window.now < windowMax) {
            window.now++
            $.mobile.changePage("#device" + window.now, "slide", false, true);
        }
    }

    function turnPageBack() {
        // Check to see if we are already at the lowest numbered page
        if (window.now != 1) {
            window.now--;
            $.mobile.changePage("#device" + window.now, "slide", true, true);
        }
    }
</script>
</head>

<body>
    <div data-role="page" id="device1">
        <h1>School Day</h1>
        <p>Muchos paquetes de autoedición y editores de páginas web usan
            el Lorem Ipsum como su texto por defecto, y al hacer una búsqueda de
            "Lorem Ipsum" va a dar por resultado muchos sitios web que usan este
            texto si se encuentran en estado de desarrollo. Muchas versiones han
            evolucionado a través de los años, algunas veces por accidente, otras
            veces a propósito (por ejemplo insertándole humor y cosas por el
            estilo).</p>


    </div>
    <!-- /page -->
    <div data-role="page" id="device2">
        <h1>School Day</h1>
        <p>TRichard McClintock, un profesor de Latin de la Universidad de
            Hampden-Sydney en Virginia, encontró una de las palabras más oscuras
            de la lengua del latín, "consecteur", en un pasaje de Lorem Ipsum, y
            al seguir leyendo distintos textos del latín, descubrió la fuente
            indudable. Lorem Ipsum viene de las secciones 1.10.32 y 1.10.33 de
            "de Finnibus Bonorum et Malorum" (Los Extremos del Bien y El Mal) por
            Cicero, escrito en el año 45 antes de Cristo. Este libro es un
            tratado de teoría de éticas, muy popular durante el Renacimiento.</p>
    </div>
    <!-- /page -->
</body>
</html>
4

2 回答 2

0

取而代之的是：

$(document).ready(function() {

你应该试试这个：

 $(document).on('pageinit',function() {

而这个should be pasted above jquery mobile script。

所以顺序将是：

 <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
 <script>
    $(document).on('pageinit',function() {
      /.....all the code here
 </script>
 <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js">
 </script>
于 2013-02-20T10:07:32.647 回答
0

我已经重做你的代码并为你制作了一个有效的 jsFiddle 示例：http: //jsfiddle.net/Gajotres/sBnyP/

已在桌面 Firefox、Android 4.1.1 Chrome 和 iOS iPad 6.0 测试

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet"
    href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

<script>
    $(document).on('pagebeforeshow', '#device1, #device2', function(){      
        $('.ui-slider-handle').live('touchstart mousedown', function() {
            // When user touches the slider handle, temporarily unbind the page turn handlers
            doUnbind();
        });

        $('.ui-slider-handle').live('touchend mouseup', function() {
            //When the user let's go of the handle, rebind the controls for page turn
            // Put in a slight delay so that the rebind does not happen until after the swipe has been triggered
            setTimeout(function() {
                doBind();
            }, 100);
        });

        doBind();
    });

    // Functions for binding swipe events to named handlers
    function doBind() {
        $(document).on('swipeleft', '[data-role="page"]', turnPage);      
        $(document).on('swiperight', '[data-role="page"]', turnPageBack);
    }

    function doUnbind() {
        $(document).off('swipeleft', '[data-role="page"]', turnPage);      
        $(document).off('swiperight', '[data-role="page"]', turnPageBack);
    }

    // Named handlers for binding page turn controls
    function turnPage(event) {
            if(event.handled !== true) // This will prevent event triggering more then once
            {    
                var nextpage = $(this).next('[data-role="page"]'); 
                // swipe using id of next page if exists
                if (nextpage.length > 0) {
                    $.mobile.changePage(nextpage, {transition: "slide", reverse: false}, true, true);
                }
                event.handled = true;
            }
            return false;  
    }

    function turnPageBack(event) {
            if(event.handled !== true) // This will prevent event triggering more then once
            {      
                var prevpage = $(this).prev('[data-role="page"]');
                //alert('Left');    
                if (prevpage.length > 0) {
                    $.mobile.changePage(prevpage, {transition: "slide", reverse: true}, true, true);
                }
                event.handled = true;
            }
            return false;  
    }
</script>
</head>

<body>
    <div data-role="page" id="device1">
        <h1>School Day</h1>
        <p>Muchos paquetes de autoedición y editores de páginas web usan
            el Lorem Ipsum como su texto por defecto, y al hacer una búsqueda de
            "Lorem Ipsum" va a dar por resultado muchos sitios web que usan este
            texto si se encuentran en estado de desarrollo. Muchas versiones han
            evolucionado a través de los anos, algunas veces por accidente, otras
            veces a propósito (por ejemplo insertándole humor y cosas por el
            estilo).</p>


    </div>
    <!-- /page -->
    <div data-role="page" id="device2">
        <h1>School Day</h1>
        <p>TRichard McClintock, un profesor de Latin de la Universidad de
            Hampden-Sydney en Virginia, encontró una de las palabras más oscuras
            de la lengua del latín, "consecteur", en un pasaje de Lorem Ipsum, y
            al seguir leyendo distintos textos del latín, descubrió la fuente
            indudable. Lorem Ipsum viene de las secciones 1.10.32 y 1.10.33 de
            "de Finnibus Bonorum et Malorum" (Los Extremos del Bien y El Mal) por
            Cicero, escrito en el ano 45 antes de Cristo. Este libro es un
            tratado de teoría de éticas, muy popular durante el Renacimiento.</p>
    </div>
    <!-- /page -->
</body>
</html>
于 2013-02-20T13:15:22.433 回答