如何確定JqMobi/AppFramework中的活動分區/面板

我正在使用phonegap項目。如何確定JqMobi/AppFramework中的活動分區/面板

我正在用Jquery Mobile Framework來做這個項目。但是它的結果和性能在很多設備上都很糟糕（f.e.我的設備android 2.3.3 - jquery mobile很適合我認爲的android 4.x.x設備）

之後，我發現了這個漂亮又快速的框架。

現在，我試圖將我的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端（不工作）

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

請幫助一下吧。

謝謝。

來源

2013-05-13 Kuthay Gümüş

我真的不知道的howto與活性面板做到這一點。解決方法我使用 – 2013-05-14 18:15:18

它does not work.thanks反正 – 2013-05-15 10:45:17

@ kgms21-可能你可以嘗試$ .ui.activeDiv。 attr（「id」）==「contents01」或簡單的JavaScript。如果（的document.getElementById（「contents01）==真） – Mkpatel 2013-05-17 06:54: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>

來源

2013-08-06 10:55:48

如何確定JqMobi/AppFramework中的活動分區/面板

回答

相關問題