Отправляет 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


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


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

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

Статистика

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

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


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

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

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

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

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

 

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

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

 

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

 

И так, класс CXBrCollapser. Он предназначен для свертывания и развертывания каких либо объектов. Давайте посмотрим тестовый пример:

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

       

        </SCRIPT>

    </head>

 

    <BODY>

        <div id="1">

           

        </div>

        <div id="2">

 

        </div>

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

       

            function ButtonClick() {

                div1=document.getElementById("1");

                Cl=new CXBrCollapser(div1);

                Cl._plus_image="plus.png";             

                Cl._minus_image="minus.png";       

                Cl._blank_image="blank.png";       

                Cl._draw();

               

                div_cl=document.getElementById("d"+Cl._id);

                div_cl.innerHTML="<h1>Пример коллапсера</h1>";

            }

           

        </SCRIPT>

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

    </BODY>

</HTML>

 

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

 

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

 

А вот так в свернутом:

 

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

 

При прорисовке коллапсер сам формирует тэг <div>,  в которым мы программно можем вставить нужный нам текст:

                div_cl=document.getElementById("d"+Cl._id);

                div_cl.innerHTML="<h1>Пример коллапсера</h1>";

 

Картинки для коллапсера вы можете скачать здесь.

 

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

 
В избранное