phonegap android навигация между страницами

Пример простого приложения на phonegap, в котором мы хотим реализовать программную навигацию между страницами. По хардверной кнопке андроида "Назад" будет происходить выход из приложения, так как мы будем работать внутри одной страницы index.html с созданием соотвественно одного Activity в приложении.

Создаём проект как описано здесь.

Для реализации указанной цели в index.html используются иерархически вложенные <div>. В корне тега <body> вставляется тег <div data-role="page" id="page" data-theme="a">. Он будет содержать набор всех хедерев, всех страниц и всех футеров нашего приложения.

Пример хедера:

<div data-role="header">

<h1>Header text</h1>

</div>

Тег со списком всех страниц: <div class="page-content">. Внутри него перечисляются все страницы, которые будут использованы в приложении:

<div data-role="content" id='page1'>

<h1>Content here...</h1>

<input type='submit' onclick='switchPage("#page2");' value='go to page 2'></input>

</div>

<div data-role="content" id='page2' style="display:none;">

<h1>More content here...</h1>

<input type='submit' onclick='switchPage("#page1");' value='go to page 1'></input>

</div>

Пример футера:

<div data-role="footer" data-position="fixed" data-theme="c" vertical-align="middle" align="center">

<h4>Footer text</h4>

</div>

В скрипте в начале тега <body> нужно определить метод переключения страниц:

<script>

function switchPage(name){

$('#page1').hide();

$('#page2').hide();

$(name).show();

}

</script>

Итоговый файл index.html выглядит так:

<!DOCTYPE HTML>

<html>

<head>

<title>PhoneGap</title>

</head>

function switchPage(name){

$('#page1').hide();

$('#page2').hide();

$(name).show();

}

</script>

<h1>Header text</h1>

</div>

<h1>Content here...</h1>

</div>

<h1>More content here...</h1>

</div>

<h4>Footer text</h4>

</div>

</body>

</html>

В этой истории лучше всего повёл себя повар - он же нашёл источник вечной жизни

среда, 9 января 2013 г.