1

我正在使用 PhoneGap (Corduva 1.7.0) 和 jQueryMobile 1.1.0 编写应用程序。我对 jQuery Mobile 的正常转换有疑问。如果我使用 AJAX($.ajax) 的东西，过渡会“闪烁”，而且效果很差。但如果我不使用 AJAX($.ajax)，则转换效果很好。我尝试了一切，我需要解决这个问题。我粘贴了一个非常简单的代码来模拟它。

<!DOCTYPE html>


    <title></title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
    <meta charset="utf-8">

    <link rel="stylesheet" href="Themes_48Horascontelefonica/jquery.mobile-1.1.0.css" />

    <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="js/jquery.mobile-1.1.0.min.js"></script>

    <!-- If your application is targeting iOS BEFORE 4.0 you MUST put json2.js from http://www.JSON.org/json2.js into your www directory and include it here -->
    <script type="text/javascript" charset="utf-8" src="cordova-1.7.0.js"></script>
    <script type="text/javascript">
        // If you want to prevent dragging, uncomment this section
        /*
         function preventBehavior(e)
         {
         e.preventDefault();
         };
         document.addEventListener("touchmove", preventBehavior, false);*/

        /* If you are supporting your own protocol, the var invokeString will contain any arguments to the app launch.
         see http://iosdevelopertips.com/cocoa/launching-your-own-application-via-a-custom-url-scheme.html
         for more details -jm */
        /*
         function handleOpenURL(url)
         {
         // TODO: do something with the url passed in.
         }
         */

        function onBodyLoad() {
            document.addEventListener("deviceready", onDeviceReady, false);
        }

        /* When this function is called, Cordova has been initialized and is ready to roll */
        /* If you are supporting your own protocol, the var invokeString will contain any arguments to the app launch.
         see http://iosdevelopertips.com/cocoa/launching-your-own-application-via-a-custom-url-scheme.html
         for more details -jm */
        function onDeviceReady() {
            // do your thing!
            //navigator.notification.alert("Cordova is working")
            //$.mobile.showPageLoadingMsg("a", "Loading theme a...");

        }

    </script>

    <script type="text/javascript">
        function OnSuccess(data, status) {
            $.mobile.hidePageLoadingMsg();
            $.mobile.changePage($("#bar"), {
                transition : "slide"
            });
        }

        function OnError(request, status, error) {
            $.mobile.hidePageLoadingMsg();
            navigator.notification.alert("Error.", null, "¡Error!", "Ok");
        }


        $('#pressme1').live('vclick', function(event, o) {

            event.preventDefault();

            var valueTest = "valueTest";

            $.mobile.showPageLoadingMsg();

            $.ajax({
                type : "GET",
                url : "http://localhost/Service1/Connect",
                data : {
                    valueTest : valueTest
                },
                timeout : 10000,
                cache : true,
                dataType : "JSON",
                success : OnSuccess,
                error : OnError
            });

        })

    </script>

</head>

<body>

    <!-- Start of first page -->
    <div data-role="page" id="foo">

        <div data-role="header">
            <h1>Foo</h1>
        </div><!-- /header -->

        <div data-role="content">
            <p>
                I'm first in the source order so I'm shown as the page.
            </p>
            <p>
                <a href="#" id="pressme1" data-role="button"> <label class="aLabelEnter">Press Me 1</label> </a>
            </p>
        </div><!-- /content -->

        <div data-role="footer">
            <h4>Page Footer</h4>
        </div><!-- /footer -->
    </div><!-- /page -->

    <!-- Start of second page -->
    <div data-role="page" id="bar">

        <div data-role="header">
            <h1>Bar</h1>
        </div><!-- /header -->

        <div data-role="content">
            <p>
                I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my ID is beeing clicked.
            </p>
            <p>
                <a href="#foo" data-role="button"> <label class="aLabelEnter">Press Me 2</label> </a>

            </p>
        </div><!-- /content -->

        <div data-role="footer">
            <h4>Page Footer</h4>
        </div><!-- /footer -->
    </div><!-- /page -->
</body>

4

0 回答 0