文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在JqMobi/AppFramework中确定活动的Div / Panel

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

Stack Overflow用户

提问于 2013-05-13 18:41:19

回答 1查看 860关注 0票数 0

我在做一个phonegap项目。

我正在用Jquery Mobile Framework做这个项目。但它在许多设备上的结果和性能都很差(f.e.我的设备android 2.3.3 -我认为jquery mobile在android 4.x.x设备上运行得很好)

在那之后，我发现了这个又好又快的框架。

现在，我正在尝试将我的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 ..

请帮帮忙。

谢谢。

jqmobi

appframework

回答 1

Stack Overflow用户

发布于 2013-08-06 18:55:48

每当面板变为活动状态时，都可以运行函数。

将属性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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/16520124

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在JqMobi/AppFramework中确定活动的Div / PanelEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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