3
Предлагаемое решение. Данные помещены в слой с прокруткой содержимого и добавлена кнопка Свернуть все группы.
В итоге группы легко сворачиваются и подчиненные таблицы находятся в зоне видимости.
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
