Отправляет email-рассылки с помощью сервиса Sendsay

Web-программирование - это просто!

Подписаться Бесплатная «Серебряная» новостная рассылка . Подписчиков 679 RSS
←   Октябрь 2011   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31


За последние 60 дней ни разу не выходила


Сайт рассылки: http://www.easyprog.ru
Открыта: 27-06-2009
Адрес автора: comp.soft.prog.easyweb-owner@subscribe.ru

Автор
Александр

Статистика

679 подписчиков
0 за неделю
←   Все выпуски   →

Web-программирование - это просто!


Новое на сайте Программирование - это просто! (www.easyprog.ru):

В разделе "Программные продукты"

В платном разделе

В бесплатном разделе

Добрый день, уважаемые подписчики!

Тема сегодняшнего выпуска: «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>

 

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

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

 

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

 

.image_page_control {

    border-top:none;

    border-right:none;

    border-bottom:none;

    border-left:none;

}

 

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

 

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

 

С уважением, Шуравин Александр, e-mail: megabax@rambler.ru, автор оставляет за собой право публиковать в рассылках ваши письма, если в письме прямо неоговорено нежелание его публиковать.

 
В избранное