Web-программирование: "Java Script(JS): Библиотека визуальных компонентов. Класс CXBrPageControl".

Автор megabax

13.04.2012 г.

Урок 13. Управление шрифтами в CSS New Page 1

Web-программирование: "Java Script(JS): Библиотека визуальных компонентов. Класс CXBrPageControl".

Скачать файлы с описанными классами можно здесь(версия 1.2)..

Для углубленного изучения web-программирования (язык PHP и написание своей собственной CMS) советую подписаться на платный раздел (см. анонсы раздела "Пишем Easy CMS").

Сегодня мы изучим класс CXBrPageControl. Он предназначен для отображения панели страниц. Типа вот такой:

Для начала, давайте посмотрим тестовый пример:

<HTML>

<head>

</SCRIPT>

</SCRIPT>

</SCRIPT>

</SCRIPT>

//объявляем пременные

var Pc;

var Oc;

var Vt;

//класс обработки перехода по страницам

function СХBrVisualObjectTest(object) {

СХBrVisualObject.call(this,object);

this._get_class_name=СХBrVisualObject_get_class_name;

this._hierarchy_classes.push(this._get_class_name());

this._event_handler=СХBrVisualObjectTest_event_handler;

}

//обработчик перехода по страницам

function СХBrVisualObjectTest_event_handler(msg) {

if(msg._type==msgClick) {

this._object.innerHTML="<B>Вы выбрали страницу "+msg._ext.toString()+"<B>";

return true;

}

</SCRIPT>

</head>

<BODY>

div1

</div>

</div>

function ButtonClick() {

div1=document.getElementById("1");

Pc=new CXBrPageControl(div1);

Oc=new CXBrObjectsContainer();

div2=document.getElementById("2");

Vt=new СХBrVisualObjectTest(div2);

Oc._add(Pc);

Oc._add(Vt);

Pc._draw();

}

</SCRIPT>

</BODY>

</HTML>

В нем мы объявляем новый класс, для иллюстрации обработки события нажатия на страницу. Этот вспомогательный класс мы строим на базе СХBrVisualObject, переопределяя у него только обработчик сообщений:

//обработчик перехода по страницам

function СХBrVisualObjectTest_event_handler(msg) {

if(msg._type==msgClick) {

this._object.innerHTML="<B>Вы выбрали страницу "+msg._ext.toString()+"<B>";

return true;

}

Для того, что бы этот обработчик вызывался, мы добавляем экземпляр нашего вспомогательного класса в контейнер, вместе с экземпляром класса CXBrPageControl:

function ButtonClick() {

div1=document.getElementById("1");

Pc=new CXBrPageControl(div1);

Oc=new CXBrObjectsContainer();

div2=document.getElementById("2");

Vt=new СХBrVisualObjectTest(div2);

Oc._add(Pc);

Oc._add(Vt);

Pc._draw();

}

И вот что нам выдаст тестовый пример:

Если мы хотим, что бы внешний вид выбранной страницы как то отличался, то мы можем в файл стилей (styles.css) добавить вот такие строки:

.anumber_page_style {

color:red;

}

Вот как это может выглядеть на практике:

Что бы задать внешний вид остальных ссылок на страницу, нам надо задать стиль number_page_style, например вот так:

.number_page_style {

color:green;

}

И вот как это будет выглядеть:

У CXBrPageControl есть и другие возможности, в частности, показывать номер страниц не текстом, а картинками. Но о них я расскажу в других выпусках.

« След.		Пред. »

Вернуться