Question

我正在尝试使用Phonegap 3.4和jquery 1.11.1以及jquery mobile 1.4.2创建移动应用。

我的应用只有一个页面（index.html），包含多个jquery页面。我通过从服务器（使用JSON）获取一些数据并填充我的页面来填充此页面。对于页面容器，一切看起来都很好，即使转换有点慢。

问题是，我创建了一个固定的导航栏（使用data-role =“navbar”），列表（ul）包含4个项目。当按钮处于活动状态时，它是蓝色，如果没有则是白色。我的问题是，当我点击菜单的另一个链接时，背景变为蓝色（例外，因为它变为活动状态），然后css似乎消失了0.5s（链接文本变为紫色，就像点击链接一样）一个浏览器，背景变回白色），然后它回到活动样式。

这打破了过渡的所有影响。

我想知道是不是因为我动态加载的数据，但由于所有内容都在同一页面中，因此应该只加载一次。在我展示或隐藏它们之后。我在检索数据时有一个启动画面，因此当我转到应用程序的主要部分时，应该已经加载了数据。

这是我的html文件：

   <div id="splashScreen" data-role="none">
      <h1 id="title">Title</h1><br/>
    </div>

    <!-- Main Application -->
    <div id="mainApp">
      <div id="pages">

        <!-- Recent Page -->  
        <div id="recentPage" class="current" data-role="page">

            <div data-role="header" data-position="fixed" data-id="header">
                <div data-role="navbar">
                    <ul>
                        <li><a href="#recentPage" class="ui-btn-active ui-state-persist">Recent</a></li>
                        <li><a href="#difficultyPage">Difficulty</a></li>
                        <li><a href="#favoritePage">Favorite</a></li>
                        <li><a href="#donatePage">Donate</a></li>
                    </ul>
                </div>
            </div>

            <div class="pageContent" data-role="content">
            </div>

        </div>

        <!-- Difficulty Page -->
        <div id="difficultyPage" data-role="page">

            <div data-role="header" data-position="fixed" data-id="header">
                <div data-role="navbar">
                    <ul>
                        <li><a href="#recentPage">Recent</a></li>
                        <li><a href="#difficultyPage" class="ui-btn-active ui-state-persist">Difficulty</a></li>
                        <li><a href="#favoritePage">Favorite</a></li>
                        <li><a href="#donatePage">Donate</a></li>
                    </ul>
                </div>
            </div>

            <div class="pageContent" data-role="content">
                <div id="diff1"><a class="difficultyTab">Difficulty 1 / 10</a></div>
                <div id="diff2"><a class="difficultyTab">Difficulty 2 / 10</a></div>
                <div id="diff3"><a class="difficultyTab">Difficulty 3 / 10</a></div>
                <div id="diff4"><a class="difficultyTab">Difficulty 4 / 10</a></div>
                <div id="diff5"><a class="difficultyTab">Difficulty 5 / 10</a></div>
                <div id="diff6"><a class="difficultyTab">Difficulty 6 / 10</a></div>
                <div id="diff7"><a class="difficultyTab">Difficulty 7 / 10</a></div>
                <div id="diff8"><a class="difficultyTab">Difficulty 8 / 10</a></div>
                <div id="diff9"><a class="difficultyTab">Difficulty 9 / 10</a></div>
                <div id="diff10"><a class="difficultyTab">Difficulty 10 / 10</a></div>
            </div>

        </div>

        <!-- Favorite Page -->
        <div id="favoritePage" data-role="page">

            <div data-role="header" data-position="fixed" data-id="header">
                <div data-role="navbar">
                    <ul>
                        <li><a href="#recentPage">Recent</a></li>
                        <li><a href="#difficultyPage">Difficulty</a></li>
                        <li><a href="#favoritePage" class="ui-btn-active ui-state-persist">Favorite</a></li>
                        <li><a href="#donatePage">Donate</a></li>
                    </ul>
                </div>
            </div>

            <div class="pageContent" data-role="content">
            </div>

        </div>

        <!-- Donate Page -->
        <div id="donatePage" data-role="page">

            <div data-role="header" data-position="fixed" data-id="header">
                <div data-role="navbar">
                    <ul>
                        <li><a href="#recentPage">Recent</a></li>
                        <li><a href="#difficultyPage">Difficulty</a></li>
                        <li><a href="#favoritePage">Favorite</a></li>
                        <li><a href="#donatePage" class="ui-btn-active ui-state-persist">Donate</a></li>
                    </ul>
                </div>
            </div>

            <div class="pageContent" data-role="content">
            </div>

        </div>
      </div>
    </div>

在文件的开头，我填充了页面的容器：

<!-- jQuery -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

