Типовой CSS-файл для VcorpJS

Подключение CSS-файла

Как обычно, CSS можно подключать внешним файлом и/или непосредственно на странице:

<link rel="stylesheet" type="text/css" href="/.../vcorp_js.css"/>
<style>...</style>

VcorpJS так же умеет создавать и удалять пользовательские стили через передачу строки CSS-стилей с созданием и удаление тега style.

Советую не загромождать CSS-код ненужными префиксами "-moz", "-webkit", "-ms" и т.д. - для названий стилей, которые известны всем браузерам уже много лет, используйте стандартные W3C-названия. Если браузер не поддерживает, например, стиль "box-shadow", то вы никак не заставите его отображать этот стиль, какие-бы префиксы не ставили :)

Для навигации по всем страницам этого раздела сайта используйте пиктограмму или ссылку Навигация в верхней строке навигации.

CSS-классы VcorpJS

Все названия CSS-классов, используемых VcorpJS при работе, начинаются с префикса "pb_" - приведённые ниже классы не должны использоваться для других целей.

В типовой CSS-файл встроено фоновое изображение - CSS-спрайт в виде base64-строки.

Автор постарался сделать CSS-файл минимальным, важна последовательность описания классов и стилей, её лучше не менять во избежание проблем.
Стили VcorpJS у автора всегда завершают основные стили для страницы и могут подправляться для оптимизации работы и размера.

Невидимый HTML-элемент - этот класс обязательно должен присутствовать в CSS-файле.

/*
    Абсолютный блок с нулевыми размерами и положением
    Значение "display:none" не нужно указывать, если требуется, чтобы содержимое блока рендерилось браузером.
*/

.pb_hidden {
    position:absolute; top:0; left:0; width:0; height:0;
    visibility:hidden; overflow:hidden;
}

CSS для галереи изображений - эти классы обязательны только при использовании всплывающих фото (функция .zoomImg() )

См. так же - Визуальный пример галереи изображений.

/*
    .pb_ismall - для малого изображения (предпросмотр)
    Этот класс можно задавать произвольно - ниже приведён вариант с CSS-анимацией
*/

.pb_ismall {
    position:relative; cursor:pointer;
    margin:15px; padding:0; width:150px; height:100px;
    border:solid 1px #c8c8c8; border-radius:5px; box-shadow:1px 1px 5px #000000;
    transition: border 0.3s ease-out 0s, box-shadow 0.3s ease-out 0s; /* CSS-анимация */
}
.pb_ismall:hover {
    margin:10px 20px 20px 10px;
    border:solid 1px #c80000;
    box-shadow:5px 5px 10px rgba(0, 0, 0, 0.8);
}
/* .pb_ibig - для большого всплывающего изображения */
.pb_ibig {
    position:absolute; border:solid 5px #c8c8c8; border-radius:5px;
}
/*
    .pb_itxt - Заголовок с текстом для большого всплывающего изображения.
    У этого блока всегда принудительно выставляется position:absolute; и cursor:pointer;
    Размеры и положение вычисляются во время показа изображения.
*/

.pb_itxt {
    padding:0 5px; height:30px; color:#000000;
    font:400 13px arial; text-align:center; line-height:16px;
    border-radius:5px 5px 0 0; background:#c8c8c8;
}

/*
    Классы и стили для CSS-анимации при смене/перелистывании изображений.
    @keyframes - анимация работает во время всплывания изображения (1 секунду).
    У элементов с классами .pb_inext, .pb_iprev всегда принудительно выставляется position:absolute;
    их размеры и положение вычисляются во время показа изображения.
*/

