0

html/jQM でテストページを作成しました。たった1つのhtmlファイルです。phonegap-build を使用して .apk をビルドし、galaxy s4 (4.2.2) でテストしました。

私の問題は、最初のページ遷移が表示されないことです。どのトランジション (スライド、ポップ、フェード、フリップなど) を選択してもかまいません。常に最初のトランジションはありません。

href="#blabla" と changePage("#blabla") を試しました。

ページを変更すると (トランジションは表示されません)、戻ってページを再度変更すると、トランジションが表示されます。それはいつも最初に行方不明です。

他のすべてのページ遷移は機能します。

何か案は？

コードは次のとおりです。

<!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 src="java.js"></script>
</head> 
<body> 

<div data-role="page" id="index">
    <div data-role="header">
        <h1>Index</h1>
    </div><!-- /header -->

    <div data-role="content">   
        <ul data-role = "listview" id="index_list">
            <!-- Liste wird mit jQuery gefüllt! -->
        </ul>
    </div><!-- /content -->

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


<div data-role="page" id="page2">
    <div data-role="header">
        <h1>Index</h1>
    </div><!-- /header -->

    <div data-role="content">   
        <ul data-role = "listview" id="page2_list">
            <!-- Liste wird mit jQuery gefüllt! -->
        </ul>
    </div><!-- /content -->

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

<div data-role="page" id="page3">
    <div data-role="header">
        <h1>Index</h1>
    </div><!-- /header -->

    <div data-role="content">   
        <ul data-role = "listview" id="page3_list">
            <!-- Liste wird mit jQuery gefüllt! -->
        </ul>
    </div><!-- /content -->

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

<div data-role="page" id="page4">
    <div data-role="header">
        <h1>Index</h1>
    </div><!-- /header -->

    <div data-role="content">   
        <ul data-role = "listview" id="page4_list">
            <!-- Liste wird mit jQuery gefüllt! -->
        </ul>
    </div><!-- /content -->

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

<div data-role="page" id="index2">
    <div data-role="header">
        <h1>Index</h1>
    </div><!-- /header -->

    <div data-role="content">   
        <ul data-role = "listview" id="index2_list">
            <li>Hallo</li>
            <li>Velo</li>
        </ul>
    </div><!-- /content -->

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

<div data-role="page" id="index3">
    <div data-role="header">
        <h1>Index</h1>
    </div><!-- /header -->

    <div data-role="content">   
        <ul data-role = "listview" id="index3_list">
            <li>Hallo3</li>
            <li>Velo3</li>
        </ul>
    </div><!-- /content -->

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

<script type="text/javascript">
    $(document).ready(function() {  
        //var output = $('#output');

        $.ajax({
            //url: 'http://localhost/jsontest/lcl_request_grp.php',
            url: 'XXX',
            dataType: 'jsonp',
            data: 'data',
            jsonp: 'jsoncallback',
            timeout: 5000,
            success: function(data, status){

                var html = '';
                var list = [];
                $.each(data, function(i,item){

                    //Alle Werte in einen Array Schreiben
                    //i beginnt bei 0
                    list[i] = [];
                    list[i]={};
                    list[i]['grp_id'] = item.grp_id;
                    list[i]['bezeichnung_de'] = item.bezeichnung_de;
                    list[i]['parent'] = item.parent;
                    list[i]['end'] = item.end;
                    list[i]['bezeichnung_fr'] = item.bezeichnung_fr;
                    list[i]['bezeichnung_en'] = item.bezeichnung_en;

                    //Die Werte die als parent 0 haben, in die Liste schreiben
                    if (item.parent == 0) {
                        html += '<li id="' + item.grp_id + '" parent = "' + item.parent +'"><a href="#" id="' + item.grp_id + '">' + item.bezeichnung_de + '</a></li>';
                    }
                });

                $('#index_list').append($(html));
                $('#index_list').trigger('create');    
                $('#index_list').listview('refresh');

                // Daten im LocalStorage als JSON-String speichern
                localStorage.setItem("list", JSON.stringify(list));

            },
            error: function(){
                window.alert("error!")
            }
        });

        $('#index_list').on('click', 'li', function() {
            var eintragid = $(this).attr('id');
            p_changepage(eintragid, "#page2", "#page2_list");
        });

        $( "#index" ).on( "swiperight", function() {
            $.mobile.changePage( "#index3", {
                transition: "slide",
                reverse: true,
            });   
        });

        $( "#index" ).on( "swipeleft", function() {
            $.mobile.changePage( "#index2", {
                transition: "slide",
                reverse: false,
            });   
        });

        $( "#index2" ).on( "swiperight", function() {
            $.mobile.changePage( "#index", {
                transition: "slide",
                reverse: true,
            });   
        });

        $( "#index2" ).on( "swipeleft", function() {
            $.mobile.changePage( "#index3", {
                transition: "slide",
                reverse: false,
            });   
        });

        $( "#index3" ).on( "swipeleft", function() {
            $.mobile.changePage( "#index", {
                transition: "slide",
                reverse: false,
            });   
        });

        $( "#index3" ).on( "swiperight", function() {
            $.mobile.changePage( "#index2", {
                transition: "slide",
                reverse: true,
            });   
        });

        $('#page2_list').on('click', 'li', function() {
            var eintragid = $(this).attr('id');
            p_changepage(eintragid, "#page3", "#page3_list");
        });

        $('#page3_list').on('click', 'li', function() {
            var eintragid = $(this).attr('id');
            p_changepage(eintragid, "#page4", "#page4_list");
        });

    });
</script>

</body>
</html>

そして、外部の「java.js」:

function p_changepage (eintragid, topage, tolist) {
    alert(window.location.pathname);
    var data = JSON.parse(localStorage.getItem("list"));
    var html = '';
    $.each(data, function(i, item) {
        if (item.parent == eintragid) {
            html += '<li id="' + item.grp_id + '" parent = "' + item.parent +'"><a href="#" id="' + item.grp_id + '">' + item.bezeichnung_de + '</a></li>';
        }
    });

    $(tolist).empty(); 
    $(tolist).append($(html));
    $(tolist).trigger('create'); 
    $.mobile.changePage( topage, {
        transition: "slide",
        reverse: false,
    });   
    $(tolist).listview('refresh');
}
4

0 に答える 0