Управление видимостью элементов Web-страницы

Управление видимостью элементов Web-страницы

Еще библиотека Ext Core предлагает нам несколько методов объекта Element, позволяющих скрывать элементы Web-страницы и снова их показывать.

Метод setVisibilityMode позволяет указать, с помощью какого атрибута стиля будет выполняться скрытие и показ данного элемента Web-страницы: display или visibility. (Эти атрибуты стиля были описаны в главе 9.)

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

Единственным параметром этому методу передается строка с именем нужного атрибута стиля. Мы можем использовать значения свойств Ext.Element.DISPLAY и Ext.Element.VISIBILITY; первое свойство хранит имя атрибута стиля display, второе — visibility.

Пример:

Ext.get("navbar"). setVisibilityMode(Ext.Element.DISPLAY);

Если метод setVisibilityMode для данного элемента Web-страницы ни разу не был вызван, для управления видимостью элемента Web-страницы будет использован атрибут стиля visibility.

Метод setVisible скрывает или снова выводит данный элемент Web-страницы на экран:

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

Если методу передано значение true, данный элемент Web-страницы будет выведен на экран, если же передано значение false — он будет скрыт:

Ext.get("navbar"). setVisible(false);

Методы show и hide, соответственно, показывают и скрывают данный элемент Web-страницы. Они не принимают параметров:

Ext.get("navbar"). show();

Метод toggle скрывает данный элемент Web-страницы, если он присутствует на экране, и выводит на экран, если он скрыт. Он не принимает параметров:

Ext.get("navbar"). toggle();

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

Пример:

var elNavbar = Ext.get("navbar");

if (elNavbar.isVisible())

elNavbar.show();

Кроме того, управлять видимостью элемента Web-страницы можно методом setDisplayed, рассмотренным в предыдущем разделе. Этот метод для скрытия и открытия элемента всегда использует атрибут стиля display.

Данный текст является ознакомительным фрагментом.