0

我在一个phonegap项目上。

我正在用 Jquery Mobile Framework 做这个项目。但是它的结果和性能在许多设备上都非常糟糕（我的设备 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

1

只要面板变为活动状态，您就可以运行函数。

将属性 data-load="func_name" 添加到面板的 div 标签。

例如

<!DOCTYPE html>
<!--HTML5 doctype-->
<html>
<head>

    ...

    <script>
        function onPanel1Activated() {
            do task for panel1
        }
        function onPanel2Activated() {
            do task for panel2
        }
    </script>

    ...

</head>
<body>
    <div id="afui" class='ios'>

        <!-- Header ------------------------------------------------------->
        <div id="header"></div>

        <!-- Content Start ------------------------------------------------>
        <div id="content">
            <!-- Panel 1 -------------------------------------------------->
            <div class="panel" title="Panel 1" id="panel1" selected="true" data-load="onPanel1Activated">
            ...
            </div>
            <!-- Panel 2 -------------------------------------------------->
            <div class="panel" title="Panel 2" id="panel2" data-load="onPanel2Activated">
            ...
            </div>
            ...
        </div>
    </div>
</body>
</html>
于 2013-08-06T10:55:48.197 回答