@keyframes pb_inextprev {
    0% { opacity:1; background:#ffffff; }
    100% { opacity:0; background:transparent; }
}
.pb_inext, .pb_iprev {
    width:0; height:0; color:#000000; opacity:0;
    border-top:25px solid transparent; border-bottom:25px solid transparent;
    animation-name:pb_inextprev; animation-duration:1s;
    transition: opacity 0.3s ease-out 0s;
}
.pb_iprev { border-right:50px solid #000000; }
.pb_inext { border-left:50px solid #000000; }
.pb_inext:hover, .pb_iprev:hover { opacity:1; background:#ffffff; }

CSS для блока ротации изображений - этот класс обязателен только при использовании функции .imgBlock()

См. так же - Визуальный пример блока ротации изображений.

/* .pb_irotation - для блока ротации изображений - функция imgBlock() */
.pb_irotation {
    position:relative; margin:0; padding:0; top:0; left:0; border:none;
}

CSS для цифрового поля Spinner - эти классы обязательны только при использовании HTML-элементов и функции .spinner()

См. так же - Визуальный пример создания и работы Spinner-счётчика.

.pb_spinner {
    position:relative; top:0; left:0; width:50px; height:20px; border:none;
}
.pb_spinner input {
    position:absolute; padding:0 5px;
    top:0; left:0; width:30px; height:18px;
    font:bold 13px arial; line-height:14px; text-align:center;
    color:#000000; border:solid 1px #c8c8c8; background:#ffffff;
}
.pb_sp_t,.pb_sp_b {
    position:absolute; cursor:pointer;
    left:44px; width:17px; height:9px; border:none;
}
.pb_sp_t { top:0; background-position: -126px -77px; }
.pb_sp_t:hover { background-position: -143px -77px; }
.pb_sp_b { top:11px; background-position: -126px -88px; }
.pb_sp_b:hover { background-position: -143px -88px; }

CSS для флажков-переключателей с подписью - эти классы обязательны только при использовании HTML-элементов и функции .uCheckeds()

См. так же - Визуальный пример создания и работы флажков checkbox.

/* Блочные элементы - флажки */
.pb_checked_true, .pb_checked_false {
    position:relative; display:block; float:left; cursor:pointer;
    margin:0 0 0 10px; padding:0 0 0 20px; width:65px; height:23px;
    font:normal 13px arial; line-height:23px; border:solid 1px #ffffff; border-radius:4px;
}
.pb_checked_true {
    font-weight:bold; color:#6f9300; background-color:#f8f8f8;
}
.pb_checked_false {
    color:#55646d; background-color:#eeeeee;
}
/* Вложенные DIV-блоки (изображения флажков) */
.pb_checked_true div, .pb_checked_false div {
    position:absolute; background-position:0 -65px;
    left:3px; top:5px; width:12px; height:12px;
}
/* Вложенные SPAN-элементы (подписи к флажкам) */
.pb_checked_true span, .pb_checked_false span {
    color:inherit; font:inherit;
}
.pb_checked_true:hover, .pb_checked_false:hover {
    background-color:#ffffff;
}
/* Позиция изображения из CSS-спрайта для вложенных DIV-блоков */
.pb_checked_true .pb_ch1 { background-position: -12px -65px; }
.pb_checked_true .pb_ch2 { background-position: -24px -65px; }
.pb_checked_true .pb_ch3 { background-position: -36px -65px; }
.pb_checked_true .pb_ch4 { background-position: -48px -65px; }
.pb_checked_true .pb_ch5 { background-position: -60px -65px; }
.pb_checked_true .pb_ch6 { background-position: -72px -65px; }
.pb_checked_true .pb_ch7 { background-position: -84px -65px; }
.pb_checked_true .pb_ch8 { background-position: -96px -65px; }
.pb_checked_true .pb_ch9 { background-position: -108px -65px; }
/* Цвет текста для вложенных SPAN-элементов - подписей к флажкам */
.pb_checked_true .pb_chs1 { color: #0505c1; }
.pb_checked_true .pb_chs2 { color: #0395c1; }
.pb_checked_true .pb_chs3 { color: #a40302; }
.pb_checked_true .pb_chs4 { color: #ff7904; }
.pb_checked_true .pb_chs5 { color: #ff0303; }
.pb_checked_true .pb_chs6 { color: #387a54; }
.pb_checked_true .pb_chs7 { color: #6f9300; }
.pb_checked_true .pb_chs8 { color: #ffff00; }
.pb_checked_true .pb_chs9 { color: #c59605; }

CSS для combobox - эти классы обязательны только при использовании HTML-элементов combobox и функций работы с ними.

См. так же - Визуальный пример комбинированного списка выбора combobox.

/* Блочные элементы - combobox */
.pb_combobox {
    position:relative; display:block;
    width:350px; height:25px;
    background:transparent; overflow:visible;
}
/* Вложенное поле ввода input type="text" */
.pb_combobox input {
    position:absolute; padding:0 5px;
    top:0; left:0; width:305px; height:22px; color:#000000;
    font:normal 13px arial; line-height:20px; text-align:left;
    border:solid 1px #808080; border-radius:5px; background:#ffffff;
}
/* Вложенный блок раскрытия/скрытия списка ваирантов */
.pb_cb_image {
    position:absolute; display:block; cursor:pointer;
    top:0; right:0; width:25px; height:22px; color:#ffffff;
    font:bold 20px arial; line-height:22px; text-align:center;
    border:solid 1px #c8c8c8; border-radius:3px; background:#808080;
}
.pb_cb_image:hover { color:#808080; background:#ffffff; }
/* Блок с вариантами быстрого выбора (анимированный) */
.pb_cb_select {
    position:absolute; padding:0; z-index:1;
    top:30px; left:0; width:350px; height:0; max-height:150px;
    border:solid 1px #808080; border-radius:5px; background:#ffffff;
    overflow-y:auto; box-shadow:3px 5px 10px rgba(0, 0, 0, 0.5);
}
/* Вложенные блоки с вариантами быстрого выбора */
.pb_cb_select .pb_cb_option {
    position:relative; clear:both; cursor:pointer; color:#000000;
    padding:3px 5px; height:16px; font:normal 13px arial;
    line-height:15px; text-align:left; border-radius:5px;
}
.pb_cb_select .pb_cb_option:hover { background:#eeeeee; }

CSS для анимационного меню - эти классы обязательны только при использовании HTML с меню и функции .iMenu().
Здесь приведён вариант, аналогичный навигационному меню на сайте vcorp.ru.

Обязательно должен быть указан (явно или неявно) и доступен для чтения стиль line-height, по высоте строк рассчитываются некоторые параметры.

См. так же - Визуальные примеры работы меню.

/* Порядок следования CSS - правил важен! */

/* Все вложенные элементы menu */
menu {
    margin:0; padding:0; width:450px;
    text-align:left; overflow:hidden;
}
/* Элемент меню (строка или подблок) */
menu li {
    position:relative; padding:0 0 0 35px; cursor:pointer;
    list-style-type:none; font:normal 13px arial; line-height:20px;
    color:#222222; overflow:hidden;
}
/* Вложенные DIV-блоки (изображения пунктов и разделов) */
menu li div {
    position:absolute; left:0; top:2px; width:32px; height:16px;
}
/* Фоновые изображения для DIV пунктов меню (по-умолчанию) */
menu li .pb_m1 { background-position: 0 -18px; }
menu li .pb_m2 { background-position: -32px -18px; }
menu li .pb_m3 { background-position: -64px -18px; }
menu li .pb_m4 { background-position: -96px -18px; }
menu li .pb_m5 { background-position: -128px -18px; }
/* Вложенные ссылки и SPAN-элементы */
menu li a {
    font:normal 13px arial; text-decoration:underline;
    line-height:19px; color:#a0a0a0;
}
menu li span {
    font-weight:normal; line-height:19px; color:#222222;
}
menu li a:hover, menu li span:hover { color:#a40302; }
/* pb_mc - закрытый раздел, pb_mo - раскрытый раздел */
.pb_mc { height:20px; }
/* pb_ms - выбранный пункт, pb_mi - остальные пункты */
.pb_ms { background:#e0e0e0; }
/* .pb_ms { background:#e0e0e0; }
.pb_ms:hover,.pb_mi:hover { background:#e0e0e0; } */


/* Фоновые изображения для DIV закрытых блоков меню */
.pb_mc > .pb_m1 { background-position: 0 -2px; }
.pb_mc > .pb_m2 { background-position: -32px -2px; }
.pb_mc > .pb_m3 { background-position: -64px -2px; }
.pb_mc > .pb_m4 { background-position: -96px -2px; }
.pb_mc > .pb_m5 { background-position: -128px -2px; }
/* Фоновые изображения для DIV открытых блоков меню */
.pb_mo > .pb_m1 { background-position: 0 -34px; }
.pb_mo > .pb_m2 { background-position: -32px -34px; }
.pb_mo > .pb_m3 { background-position: -64px -34px; }
.pb_mo > .pb_m4 { background-position: -96px -34px; }
.pb_mo > .pb_m5 { background-position: -128px -34px; }
/* Фоновые изображения для DIV активных пунктов меню */
.pb_ms > .pb_m1 { background-position: 0 -50px; }
.pb_ms > .pb_m2 { background-position: -32px -50px; }
.pb_ms > .pb_m3 { background-position: -64px -50px; }
.pb_ms > .pb_m4 { background-position: -96px -50px; }
.pb_ms > .pb_m5 { background-position: -128px -50px; }
/* Фоновые изображения для DIV обычных пунктов меню */
.pb_mi > .pb_m1 { } /* то-же самое, что и "menu li .pb_m1" (см. выше) */
...
/* Дополнительные классы для SPAN-элементов меню */
menu li .pb_ms1 { }
menu li .pb_ms2 { }
menu li .pb_ms3 { }
menu li .pb_ms4 { }
menu li .pb_ms5 { }

CSS для Календаря - эти классы обязательны только при использовании функции работы с календарём .calendar().

См. так же - Визуальный пример календаря (по кнопкам).

/*
    Блочный элемент - перемещаемый блок с календарём.
    У этого блока (класс .pb_calendar) всегда принудительно выставляется position:absolute;
*/

.pb_calendar {
    width:270px; height:300px; color:#000000;
    border:solid 1px #c8c8c8; border-radius:5px; background:#f8f8f8;
}
/* Вложенный блок - заголовок (за него можно перемещать весь блок) */
.pb_cl_head {
    position:absolute; cursor:pointer;
    left:0; top:0; right:30px; height:30px;
    font:normal 13px arial; line-height:30px;
    text-align:center; border-bottom:solid 1px #c8c8c8;
}
/* Вложенный блок закрытия календаря с фоновым изображением из CSS-спрайта */
.pb_cl_head_del {
    position:absolute; display:block;
    top:0; right:0; width:30px; height:30px;
    border-left:1px solid #c8c8c8; border-bottom:1px solid #c8c8c8;
    background-position:-30px -76px;
}
/* Вложенный блок для выбора режима (месяцы/годы/столетия) */
#pb__cl_ym {
    position:absolute; cursor:pointer; background:#eeeeee;
    top:31px; left:40px; right:40px; height:30px;
    font:bold 14px arial; line-height:30px; text-align:center;
}
#pb__cl_ym:hover { background:#e0e0e0; }
/* Класс для вложенных блоков перелистывания (месяцы/годы/столетия) */
.pb_cl_head_ym_lr {
    position:absolute; cursor:pointer; background:#eeeeee;
    top:31px; width:40px; height:30px;
    font:normal 20px arial; line-height:25px; text-align:center;
}
.pb_cl_head_ym_lr:hover { background:#e0e0e0; }
/* Вложенный блок показа информации о столетиях/годах/месяцах/днях */
#pb__cl_body {
    position:absolute; padding:5px; border-top:solid 1px #c8c8c8;
    left:0; top:60px; right:0; bottom:30px;
}
/* Класс для вложенных блоков - кнопок календаря */
.pb_cl_bottom {
    position:absolute; cursor:pointer; background:#eeeeee;
    bottom:0; width:50%; height:28px;
    font:normal 14px arial; line-height:28px; text-align:center;
    border:solid 1px #c8c8c8; border-radius:0 0 5px 5px;
}
.pb_cl_bottom:hover { background:#e0e0e0; }
/* Таблица показа информации о столетиях/годах/месяцах/днях */
.pb_cl_table, .pb_cl_table th, .pb_cl_table td {
    padding:0; font:bold 14px arial; text-align:center;
    border:solid 1px transparent; border-spacing:0; border-radius:4px;
}
.pb_cl_table { width:100%; height:100%; }
.pb_cl_table th { width:14%; height:14%; }
.pb_cl_table td { width:14%; height:14%; }
/* Ячейка таблицы для доступного элемента (выбора) */
.pb_cl_table .pb_day { cursor:pointer; }
/* Ячейка таблицы для НЕдоступного элемента (выбора) */
.pb_cl_table .pb_dayno { color:#909090; }
/* Ячейка таблицы для активного элемента */
.pb_cl_table .pb_daysel { cursor:pointer; border:solid 1px #000000; }
.pb_cl_table .pb_day:hover, .pb_cl_table .pb_daysel:hover { border:solid 1px #808080; }

CSS для оконной системы. Панель окон.

Подробнее см. Работа с панелью окон

/* Если панель видима и имеет position: absolute или fixed, то её можно перемещать. */
.pb_win_panel {
    cursor:pointer; position:absolute; /* fixed / relative */
    left:0px; top:0px; min-width:380px; height:30px;
    border:solid 1px #000080; background:#c8c8c8;
    /* visibility:hidden; display:none;*/
}
/*
    На панели окон автоматически выводятся значки окон - блочные элементы.
    Для них всегда position:absolute; Размеры и положение автоматические.
*/

.pb_win_panel_elem, .pb_win_panel_elem_sel {
    cursor:pointer; width:100px; height:26px;
    overflow:hidden; border:solid 1px #000080; background:#eeeeee;
}
.pb_win_panel_elem_sel {
    border:solid 1px #800000; background:#ffc8c8;
    background:linear-gradient(to bottom,#fff0f0,#ffc8c8);
}
.pb_win_panel_elem table tr td, .pb_win_panel_elem_sel table tr td {
    font:bold 12px arial; text-align:center; color:inherit;
    white-space:nowrap; text-overflow:ellipsis;
}

CSS для оконной системы. Классы для окон.

Подробнее см. Настройка окон

/* Обычное и активное окно. */
.pb_win, .pb_win_sel {
    position:fixed; /* если не указано fixed или absolute, то принудительно будет absolute */
    padding:0; margin:0; background:#eeeeee;
    border:solid 1px #808080; border-radius:5px;
    box-shadow:1px 3px 10px rgba(0, 0, 0, 0.6);
}
.pb_win_sel {
    border:solid 1px #000080; background:#f8f8f8;
    box-shadow:3px 5px 20px rgba(0, 0, 0, 0.6);
}
/* Заголовок обычного и активного окон. */
.pb_win_head, .pb_win_head_sel {
    position:absolute; cursor:pointer; padding:0;
    top:0; left:0; right:0; height:30px; color:#808080;
    font:normal 15px tahoma; text-align:left;
    border-bottom:solid 1px #808080; border-radius:5px 5px 0 0;
    background:#eeeeee; background:linear-gradient(to bottom,#f8f8f8,#d0d0d0);
}
.pb_win_head_sel { color:#000000; }
/* Блок текста в заголовке окна. */
.pb_win_head_text {
    position:absolute; font:inherit; color:inherit;
    top:6px; bottom:0; left:5px; right:60px;
    white-space:nowrap; text-overflow:ellipsis; overflow:hidden;
}
/* Блоки управления в заголовке окна. */
.pb_win_head_del, .pb_win_head_hide {
    position:relative; float:right; width:30px; height:30px;
}
.pb_win_head_del { background-position: -30px -76px; }
.pb_win_head_hide { background-position: -2px -76px; }
/*
    Классы для блоков HTML-содержимого обычного и активного окна.
    Справочники-гриды, фреймы с ютуба, меню, подсказки - фантазия неограничена.
*/

.pb_win_body, .pb_win_body_sel {
    position:absolute; padding:10px; color:#000000;
    top:31px; left:0; bottom:0; right:0;
    font:normal 14px tahoma; text-align:left;
}
/* Блок управления размерами окна. */
.pb_win_resize {
    position:absolute; cursor:se-resize;
    bottom:0; right:0; width:0; height:0;
    border-left:solid 20px transparent; border-bottom:solid 20px #808080;
}

CSS для оконной системы. Классы для модального окна сообщения.

См. так же - Визуальный пример окна сообщения (по кнопке "Показать сообщение").

/*
    Классы для модального окна сообщения (окно с дескриптором 1).
    Отличается только наименованием классов, структура аналогичная остальным окнам.
    Окно сообщения использует оконный класс .pb_win_head_del - для кнопки закрытия окна.
*/

.pb_alert {
    position:fixed; /* если не указано fixed или absolute, то принудительно будет absolute */
    padding:0; margin:0; background:#f8f8f8;
    border:solid 1px #808080; border-radius:5px;
    box-shadow:3px 3px 10px rgba(0, 0, 0, 0.6); }
/* Заголовок модального окна сообщения. */
.pb_alert_head {
    position:absolute; cursor:pointer;
    top:0; left:0; right:0; height:30px;
    border-bottom:solid 1px #808080; border-radius:5px 5px 0 0;
    background:#eeeeee; background:linear-gradient(to bottom,#f8f8f8,#d0d0d0);
}
/* Блок текста в заголовке окна сообщения. */
.pb_alert_head_text {
    position:absolute; color:inherit; overflow:hidden;
    top:6px; bottom:0; left:5px; right:30px;
    font:normal 15px tahoma; white-space:nowrap; text-overflow:ellipsis;
}
/*
    Пользовательские классы для содержимого залоговка .pb_win_head_text
    Классы .pb_ahr, .pb_ahb, .pb_ah0 пприрведены для примера пользовательских классов,
    они используются в HTML-коде заголовка окна (различные пользовательские иконки и т.д.).
*/

.pb_alert_head .pb_ahr { font:inherit; color:#800000; }
.pb_alert_head .pb_ahb { font:inherit; color:#000080; }
.pb_alert_head .pb_ah0 { font:inherit; color:#000000; }
/*
    HTML-содержимое окна сообщения.
    Сюда помещается произвольный HTML-код.
*/

.pb_alert_body {
    position:absolute; padding:10px;
    top:31px; left:0; bottom:0; right:0;
    font:normal 15px tahoma; text-align:center; color:#000000;
}

CSS - классы для модального диалогового окна.

См. так же - Визуальный пример диалогового окна (по кнопке "Показать диалог").

/* Классы для модального диалогового окна. */
.pb_dialog {
    position:fixed; /* если не указано fixed или absolute, то принудительно будет absolute */
    width:300px; height:300px; background:#eeeeee;
    border:solid 1px #808080; border-radius:5px;
    box-shadow:3px 3px 10px rgba(0, 0, 0, 0.6);
}
/* Заголовок диалогового окна. */
.pb_dialog_head {
    position:absolute; cursor:pointer;
    top:0; left:0; right:0; height:30px;
    border-bottom:solid 1px #808080; border-radius:5px 5px 0 0;
    background:#eeeeee; background:linear-gradient(to bottom,#f8f8f8,#d0d0d0);
}
/* Блок текста в заголовке диалогового окна. */
.pb_dialog_head_text {
    position:absolute; cursor:pointer;
    top:6px; bottom:0; left:5px; right:30px;
    font:normal 15px tahoma; white-space:nowrap; text-overflow:ellipsis;
    color:#000000; overflow:hidden;
}
/* Блок закрытия диалогового окна. */
.pb_dialog_head_del {
    position:absolute; background-position:-30px -76px;
    top:0; right:0; width:30px; height:30px;
}
/*
    Произвольное HTML-содержимое диалогового окна - фантазия неограничена.
    Сюда помещаются диалоги, гриды, формы обратной связи и т.д.
*/

.pb_dialog_body {
    position:absolute; padding:10px;
    top:31px; left:0; bottom:0; right:0;
    font:normal 15px tahoma; text-align:left; color:#000000;
}

CSS для Grid - табличный вывод данных. Последовательность описания классов и стилей может быть важна!

Для каждого Грида создаётся дополнительный персональный тег <style> - тема Грида, которую можно менять. В теме добавляются произвольные вложенные CSS-классы для содержимого ячеек, а так же уточняются указанные ниже стили для колонок и заголовков каждого Грида.

См. подробнее - Работа с Grid

/* Классы Grid - табличный вывод данных. */
.pb_grid {
    position:absolute; margin:0; padding:0;
    left:0; top:0; bottom:0; right:0;
    border:none; overflow:auto;
}
/* Внутренний абсолютный DIV-блок, занимает весь заданный объём. */
.pb_g {
    position:absolute; padding:0;
    left:0; top:0; min-width:100%; min-height:100%;
    border:none; overflow:hidden;
}
/* Внутренний DIV-блок, скроллится в родительском. */
.pb_g_b {
    position:relative; margin:0; padding:0;
    min-height:20px; border:none; overflow:hidden;
}
/* Внутренний DIV-блок - заголовок Грида. */
.pb_g_h {
    position:absolute; margin:0; padding:0;
    left:0; top:0; height:30px;
    font:bold 13px arial; text-align:center;
    border:none; background:#e0e0e0; overflow:hidden;
}
.pb_g_h:hover { border:none; background:#d0d0d0; }
/* Внутренние таблицы для заголовка и содержимого Грида. */
.pb_gt, .pb_gt th, .pb_gt td {
    border:dotted 1px #808080; border-collapse:collapse;
    border-spacing:0; padding:0;
}
/* Активная и остальные строки <TR> таблицы содержимого Грида. */
.pb_g_bi,.pb_g_bs {
    min-height:20px; font:normal 13px arial; text-align:left;
}
.pb_g_bi { background:#eeeeee; } .pb_g_bi:hover { background:#d8d8d8; }
.pb_g_bs { background:#d0d0d0; } .pb_g_bs:hover { background:#d0d0d0; }
/* Активная ячейка <TD> таблицы содержимого Грида. */
.pb_gt .pb_g_cs { border:solid 1px #000000; }

.pb_g_h .pb_gt td:hover { background:#c8c8c8; }
.pb_g_b .pb_gt td:hover { background:#c8c8c8; }
.pb_g_h *, .pb_g_bi *, .pb_g_bs * { font:inherit; text-align:inherit; }

  • «VcorpJS» - Главная страница раздела
  • Основные сведения
  • Подключение и инициализация VcorpJS
  • Типовой CSS-файл
  • Краткий обзор и правила, список всех функций.
  • Работа с функциями различного назначения
  • Функции общего назначения
  • Работа с классами и стилями
  • Работа с coockie
  • Работа со слоями (layers)
  • Управление событиями, спец-объект и обработчики
  • Работа со встроенными плагинами
  • Плагины VcorpJS - краткий обзор и правила
  • Перетаскивание объектов
  • Многоуровневые анимационные меню
  • Галереи изображений
  • Блоки ротации изображений
  • Модальное диалоговое окно
  • Модальное окно сообщения
  • Переключатели-флажки checkbox
  • Форматированный ввод данных
  • Поля ввода со списком выбора - combobox
  • Календарь (datepicker)
  • Оконная система
  • Оконная система - краткий обзор и правила
  • Настройка окон и оконная callback-функция
  • Функции работы с окнами
  • Работа с панелью окон
  • Табличный вывод данных Grid
  • Grid - краткий обзор и правила
  • Функции работы с Grid
  • Анимация объектов
  • Краткий обзор и правила анимации
  • Базовая функция анимации
  • Функции - обёртки анимации
  • POST запросы VcorpJS
  • POST запросы VcorpJS
  • Canvas и SVG - графика
  • Canvas - краткий обзор и правила
  • SVG - графики (charts)
  • Скачать vcorp_js_00_80.zip (35 Kb - js и css файлы)
  •  
  • Vcorp.ru - Главная страница сайта
  • Тест больших гридов в перемещаемых окнах
  • Тестирование 3D графики в браузерах
  • «Vcorp Generator» - Главная страница раздела
  • «Lazarus fpCEF3» - Главная страница раздела
  • Открывать окно навигации
    <<<
    Изменить высоту >>