Перейти к содержимому


Сворачивание всех групп в режиме отображения

запись отображение интерфейс группы

Сообщений в теме: 11

#1 andibrag

    Прежде, чем задать вопрос, продумайте свое решение.

  • Активный пользователь
  • PipPipPip
  • 1 327 сообщений
  • Пол:Мужчина
  • Город:Санкт-Петербург

Отправлено 04 Март 2016 - 01:20

Регулярно испытываю неудобство, связанное с большим количеством информации в режиме отображения и как следствие - очень далеко крутить до Подчиненных таблиц внизу страницы. Закрытие групп проблему не решает, поскольку до группы тоже еще добраться нужно. Сворачивать каждую последовательно неудобно.
Предлагаемое решение. Данные помещены в слой с прокруткой содержимого и добавлена кнопка Свернуть все группы.
В итоге группы легко сворачиваются и подчиненные таблицы находятся в зоне видимости.
Прикрепленный файл  2016-03-04_005455.png   563,63К   73 Количество загрузок:
Код в подключаемый 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К   71 Количество загрузок:, которая размещена на кнопке.

Сообщение отредактировал andibrag: 30 Март 2016 - 13:26

Творческая группа "ТАВР".

www.MEGATAVR.com Художественная ковка, витражи, мозаика, фрески.

www.iGal.pro Уникальный мангал.


#2 wondertalik

    Активный участник

  • Пользователи
  • PipPipPip
  • 1 156 сообщений
  • Пол:Мужчина
  • Город:Кривой Рог, Украина

Отправлено 04 Март 2016 - 23:22

Интересное решение. Спасибо

#3 Darling

    Участник

  • Пользователи
  • PipPip
  • 14 сообщений

Отправлено 23 Март 2016 - 15:25

Как вариант для ленивых вместо background-image:url(images/32_collapse.png); указать следующий код:
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjlBNzMwRjBFREQzMTExRTU4QTkzOEE2Q0FBQ0Y5OUQ1IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjlBNzMwRjBGREQzMTExRTU4QTkzOEE2Q0FBQ0Y5OUQ1Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6OUE3MzBGMENERDMxMTFFNThBOTM4QTZDQUFDRjk5RDUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6OUE3MzBGMERERDMxMTFFNThBOTM4QTZDQUFDRjk5RDUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6OyyYuAAAAYFBMVEX/3Kb/////qQD/rwzzsUz/ynD/mgDnkQD/7MvAl1mBURKSVQCdfFHEgSK+cACpZAD/9OXXfwD/mQCTbDLriwDu3cn39fP7rAD++vfs6OLz7uni2tLXuZf29/v/+O7/vDxnp5kjAAABbUlEQVR42syS3ZKDIAyFkYhosaBgBX95/7fcQLS2szuz3bvNeAHJNzGcE1b8EuwzoN6/V0JdPwEWWZeTxNGZRdEdQGkhilRjGd9TITAOmcBUaJTMBAMCvAiF4JbzsqYOc6uGGIWIMQOjBCE8wDA8zhk2p6SPwKnDqCsOwGW/XK8YnbZYJ2AzA+fg/eNVh03jLznkh40J4CDehGKySknqoPoKbzjpBQjZYwyWZrgpY0zvY/cEVkyo201p6tC6FqMpSZus6raNY9i37U3qEP5g1j8Aurrbu/zRPtRHnPtQzKVPbgpB/UqIGEBKUerRSLQKDv2bIbnJ4/hq1l1eBjU6GRPfhtytfQXwAm/AXnpvK8tPQOI5ikvqXXCoeqOrAzDaaFxTFg4g1aG/r62mto1qVmcsEQlY9WD7+1RMrsxA60Kx3BS+BYkELE6Z+5xeu1KHdJ4wea494m4+duDSeHZuCufCLPMPLszzR2Z9CTAAZSYX6Wk0P2QAAAAASUVORK5CYII=) no-repeat center center;


#4 andibrag

    Прежде, чем задать вопрос, продумайте свое решение.

  • Активный пользователь
  • PipPipPip
  • 1 327 сообщений
  • Пол:Мужчина
  • Город:Санкт-Петербург

Отправлено 24 Март 2016 - 09:18

Просмотр сообщенияDarling (23 Март 2016 - 15:25) писал:

Как вариант для ленивых...
Можно и так. Единственное, в первом варианте иконку можно на свой вкус подобрать.

Творческая группа "ТАВР".

www.MEGATAVR.com Художественная ковка, витражи, мозаика, фрески.

www.iGal.pro Уникальный мангал.


#5 andibrag

    Прежде, чем задать вопрос, продумайте свое решение.

  • Активный пользователь
  • PipPipPip
  • 1 327 сообщений
  • Пол:Мужчина
  • Город:Санкт-Петербург

Отправлено 25 Март 2016 - 11:16

Разработчикам.
Заметил одну особенность. Если прокрутить содержимое внутри окна и навести на знак вопроса - вывод справки по полю происходит некорректно.
Прикрепленный файл  2016-03-25_095812.jpg   39,86К   17 Количество загрузок:Прикрепленный файл  2016-03-25_095924.jpg   48,3К   20 Количество загрузок:
Возможно координаты для слоя справки для каждого элемента формируются при загрузке страницы. Можно поменять этот алгоритм. Я понимаю, что доработка не является плановой, но надеюсь на сотрудничество.

