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

Автор megabax

05.02.2012 г.

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

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

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

Продолжим изучать визуальные компоненты библиотеки. Следующий класс CXBrPanel. Он является контейнером объектов класса CXBrPanelPage и предназначен для отображения панели закладок. И так, давайте посмотрим тестовый пример:

HTML:

<HTML>

<head>

</SCRIPT>

</SCRIPT>

</SCRIPT>

</SCRIPT>

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

var Pn;

</SCRIPT>

</head>

<BODY>

div1

</div>

</div>

</div>

</div>

function ButtonClick() {

div1=document.getElementById("1");

Pn=new CXBrPanel(div1);

var p1=Pn._add("Первая ");

p1._add(new CXBrLabel(document.getElementById("p1"),"Объекты первой панели"));

var p2=Pn._add("Вторая ");

p2._add(new CXBrLabel(document.getElementById("p2"),"Вторая панель"));

var p3=Pn._add("Третья ");

p3._add(new CXBrLabel(document.getElementById("p3"),"333333333333333333333333333"));

Pn._draw();

}

</SCRIPT>

</BODY>

</HTML>

CSS:

A:link {text-decoration: none}

A:visited {text-decoration: none}

A:active {text-decoration: none}

.active_page_style {

border-top:ridge grey;

border-right:ridge grey;

border-bottom:ridge grey;

border-left:ridge grey;

color:black;

background-color:#EEEEAA;

}

.page_style {

border-top:groove grey;

border-right:groove grey;

border-bottom:groove grey;

border-left:groove grey;

color:black;

background-color:#DDDDDD;

}

.div_class {

border:none;

}

И вот что выдаст нам данная программа:

При нажатии на кнопочку - закладку, у нас отображается содержимое соответствующей панели:

Можно сделать, что бы объекты панели были на одном уровне. Для этого просто задайте у div-ов, с которыми связаны страницы панели абсолютное позиционирование (это можно сделать через CSS):

...

.div_class_label {

position:absolute;

top:80;

}

Соответственно, и классы CSS у этих div-ов тоже надо задать:

...

</div>

</div>

</div>

...

Теперь немножко о других классах. Класс страницы CXBrPanelPage. Вот как он реализован:

// ************************************* CXBrPanelPage ********************

function CXBrPanelPage(object, caption) {

СХBrVisualObject.call(this,object);

this._get_class_name=CXBrPanelPage_get_class_name;

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

this._caption=caption;

this._draw=CXBrPanelPage_draw;

this._set_visible=CXBrPanelPage_set_visible;

this._set_caption=CXBrPanelPage_set_caption;

}

function CXBrPanelPage_get_class_name() {return "CXBrPanelPage"}

function CXBrPanelPage_draw() {

this._draw_objects();

}

function CXBrPanelPage_set_caption(caption) {

this._caption=caption;

this._draw();

}

function CXBrPanelPage_set_visible(visible) {

this._set_visible_all(visible);

}

Как видим, проще некуда. У объекта данного класса есть заголовок, а метод _draw просто перерисовывает все входящие в него объекты.

И класс CXBrLabel - реализует отображение надписи, тоже, проще некуда:

// *********************** CXBrLabel **********************

function CXBrLabel(object,text) {

СХBrVisualObject.call(this,object);

this._get_class_name=CXBrLabel_get_class_name;

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

this._text=text;

this._draw=CXBrLabel_draw;

this._set_text=CXBrLabel_set_text;

}

function CXBrLabel_get_class_name() {return "CXBrLabel"}

function CXBrLabel_draw() {

this._object.innerHTML=this._text;

}

function CXBrLabel_set_text(text) {

this._text=text;

this._draw();

}

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

Вернуться