Предлагаемое решение. Данные помещены в слой с прокруткой содержимого и добавлена кнопка Свернуть все группы.
В итоге группы легко сворачиваются и подчиненные таблицы находятся в зоне видимости.
2016-03-04_005455.png 563,63К 77 Количество загрузок:
Код в подключаемый js-файл:
// изменение координат кнопки Свернуть все группы function btn_change_X() { x=$("#view_block").offset(); $("#collapse_all_groups").css("left", Math.round(x.left + 600)); $("#collapse_all_groups").css("top", Math.round(x.top + 20)); } $(function($) { // =========================================================================================== // ВЫВОД КНОПКИ СВЕРТЫВАНИЯ ВСЕХ ГРУПП В РЕЖИМЕ ПРОСМОТРА // =========================================================================================== // проверяем наличие групп if ($("[id^='fgroup_view_header']").length) { // создаем слой для размещения управляющей кнопки сворачивания $("#view_block").prepend("<div id='collapse_all_groups' title='Свернуть все группы'></div>"); // задаем координаты кнопки btn_change_X(); // создаем пустой фрейм для отлавливания события изменения размеров страницы $("div.content").first().append('<iframe id="frame0" name="frame0" width=100% height=100% style="position:absolute; top:0px; z-index:-1"></iframe>'); // переназначаем координаты управляющей кнопки при изменении размеров страницы frame0.onresize = function() { btn_change_X(); } // вешаем на кнопку событие при клике мышью $("#collapse_all_groups").click(function(){ $("tbody[id^='fgroup_view']").css("display","none"); $("img[id^='fg_img_view']").attr("src","images/none.gif"); // сохраняем значение в базе о свернутых группах // при следующем открытии записи все группы будут свернуты $("tbody[id^='fgroup_view']").each(function(index,element){ var src = $(element).attr("id"); var fgroup_id = src.match(/\d+/); save_fgroup_set(fgroup_id[0], 0); }); }); // вешаем на иконку со знаком вопроса событие при наведении мыши $("[src='images/help.gif']").mouseover(function(){ $(this).next().css("top", $(this)[0].y + 15); }); }В файл стилей:
div#view_block { max-height: 600px; overflow-y: auto; width: 650px; border: #999999 inset 1px; border-radius: 10px; background-color: hsl(44, 100%, 98%); padding: 10px; } div#collapse_all_groups { filter: gray; /* IE6-9 */ -webkit-filter: grayscale(1); position:absolute; width:32px; height:32px; background-image:url(images/32_collapse.png); border: 2px outset #C0C0C0; border-radius: 5px; z-index: 1000; opacity: 0.5; transition: opacity 1.0s ease-out; } div#collapse_all_groups:hover { filter: none; /* IE6-9 */ -webkit-filter: none; cursor: pointer; opacity: 1.0; }Обратите внимание на путь в параметре background-image:url. Он должен указывать на расположение иконки 32_collapse.png 1,35К 76 Количество загрузок:, которая размещена на кнопке.
Сообщение отредактировал andibrag: 30 Март 2016 - 13:26