Question

我参加了一个电话空白项目。

我正在使用Jquery Mobile Framework完成这个项目。但是它的结果和性能在很多设备上都很糟糕（例如我的设备android 2.3.3 - 我觉得jquery mobile在android 4.x.x设备上工作得很好）

之后，我找到了这个漂亮而快速的框架。

现在，我正试图将我的jquery移动项目带到Jqmobi。

但是当我试图携带时会出现一些问题。当我从导航中点击时，我无法显示当前/活动/选择/打开面板所需的功能。

为什么我需要这个。因为，＆＃34;我希望在用户选择该面板时使用这些功能＆＃34;这就是我想要的。

以下是我在jqmobi中尝试过的内容;

HTML SIDE;

    <!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 Side（不工作）

$(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 ..

请帮忙。

感谢。

Answer 1

只要面板变为活动状态，您就可以运行一个功能。

添加属性data-load =＆＃34; func_name＆＃34;到面板的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>

如何确定JqMobi / AppFramework中的活动Div / Panel

1 个答案: