.
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>

      <title></title>

        <LINK HREF="styles.css" REL="stylesheet" TYPE="text/css">

        <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript" SRC="XBrBase.js">

        </SCRIPT>

        <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript" SRC="XBrGlobalVars.js">

        </SCRIPT>

        <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript" SRC="XBrGlobalProc.js">

        </SCRIPT>

        <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript" SRC="XBrVisual.js">

        </SCRIPT>

        <SCRIPT Language="JavaScript" type="text/javascript">

       

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

            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>

        <div id="1">

            div1

        </div>

        <div id="2">

 

        </div>

        <SCRIPT Language="JavaScript" type="text/javascript">

       

            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>

        <input type="submit" value="Нажать сюда" OnClick="ButtonClick()"><br>

    </BODY>

</HTML>

 

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

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

 

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

 

.image_page_control {

    border-top:none;

    border-right:none;

    border-bottom:none;

    border-left:none;

}

 

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

 

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