Творческая группа "ТАВР".

www.MEGATAVR.com Художественная ковка, витражи, мозаика, фрески.

www.iGal.pro Уникальный мангал.


#6 andibrag

    Прежде, чем задать вопрос, продумайте свое решение.

  • Активный пользователь
  • PipPipPip
  • 1 327 сообщений
  • Пол:Мужчина
  • Город:Санкт-Петербург

Отправлено 30 Март 2016 - 13:28

Отредактировал код, выложенный в начале темы. Исправил вывод справки при наведении на иконку вопроса.

Творческая группа "ТАВР".

www.MEGATAVR.com Художественная ковка, витражи, мозаика, фрески.

www.iGal.pro Уникальный мангал.


#7 Whitescorpion

    Активный участник

  • Пользователи
  • PipPipPip
  • 56 сообщений

Отправлено 20 Сентябрь 2016 - 17:57

Просмотр сообщенияandibrag (30 Март 2016 - 13:28) писал:

Отредактировал код, выложенный в начале темы. Исправил вывод справки при наведении на иконку вопроса.
А как такое-же осуществить в облачной версии? Можно как-то прикрутить стили без создание своего файла стилей?

#8 CbCoder

    Активный участник

  • Программист ООО "КБ"
  • PipPipPip
  • 8 658 сообщений
  • Пол:Мужчина
  • Город:Казань

Отправлено 21 Сентябрь 2016 - 10:07

Просмотр сообщенияWhitescorpion (20 Сентябрь 2016 - 17:57) писал:

А как такое-же осуществить в облачной версии? Можно как-то прикрутить стили без создание своего файла стилей?

Свои файлы можно прикрутить через механизм внешних файлов. Затем указываете загруженный файл в Настройки - Лого и цвета.

#9 Tony999

    Активный участник

  • Пользователи
  • PipPipPip
  • 379 сообщений
  • Пол:Мужчина
  • Город:Санкт-Петербург

Отправлено 20 Ноябрь 2016 - 00:22

Какой большой и сложный код!
Попробуем много проще.
"Сворачиваем" группы, это в стили:
[id *= field_view] {
display: none;  
}
Открываем группы, например, так. Или кнопку/триггер прикрутите.
Это в скрипт:
// Открыть группы в просмотре
$('#view_block').mouseenter(function() {
$('[id *= field_view]').css("display","table-row ");
});
Вот и все!

Сообщение отредактировал Tony999: 21 Ноябрь 2016 - 02:52

КБ - помощь, проекты и решения.
Хостинг. Аренда. Продажа.
ВашаБаза.рф

#10 andibrag

    Прежде, чем задать вопрос, продумайте свое решение.

  • Активный пользователь
  • PipPipPip
  • 1 327 сообщений
  • Пол:Мужчина
  • Город:Санкт-Петербург

Отправлено 21 Ноябрь 2016 - 14:00

Просмотр сообщенияTony999 (20 Ноябрь 2016 - 00:22) писал:

Какой большой и сложный код!
Код большой потому, что формирует иной интерфейс отображения записи со всеми вытекающими, а не просто сворачивает группы. Насчет сложного - вероятно оптимизировать можно, но времени не было. Для сворачивания используется аналогичный Вашему механизм:
$("tbody[id^='fgroup_view']").css("display","none");
Остальные строки для других целей.

Творческая группа "ТАВР".

www.MEGATAVR.com Художественная ковка, витражи, мозаика, фрески.

www.iGal.pro Уникальный мангал.


#11 Tony999

    Активный участник

  • Пользователи
  • PipPipPip
  • 379 сообщений
  • Пол:Мужчина
  • Город:Санкт-Петербург

Отправлено 21 Ноябрь 2016 - 18:04

Вижу название темы: "Сворачивание всех групп в режиме отображения"... и ничего более, в т.ч и на счет особого вида отображения.
Поэтому и удивился, что так много кода надо (и посетители форума, наверное, тоже этому удивились).
Кстати, Ваш механизм
[id^='fgroup_view']
лучше, так как не будет скрывать несгруппированные поля, лучше использовать его.
КБ - помощь, проекты и решения.
Хостинг. Аренда. Продажа.
ВашаБаза.рф

#12 andibrag

    Прежде, чем задать вопрос, продумайте свое решение.

  • Активный пользователь
  • PipPipPip
  • 1 327 сообщений
  • Пол:Мужчина
  • Город:Санкт-Петербург

Отправлено 22 Ноябрь 2016 - 11:30

Просмотр сообщенияTony999 (21 Ноябрь 2016 - 18:04) писал:

Вижу название темы: "Сворачивание всех групп в режиме отображения"... и ничего более, в т.ч и на счет особого вида отображения.
Основное именно сворачивание. Внешний вид, как это выглядит, дан на скриншоте, описание в тексте. В тему все не поместилось.

Творческая группа "ТАВР".

www.MEGATAVR.com Художественная ковка, витражи, мозаика, фрески.

www.iGal.pro Уникальный мангал.






Количество пользователей, читающих эту тему: 1

0 пользователей, 1 гостей, 0 анонимных