Jquery Мобильный шаблон шаблонных/настойчивый верхнего/нижнего колонтитула в PhoneGap

на основе этого question и несколько ресурсов в Интернете, как мобильной документации Jquery я придумал следующий код:Jquery Мобильный шаблон шаблонных/настойчивый верхнего/нижнего колонтитула в PhoneGap

<!DOCTYPE html> 
<!---index.html---> 
<html> 

    <head> 
     <title>Simply Running</title> 
     <meta charset="utf-8" /> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <link rel="stylesheet" type="text/css" href="css/reset.css" /> 
     <link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.5.min.css" /> 
     <link rel="stylesheet" type="text/css" href="css/index.css" /> 
     <script type="text/javascript" src="cordova.js"></script> 
     <script type="text/javascript" src="js/jquery-2.1.3.min.js"></script> 
     <script type="text/javascript" src="js/jquery.mobile-1.4.5.min.js"></script> 
     <script type="text/javascript" src="js/index.js"></script> 
    </head> 


     <body> 
     <div data-role="page" id="page"> 

      <div data-role="header"> 
       <h1>Header</h1> 
      </div><!-- /header --> 

      <div role="main" class="ui-content" id="content"> 
       <p>Loading ...</p> 
      </div><!-- /content --> 

      <div data-role="footer"> 
       <h4>Page Footer</h4> 
      </div><!-- /footer --> 
     </div><!-- /page --> 
    </body> 


</html>

Тогда у меня есть некоторые JS :

//index.js 
$(document).on('pagecreate', '#page', function(event) { 
    loadContent("main.html"); 
}); 

function loadContent(location) { 
    //Load the html content of the specific side that was requested 
    $("#content").load(location); 
    //Or to load a specific id from one site: 
    //$("#main").load(location + " " + #SPECIFIC); 
    return true; 
} 

function clickedLink() { 
    loadContent($(this).attr('href')); 
} 

$(document).ready(function() { 
    $('#content').on('click', 'a', clickedLink); 
});

И у меня есть две страницы, на которых хранятся только те материалы, которые я хочу добавить.

<!--main.html--->  
<div role="main" class="ui-content"> 
     <p>At the main page.</p> 
     <p><a href="second.html">Go to second one.</a></p> 
</div><!-- /content -->

<!-- second.html---> 
<div role="main" class="ui-content" id="content"> 
     <p>At second page.</p> 
     <p><a href="main.html">Back to first one.</a></p> 
</div><!-- /content -->

На первой странице, но при нажатии на ссылку вы можете увидеть, как выглядит вторая страница, но потом экран вдруг становится белым. Я новичок в javaScript, учась в течение 1 дня. Я не мог найти никакого решения или почему экран становится белым.

источник

2015-03-23 Con

Решение, которое я придумал, что я использую следующие:

<a onclick="loadContent('whatever.html')"></a> //Better use ontouchstart, see Edit

Это также означает, что я просто должен использовать loadContent функцию:

function loadContent(location) { 
    //Load the html content of the specific side that was requested 
    $("#content").load(location); 
}

И линия $('#content').on('click', 'a', clickedLink); больше не нужен, что мне очень нравится. :-)

Edit:

onclick="loadContent('whatever.html')"

не хорошая практика для мобильных устройств, то лучше использовать

ontouchstart="loadContent('whatever.html')"

источник

2015-03-23 20:38:48 Con

Jquery Мобильный шаблон шаблонных/настойчивый верхнего/нижнего колонтитула в PhoneGap

ответ

Смежные вопросы