| Содержание |
|
| Создание игрового цикла | Расширение HTML |
растягивающиеся макеты
Этот учебник демонстрирует создание отзывчивых макетов с помощью JavaScript. Добавьте в библиотеку два прямоугольника.Выберете красный цвет для одног и зеленый для другого. Эти поля являются только примерами. Могут использоваться любые фигуры или объекты.
Добавьте поля в редакторе.
Организовать прямоугольники, так что они заполнили левую и правую стороны. Оставьте границы вокруг них.
Это теперь пример веб-страницы с содержимым на левой и правой сторон. Он будет выглядеть различно на настольных веб-браузерах или телефонах в ландшафтном режиме. К сожалению эта схема не будет работать хорошо в портретном режиме. Два прямоугольника должны быть сжаты по размеру или расширенный экран, и отрезать по бокам прямоугольников.
Эта ситуация является, где необходимы реагировать макеты. В портретном режиме одна коробка должна двигаться над другим. Чтобы сделать это, нам нужно переместить коробки, с использованием JavaScript. Это означает, что отключение 'Использование шкалы времени' для коробки и параметр 'Идентификатор сценария'.
Чтобы переместить поля за пределами фильма, нам нужно отключить клип в свойствах фильм.
Лучшее место, чтобы организовать коробки находится в 'На изменение размера' фильм событие.
Функции, мы должны GetLeft, GetTop, GetWidth и GetHeight. Эти функции дают границы веб-браузера или устройства с использованием координат фильма. Когда клип включен, эти значения возвратить границы фильма. Если вы используете «None» фильм шкала, GetLeft и GetTop всегда будет возвращать 0 и могут быть проигнорированы.
Первый позволяет организовать две коробки, так что одно заполняет слева и другой заполняет правую сторону.
BoxB.SetBounds(GetLeft()+(GetWidth()/2),GetTop(),GetWidth()/2,GetHeight());
Далее мы будем добавлять границы размера 10. Не обязательно это значение 10 в пикселях, это в той же шкале фильм. Использование кино масштаб «None» на все, чтобы быть в пикселях.
BoxA.SetBounds(GetLeft()+Border,GetTop()+Border,(GetWidth()/2)-Border-(Border/2),GetHeight()-Border-Border);
BoxB.SetBounds(GetLeft()+(GetWidth()/2)+(Border/2),GetTop()+Border,(GetWidth()/2)-Border-(Border/2),GetHeight()-Border-Border);
Наконец, мы протестируем чтобы увидеть, если ширина веб-браузера или устройства меньше, чем высота. Когда это произойдет, переставить коробки по вертикали.
if(GetWidth()<GetHeight()){
BoxA.SetBounds(GetLeft()+Border,GetTop()+Border,(GetWidth())-Border-Border,(GetHeight()/2)-Border-(Border/2));
BoxB.SetBounds(GetLeft()+Border,GetTop()+(GetHeight()/2)+(Border/2),GetWidth()-Border-Border,(GetHeight()/2)-Border-(Border/2));
}else{
BoxA.SetBounds(GetLeft()+Border,GetTop()+Border,(GetWidth()/2)-Border-(Border/2),GetHeight()-Border-Border);
BoxB.SetBounds(GetLeft()+(GetWidth()/2)+(Border/2),GetTop()+Border,(GetWidth()/2)-Border-(Border/2),GetHeight()-Border-Border);
}
Теперь вы можете видеть, если размер игрока, две коробки будет организовать себя автоматически. Эти две коробки могут быть легко заменены другие фигуры и объекты. Этот пример может быть расширен для обработки более сложных макетов.
| Создание игрового цикла | Расширение HTML |