|
Каким образом можно создать точку останова? Например, если в Лекции 8 в примере, который демонстрирует возможность <canvas> для работы с готовыми изображениями (последний в лекции) в цикле |
Спонсор: Microsoft
Вы можете этот курс.
Опубликован: 19.03.2014 | Доступ: свободный | Студентов: 329 / 26 | Длительность: 11:36:00
Специальности: Программист
Лекция 6:
Использование CSS для форматирования интерактивных элементов управления в мобильных разработках
Форматирование переключателей и флажков. Кнопки
Переключатели и флажки используются на мобильных устройствах практически так же, как и на настольных компьютерах. Можно только посоветовать не использовать эти элементы управления, если число вариантов превышает четыре; в таком случае лучше использовать списки select с одиночным или множественным выбором. Группа из более четырех переключателей, вероятно, вызовет увеличение высоты страницы и потребует использования прокрутки, что может сказаться на удобстве использования формы на малом экране мобильного устройства.
В разметке HTML5 можно использовать разные типов кнопок: кнопки подтверждения, очистки, частные кнопки и т.д. На кнопку можно добавить изображение или значок, используя для этого CSS-стили. Кнопки подтверждения поддерживаются наиболее широко, и прекрасно подойдут для устройств с минимальными возможностями. Не рекомендуется применять кнопки очистки в мобильной разработке: зачем отнимать место на странице для функции, которую мало кто использует? Если же решено включить кнопку очистки в форму, то можно использовать для нее стиль, заметно отличающийся от стиля кнопки подтверждения (например, можно сделать ее меньше или темнее).
Также не нужно применять частные кнопки, если хочется, чтобы страница была совместима со всеми устройствами: кнопки этого типа будут работать только на устройствах с поддержкой JavaScript. И наконец, помните о том, что не все устройства поддерживают тег <button>. Этот тег был добавлен лишь в последних версиях стандартов, и мало кто из дизайнеров и разработчиков применяет его в своей работе. Далее представлен скриншот мобильного эмулятора, содержащий отформатированные таблицей стилей четыре радиокнопки и одну (розовую) кнопку подтверждения.
Приведенный далее код страницы этого экрана включает таблицу стилей, содержащую селекторы "input[type="radio"]" и "input[type="button"]". Кнопка "button" активизирует Java Script - функцию No(), текст которой не приводится.
<!DOCTYPE HTML>
<html lang="ru">
<head>
<style>
body {
background-color: #59ee53;
color:#0C080C;
font-family:Verdana, Geneva, sans-serif;
font-size:55px;
margin-left:100px;/*отступ слева*/
}
h2 {
background-color:#F27507;
color:#20268C;
font-family:"Comic Sans MS", cursive;
}
h3 {
font-family:"Comic Sans MS", cursive;
}
input[type="button"]
{
background-color: #f1aab7;
color: darkred;
width: 900px;
height: 200px;
font-size:55px;
}
input[type="radio"]
{
width: 100px;
height: 100px;
padding: 10px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Упорядоченный и неупорядоченный список</title>
</head>
<body>
<h2> Чемпионат мира 2014</h2>
<h3>Выбери команду</h3>
<form name ="Simpl_Mobile">
<label>
<input type=radio name=work value="radio4">Испания
</label><br><br>
<label>
<input type=radio name=work value="radio4">Нидерланды
</label><br><br>
<label>
<input type=radio name=work value="radio4">Германия
</label><br><br>
<label>
<input type=radio name=work value="radio4">Уругвай
</label><br><br>
<p>
<input type=button name=getEm value="Узнай подробности" onClick="No()">
</p>
</form>
</body>
</html>
Дмитрий Белов