В связи с тем, что тачскрины удобны на производстве, то появилась потребность в определенном дизайне форм, который подразумевает надежное исполнение даже при нечетком попадании пальцами в кнопку.
С одной стороны, опыт подсказывает, что создать такую страницу задача банальная.
С другой стороны, каждый раз, когда собирался за нее взяться от нежелания сводило скулы.
Наконец, преодолев себя, взялся за дело...
Задача:
формализовать создание подобной страницы для любого разрешения дисплея или размера окна броузера :
Решение
Составляю список параметров:
- кол-во строк с панелями по вертикали Ny
- кол-во панелей по горизонтали для строки N(y)
- левое поле (отступ) Oleft
- правое поле (отступ) Oright
- верхний отступ Otop
- нижний отступ Obottom
- отступ между строками панелей Oy
- отступ между панелями в строке Ox
- закругление углов панели R
- высота панелей в строке H(y)
- ширина панели W(y,x)
Точка отсчета - верхний левый угол экрана.
Далее, продолжаю работать в относительной системе измерения, т.е. за основу берется максимальный размер экрана как 100%
Положим, кол-во строк с панелями по вертикали Ny = 3 (как на рисунке)
Кол-во панелей по горизонтали N(1) =1; N(2) = 1; N(3) = 3
Левое поле (отступ) Oleft = Oright = Otop = Obottom = Oy = Ox = 5%
Высота панелей в строке H(1) = H(2) = H(3) = (100% - Otop - Obottom - (Ny -1) * Oy) / Ny = 80% / 3 = 26.6 %
Ширина панели W(1,1) = W(2,1) = 100% - Oleft - Oright = 90%
Ширина панели W(3,1) = W(3,2) = W(3,3) = (100% - Oleft - Oright - (Nx -1) * Ox) / Nx = 26.6%
Теперь пишу CSS-файл test.css:
body {
background: #99CCFF;
}
#panel_1_1{
position:absolute;
top: 5%;
left: 5%;
width: 90%;
height: 26.6%;
border-radius: 20px;
background: #FFFFCC;
}
#panel_2_1{
position:absolute;
top: 36.6%;
left: 5%;
width: 90%;
height: 26.6%;
border-radius: 20px;
background: #FFFFCC;
}
#panel_3_1{
position:absolute;
top: 68.2%;
left: 5%;
width: 26.6%;
height: 26.6%;
border-radius: 20px;
background: #FFFFCC;
}
#panel_3_2{
position:absolute;
top: 69%;
left: 36.6%;
width: 26.6%;
height: 26.6%;
border-radius: 20px;
background: #FFFFCC;
}
#panel_3_3{
position:absolute;
top: 69%;
left: 68.2%;
width: 26.6%;
height: 26.6%;
border-radius: 20px;
background: #FFFFCC;
}
И собственно html-файл test.html:
<html>
<head>
<link href="test.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="panel_1_1">
panel_1_1
</div>
<div id="panel_2_1">
panel_2_1
</div>
<div id="panel_3_1">
panel_3_1
</div>
<div id="panel_3_2">
panel_3_2
</div>
<div id="panel_3_3" onclick="alert('It work !');">
panel_3_3
</div>
</body>
</html>
Любую панель можно использовать как кнопку, чтобы вызывать событие. Для этого надо добавить инструкцию onclick в тег div.
Решение проверил в броузерах Firefox, Opera, Chrome и IE 8.0: только в IE страница отображается некорректно.
Дополнение 1
Чтобы контент в панелях распологался строго по центру, я в css-файл включил класс:
.cnt {
position:absolute;
text-align: center;
width: 100%;
top: 50%;
}
Естесственно, что надо не забыть в HTML-коде "обернуть" контент в тег DIV или SPAN с этим классом.
Дополнение 2
Если надо построить вариант посложнее:
то в этом случае предлагаю сл. принцип нумерации панелей:
- нумерация выполняется по верхнему левому углу.