Web-программирование. «JS: Библиотека визуальных компонентов. Класс CXBrPageControl. Продолжение».

Автор megabax

05.06.2012 г.

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

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

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

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

Прежде чем мы продолжим изучать возможности CXBrPageControl, обращу ваше внимание на то, что появилась новая версия библиотеки XBr 1.3, и для корректной работы примера данного урока нужно воспользоваться именно последней версией этой библиотеки.

Сегодня мы в нашей панели страниц вместо циферок отобразим циферки в виде картинки. Используемые в данной уроке картинки можно скачать здесь.

Для того, что бы использовать картинки, нам нужно заполнить у CXBrPageControl массив _images:

<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);

Pc._images=new Array();

Pc._images["_left"]="img\\left.png";

Pc._images["_first"]="img\\first.png";

Pc._images["_blank"]="img\\blank.png";

Pc._images["_right"]="img\\right.png";

Pc._images["_last"]="img\\last.png";

for(i=0;i<=9;i++) Pc._images["_"+i.toString()]="img\\"+i.toString()+".png"

for(i=0;i<=9;i++) Pc._images["_a"+i.toString()]="img\\a"+i.toString()+".png"

Oc=new CXBrObjectsContainer();

div2=document.getElementById("2");

Vt=new СХBrVisualObjectTest(div2);

Oc._add(Pc);

Oc._add(Vt);

Pc._draw();

}

</SCRIPT>

</BODY>

</HTML>

И вот как будет выглядеть пример на экране:

Что бы убрать эти некрасивые рамки, просто в файле стилей добавим описание стиля картинок пэйдж контрола:

.image_page_control {

border-top:none;

border-right:none;

border-bottom:none;

border-left:none;

}

И теперь картинки у нас будут выглядеть вот так:

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

Вернуться