<script type="text/javascript">
$(document).bind("mobileinit", function(){
$.mobile.allowCrossDomainPages = true;
$.mobile.support.cors = true;
//$.mobile.defaultPageTransition='none';
//$.mobile.defaultDialogTransition='none';
$.mobile.buttonMarkup.hoverDelay=0;
//$.mobile.ignoreContentEnabled="true";
});
</script>

<script type="text/javascript" src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>

<!-- Custom -->
<script type="text/javascript" src="js/magicline.js"></script>

<!-- PhoneGap -->
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script type="text/javascript" src="phonegap.js"></script>
<script type="text/javascript" src="js/index.js"></script>

<script type="text/javascript">

document.addEventListener("deviceready",onDeviceReady,false);
var dataJSON;
var db = null;

function onDeviceReady() 
{       
    db = window.openDatabase("GalagoFavs", "1.0", "GalagoFavs", 200000);
    db.transaction(createDB,successDB,errorDB);
    getJSONData();
}

function createDB(tx)
{
    tx.executeSql("CREATE TABLE IF NOT EXISTS GalagoFavs (id unique)");
}

function successDB()
{

}

function errorDB()
{

}

function queryDB(tx,index)
{
    tx.executeSql("SELECT id FROM GalagoFavs WHERE id='"+index+"'",
                    populateFavorite(index));
}

function getJSONData()
{
    // Ajax request
    //
    $url = "http://www.mydomaine.com/JSON/json_get_data.php";
    $.getJSON($url, function(data) 
                       {
                       console.log("Successfully got data from server");
                       dataJSON = data;
                       populatePages();
                       displayPages();
                       });
}

function populatePages() {
    for (var i = 0; i < dataJSON.length; i++)
    {
        populateRecent(i);
        populateDifficulty(i);
        db.transaction(function(tx){queryDB(tx,i);});
    }
}

function populateRecent(index)
{
    if (index < dataJSON.length)
    {
    console.log("Populate recent");
    $("#recentPage .pageContent").append(
                        "<div class='item'>\
                            <div class='TitleName'>\
                                <a class='Title'>"
                                +dataJSON[index].Title+"</a><br/>\
                                <a class='Name'>"
                                +dataJSON[index].Name+"</a>\
                            </div>\
                            <div class='Difficulty'>DIFFICULTY<br/>"
                                +dataJSON[index].Difficulty+" / 10\
                            </div>\
                        </div>");
    }
}

function populateDifficulty(index)
{
    if (index < dataJSON.length)
    {
        console.log("Populate Difficulty");
        $("#difficultyPage .pageContent #diff"+dataJSON[index].Difficulty).append(
                        "<div class='item'>\
                            <div class='TitleName'>\
                                <a class='Title'>"
                                +dataJSON[index].Title+"</a><br/>\
                                <a class='Name'>"
                                +dataJSON[index].Name+"</a>\
                            </div>\
                            <div class='Difficulty'>"
                                +dataJSON[index].Difficulty+" / 10\
                            </div>\
                        </div>");
    }
}

function populateFavorite(index)
{
    console.log("Populate Favorite");
}

// Display main page after loading data
//
function displayPages() 
{
    console.log("Show mainApp");
    //$("#recentPage .pageContent .itemCours:lt(5)").css("display","table");
    $("body #splashScreen").fadeOut(10, function() {
    $("body #mainApp").fadeIn(10);
    });

}

</script>

我试图缓存数据，使用-webkit-transform：translateZ（0），还有很多其他技巧，但没有任何效果。

我不确定它是否是闪烁的（因为它很慢），或者这是一个像多次加载页面这样的问题，或类似的东西会减慢过渡和一切。

非常欢迎任何帮助或建议。

谢谢。

修改：Here is a link of the video of what's happening.

Answer 1

我修好了。我不知道这是不是一个bug，但是从jQuery Mobile 1.4.0开始，你必须将data-theme =“a”（或“b”，取决于你想要的主题）添加到标题div。否则，你会得到这种奇怪的过渡风格。

我觉得如果你没有放任何东西，默认情况下它应该是“a”，你应该有我遇到的那种问题，但现在情况并非如此，所以你必须明确设置主题。

我希望这可以帮助有同样问题的人。

编辑：这是我在所有页面（导航栏）的所有页面中使用的代码：

<div data-role="header" data-position="fixed" data-id="header" data-theme="a" data-tap-toggle="false">
    <div data-role="navbar" class="nav-wrap">
        <ul class="group">
            <li><a href="#recentPage">Recent</a></li>
            <li><a href="#difficultyPage">Difficulty</a></li>
            <li><a href="#favoritePage">Favorite</a></li>
            <li><a href="#donatePage">Donate</a></li>
        </ul>
    </div>
</div>

自定义样式jQuery Mobile + Phonegap

1 个答案: