Изменение шаблона WebView App
Возьмем созданный в прошлой теме проект и изменим страницу index.html следующим образом:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="css/phone.css" />
<title>Windows Phone</title>
</head>
<body>
<div>
Первое приложение c WebView
</div>
<div id="page-title">
Страница 1
</div>
<div>
<p>Перейти на <a href="page2.html">страницу 2</a></p>
</div>
</body>
</html>
Здесь был добавлен элемент ссылки для перехода на страницу 2. Ее пока нет в проекте, и поэтому добавим в проект в папку Html. Для этого нажмем правой кнопкой мыши на папку Html и выберем в появившемся меню Add->New Item и окне добавления нового элемента выберем пункт Html Page:
Назовем ее page2.html, и после этого в проект в каталог Html будет добавлена страница page2.html с некоторым содержанием по умолчанию. Создадим на второй странице какое-нибудь простенькое содержимое, например, мини-игру.
И для начала добавим в проект в библиотеку jQuery, которая может нам понадобится. Для этого нажмем на узел References правой кнопкой мыши и в появившемся контекстном меню выберем пункт Manage Nuget Packages.... В окне поиска пакетного менеджера введем jquery, найдем нужную нам библиотеку и установим ее.
После установки в проект будет добавлена папка Scripts, в которой можно будет найти стандартную и минимизированную версию библиотеки jquery. Вырежем эту папку из корня проекта и вставим ее в каталог Html:
Теперь изменим содержимое страницы page2.html следующим образом:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="Scripts/jquery-2.1.1.min.js"></script>
<title>Страница 2</title>
<style>
#play {
width:520px;
height:520px;
}
.brick {
width:120px;
height:120px;
background-color:aqua;
margin:3px;
border:solid 1px silver;
display: inline-block;
font-size:33px;
text-align:center;
}
#start {
width: 150px;
height: 100px;
font-size: 32px;
}
</style>
</head>
<body>
<h2>Игра</h2>
<div id="counter"></div>
<div id="play"></div>
<button id="start" >Старт</button>
<script>
var arr = new Array(); // массив для хранения значений
var seconds = 0; // время игры
var timerId; // объект таймера
$(function () {
createGame();
$("#start").click(function () {
timerId = setInterval(timerFunction, 1000);
})
// обработчик нажатия отдельной клетки
$(".brick").click(function () {
var intVal = parseInt($(this).text(), 10);
if (arr[arr.length - 1] === intVal) {
arr.pop();
$(this).css("background-color", "brown");
}
})
});
// функция таймера
function timerFunction() {
seconds++;
$("#counter").text(seconds);
if (arr.length == 0){
clearInterval(timerId);
$("#counter").text("Вы нашли все числа за " + seconds + " секунд");
}
};
// создание игры
function createGame() {
for (var i = 0; i < 4; i++) {
for (var j = 0; j < 4; j++) {
var newBrick = $("<div class='brick'></div>");
var randomInt = getRandomInt(1, 100);
arr.push(randomInt);
newBrick.text(randomInt);
$("#play").append(newBrick);
}
}
arr.sort(sortFunction);
};
// получение случайного числа
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
};
// функция обратной сортировки
function sortFunction(a, b){
if (a > b)
return -1;
if (a < b)
return 1;
return 0;
}
</script>
</body>
</html>
Суть игры, создаваемой на этой странице - за минимальное время найти все числа по порядку по возрастанию.
Запустим игру на устройстве и попробуем найти по порядку все числа:
- Глава 1. Введение в разработку для Windows Phone 8.1
- Глава 2. XAML в Windows Phone 8.1
- Глава 3. Компоновка и позиционирование элементов
- Глава 4. Элементы управления
- Глава 5. Ресурсы и стили
- Глава 6. Приложение и его жизненный цикл
- Глава 7. Навигация в приложении
- Глава 8. Привязка и контекст данных
- Глава 9. Шаблон WebView App
- Глава 10. Шаблон Hub App
- Глава 11. Сохранение данных
- Глава 12. Геолокация
- Глава 13. Локализация приложений
- Глава 14. SQLite в Windows Phone 8.1