0

私はphonegapプロジェクトに参加しています。

私はこのプロジェクトを Jquery Mobile Framework で行っていました。しかし、その結果とパフォーマンスは多くのデバイスで非常に悪いです (fe my device android 2.3.3 - jquery mobileはandroid 4.xxデバイスでうまく動作すると思います)

その後、この素敵で高速なフレームワークを見つけました。

今、jquery モバイル プロジェクトを Jqmobi に持ち込もうとしています。

しかし、持ち運びしようとするといくつかの問題があります。ナビゲーションからクリックしたときに、現在/アクティブ/選択済み/開いているパネルを表示する必要がある機能にこだわっています。

なぜこれが必要なのですか。「ユーザーがそのパネルを選択したときに機能を動作させたい」というのが私の望みだからです。

これが私がjqmobiで試したことです。

HTML 側;

    <!DOCTYPE html>
<html>
    <head>
        <title>Live Score</title>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <link rel="stylesheet" type="text/css" href="css/icons.css" />
        <link rel="stylesheet" type="text/css" href="css/jq.ui.css" />
        <link rel="stylesheet" type="text/css" href="css/add.css" />
        <script type="text/javascript" charset="utf-8" src="js/jq.ui.min.js"></script>
        <script type="text/javascript" charset="utf-8" src="js/jq.mobi.min.js"></script>
        <script type="text/javascript" charset="utf-8" src="js/myscripts.js"></script>
   </head>

    <body>

        <div id="jQUi">
            <div id="content">

                <div title="Home" id="index" class="panel" selected="true">
                    <img src="img/fanatik.jpg" width="320" height="120" alt="">
                    <ul class="index_list">
                        <li><a href="#contents01"><span>Football </span>Live Scores</a></li>
                        <li><a href="#contents02"><span>Football </span>League Tables</a></li>
                        <li><a href="#contents03"><span>Football </span>League Fixtures</a></li>
                        <li><a href="#contents04"><span>Program </span>Settings</a></li>
                    </ul>
                </div>

                <!---------------------------------------------------------------------------------------------------->

                <div title="LiveScores" id="contents01" class="panel" scrolling="no">
                </div><!-- livescores page -->

                <!---------------------------------------------------------------------------------------------------->

                <div title="LeagueTables" id="contents02" class="panel">
                </div><!-- leaguetable page -->

                <!---------------------------------------------------------------------------------------------------->

                <div title="LeagueFixtures" id="contents03" class="panel">
                </div><!-- leaguefixture page -->

                <!---------------------------------------------------------------------------------------------------->

                <div title="Settings" id="contents04" class="panel">
                </div><!-- settings page -->

                <!---------------------------------------------------------------------------------------------------->

            </div>

            <div id="navbar">
                <a href="#index" class="icon home">home</a>
                <a href="#contents01" class="icon clock">live</a>
                <a href="#contents02" class="icon graph">tables</a>
                <a href="#contents03" class="icon calendar">fixtures</a>
                <a href="#contents04" class="icon settings">settings</a>
            </div>

            <!---------------------------------------------------------------------------------------------------->

        </div>
    </body>
</html>

Javascript 側 (動作しない)

$(document).bind('pageshow', function () {
    var id = $.ui.activeDiv[0].id;

    if (id=="contents01"){    
         ctx="livescores";             
        $("#contents01 [class='panel']").text(ctx);       
    }
    else
    if (id=="contents02"){
         ctx="leaguetables";             
        $("#contents02 [class='panel']").text(ctx);
    }
    else
    if (id=="contents03"){
         ctx="leaguefixtures";             
        $("#contents03 [class='panel']").text(ctx);
    }
});

function getLiveMatches(){
    $.getJSON("MY WEB API URL", function (data){
        ctx='<ul>';
        $.each(data, function (index, value) {
            ctx+="<li><table border='1' class='imagetable'><tr><td rowspan='3' width='18%'>" + value.MinuteOrShortStatus + "</td><td>" + value.HomeTeam.Name + "</td><td width='8%'>" + (value.CurrentHomeTeamScore == null ? "-" : value.CurrentHomeTeamScore) + "</td></tr><tr><td>" + value.AwayTeam.Name + "</td><td width='8%'>" + (value.CurrentAwayTeamScore == undefined ? "-" : value.CurrentAwayTeamScore) + "</td></tr></table></li>";
        });
        ctx+='</ul>';
        injectContext("contents01",ctx);
    });
}

function injectContext(target, context){
    $("#"+target+" [class='panel']").html(context);
}

Jqmobi/Appframeworkでアクティブなパネル、ページ、またはdivを特定するにはどうすればよいですか..

それについて助けてください。

ありがとう。

4

1 に答える 1