Как определить активный Div / Panel в JqMobi/AppFramework

Я нахожусь на проекте телефонного зазора.

Я делал этот проект с Jquery Mobile Framework. Но его результаты и производительность очень плохи на многих устройствах (например, мое устройство android 2.3.3 - jquery mobile хорошо работает на устройствах android 4.xx, я думаю)

После этого я нашел этот хороший и быстрый фреймворк.

Теперь я пытаюсь перенести свой мобильный проект jquery в Jqmobi.

Но есть некоторые проблемы, когда я пытаюсь нести. Я застрял с функцией, которая мне нужна, чтобы показать текущую / активную / выбранную / открытую панель, когда я нажимаю на навигацию.

Зачем мне это нужно. Потому что "я хочу работать с функциями, когда пользователь выбирает эту панель", это то, что я хочу.

Вот что я пробовал в 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);
}

Как я могу определить активную панель или страницу или div в Jqmobi / Appframework..

Пожалуйста, помогите об этом.

Благодарю.

Источник

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>
Источник
Другие вопросы по тегам