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

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

Подписаться Бесплатная «Серебряная» новостная рассылка . Подписчиков 681 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

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

Статистика

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

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


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

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

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

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

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

 

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

 

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

 

HTML:

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

        </SCRIPT>

    </head>

 

    <BODY>

        <div id="1" class="div_class">

            div1

        </div>

        <div id="p1">

           

        </div>

        <div id="p2">

           

        </div>

        <div id="p3">

           

        </div>

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

       

            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>

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

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

}

 

 

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

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

 

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

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

 

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

 

...

 

.div_class_label {

    position:absolute;

    top:80;

}

 

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

 

...

 

        <div id="p1" class="div_class_label">

           

        </div>

        <div id="p2" class="div_class_label">

           

        </div>

        <div id="p3" class="div_class_label">

           

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

}

 

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

 
В избранное