HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов

Web-страницы:

<экземпляр объекта Element>.down([<селектор CSS>[, true]])

Параметры метода down те же, что у методов parent и child.

Пример:

var elUL = elNavbar.down();

В переменной elUL окажется первый пункт списка navbar.

Методы next и prev возвращают, соответственно, следующий и предыдущий элемент Web-страницы того же уровня вложенности, что и данный элемент:

<экземпляр объекта Element>.next|prev([<селектор CSS>[, true]])

Параметры этих методов те же, что у методов parent и child.

Пример:

var elDiv = Ext.get('cmain'). next();

В переменной elDiv окажется контейнер ccopyright — следующий за контейнером cmain.

Пример:

var elP = elNavbar.prev();

В переменной elP окажется значение null, т. к. список navbar не имеет предыдущих элементов того же уровня вложенности и вообще является единственным потомком своего родителя.

Методы first и last возвращают, соответственно, первый и последний элемент Web-страницы того же уровня вложенности, что и данный элемент:

<экземпляр объекта Element>.first|last([<селектор CSS>[, true]])

Параметры этих методов те же, что у методов parent и child.

Пример:

var elCHeader = Ext.get('cmain'). first();

var elCCopyright = Ext.get('cmain'). last();

В переменной elCHeader окажется контейнер cheader, а в переменной elCCopyright — контейнер ccopyright. Это, соответственно, первый и последний из блочных контейнеров — 'соседей' контейнера cmain.

Метод is возвращает true, если данный элемент Web-страницы совпадает с заданными селектором, и false в противном случае.

В примере из листинга 15.1 мы проверяем, создан ли контейнер cmain с помощью тега <P>. Разумеется, это не так.

Листинг 15.1

<экземпляр объекта Element>.is(<селектор CSS>)

var elCMain = Ext.get('cmain');

if (elCMain.is('P'))

var s = 'Это абзац.'

else

var s = 'Это не абзац. Тьфу на него!';

Получение и задание размеров и местоположения элемента Web-страницы

Добравшись до нужного элемента Web-страницы, мы можем начать работать с ним, например, получить и задать его размеры и местоположение с помощью описанных в этом разделе методов объекта Element.

Методы getWidth и getHeight возвращают, соответственно, ширину и высоту данного элемента Web-страницы в виде числа в пикселах:

<экземпляр объекта Element>.getWidth|getHeight([true])

Если этим методам не передавать никаких параметров, они вернут полную ширину и высоту элемента Web-страницы, с учетом рамки и внутренних отступов. Если же им передать значение true, они вернут ширину и высоту только содержимого элемента, без учета рамки и внутренних отступов.

Пример:

var iWidth = Ext.get('cmain'). getWidth();

В переменной iWidth окажется полная ширина контейнера cmain.

Методы setWidth и setHeight задают, соответственно, ширину и высоту данного элемента Web- страницы:

<экземпляр объекта Element>.setWidth|setHeight (<значение>)

Единственный параметр, передаваемый данным методам, — числовое значение ширины или высоты в пикселах:

Ext.get('cmain'). setWidth(700);

Методы getX и getY возвращают, соответственно, горизонтальную и вертикальную

координаты верхнего левого угла данного элемента Web-страницы в виде числа в пикселах. Координаты, возвращенные этими методами, отсчитываются относительно верхнего левого угла Web-страницы. Параметров эти методы не принимают.

Пример:

var elCMain = Ext.get('cmain');

var x = elCMain.getX();

var y = elCMain.getY();

Метод getOffsetTo возвращает смещение по горизонтали и вертикали данного элемента Web- страницы относительно другого элемента:

<экземпляр объекта Element>.getOffsetTo(<экземпляр объекта Element>)

В качестве параметра этому методу передается экземпляр объекта Element, представляющий элемент Web-страницы, относительно которого нужно узнать смещение данного элемента.

Метод getOffsetTo возвращает массив из двух элементов (чисел в пикселах): первый представляет смещение по горизонтали, второй — по вертикали.

Пример

var m = Ext.get('cmain'). getOffsetTo(Ext.get('cnavbar'));

var x = m[0];

var y = m[1];

Здесь мы получим в переменных x и y, соответственно, горизонтальное и вертикальное смещения контейнера cmain относительно контейнера cnavbar.

Получение размеров Web-страницы и клиентской области окна Web-обозревателя

Также часто бывает нужно узнать размеры всей Web-страницы и внутренней части окна Web- обозревателя, в которой выводится содержимое Web-страницы (клиентской области окна). Для этого предназначены методы особого объекта Ext.lib.Dom.

Методы getDocumentWidth и getDocumentHeight возвращают полную, соответственно, ширину и