Заключить группу полей под спойлер

InstantCMS 2.X
#1 31 января 2020 в 06:10
Здравствуйте.

Есть группа полей, которая редко используется.

Спустить её вниз не вариант, так как отображение этих полей в записи и списке нужно на определённой позиции.

Но, каждый раз прокручивать эти поля и отвлекаться на них не очень удобно.

Можно как-то заключить группу полей при создании/редактировании записи под спойлер?
#2 31 января 2020 в 06:36
Тип контента -> Настройки -> В самом низу

Хотя в 2.6 этого ещё могло не быть, не знаю точно.
#3 31 января 2020 в 06:40

Тип контента -> Настройки -> В самом низу

чебурек дохлэй мыш
Это для форм создания/редактирования записей, для вывода просмотра записи не работает.
#4 31 января 2020 в 07:13
Да, внизу ничего не наблюдается подобного.
#5 31 января 2020 в 08:49

Это для форм создания/редактирования записей, для вывода просмотра записи не работает.

AndroS

Можно как-то заключить группу полей при создании/редактировании записи под спойлер?

Polzovinst


Да, внизу ничего не наблюдается подобного

Polzovinst
Я ошибся, сейчас посмотрел — там полей нет. Там другие сворачиваемые блоки.


Не знаю, прокатит ли на 2.6. На свежих версиях работает.

1. Устанавливаете виджет


2. В разделе "Страницы и Виджеты" ставите виджет на нужной странице, в Вашем случае это Контент->Тип_контента: Редактирование.

3. Скрываемые поля собираете в группу полей.

4. Открываете страницу добавления или редактирования записи, смотрите в консоли селекторы


5. В виджете открываете вкладку "Код в HEAD" И пишете туда такой код:
  1. <style>
  2. #fset_19c2885d8267ffafbc8fdddc5c364c50 > div{
  3. display:none;
  4. }
  5. #fset_19c2885d8267ffafbc8fdddc5c364c50 > div.open,
  6. #fset_19c2885d8267ffafbc8fdddc5c364c50 > div.close{
  7. height:30px;
  8. line-height:30px;
  9. width:150px;
  10. text-align:center;
  11. color:#fff;
  12. padding:0 8px;
  13. border-radius:3px;
  14. cursor:pointer;
  15. }
  16. #fset_19c2885d8267ffafbc8fdddc5c364c50 > div.open{
  17. display:block;
  18. background:#043e57;
  19. }
  20. #fset_19c2885d8267ffafbc8fdddc5c364c50 > div.close{
  21. background:#ff0000;
  22. }
  23. </style>
Открываете вкладку "Код перед </body>" и туда вставляете такой код
  1. <script>
  2. $(document).ready(function(){
  3. $('#tab-19c2885d8267ffafbc8fdddc5c364c50 legend').before('<div class="open">Развернуть</div>');
  4. $('#tab-19c2885d8267ffafbc8fdddc5c364c50 legend').before('<div class="close">Cвернуть</div>');
  5. $('#tab-19c2885d8267ffafbc8fdddc5c364c50 .open').click(function(){
  6. $('#fset_19c2885d8267ffafbc8fdddc5c364c50 > div').fadeIn(300);
  7. $(this).hide();
  8. });
  9. $('#tab-19c2885d8267ffafbc8fdddc5c364c50 .close').click(function(){
  10. $('#fset_19c2885d8267ffafbc8fdddc5c364c50 > div').hide();
  11. $('#tab-19c2885d8267ffafbc8fdddc5c364c50 .open').fadeIn(300);
  12. });
  13. });
  14. </script>
В первом и во втором коде tab-19c2885d8267ffafbc8fdddc5c364c50 и fset_19c2885d8267ffafbc8fdddc5c364c50 — это ваши селекторы, которые Вы выбрали в п. 4.

6. Сохраните.

Результат:

Иллюстрация

Ну и дальше причесываете, как надо.
#6 31 января 2020 в 10:57
А для фильтра и виджет фильтр можно сворачивание придумать /forum/thread32830-1.html#322995? Основные поля раскрыты, дополнительные открывать через кнопку.
#7 31 января 2020 в 12:32

Результат:

чебурек дохлэй мыш
Великолепно dance
#8 31 января 2020 в 15:19
Добавлю немного другой вариант. (универсальный, без привязи к ID)


  1.  
  2. /*визуально отделяет форму (на усмотрение)*/
  3. form {
  4. padding: 10px;
  5. background-color: #fafafa;
  6. box-shadow: 0 0 1px 0 #777777;
  7. }
  8.  
  9. /*скрывает внутренности филдсетов*/
  10. fieldset .field{display:none}
  11.  
  12. /*визуально выделяет легенду в зеленый оттенок*/
  13. .ready{background-color:#8BC34A !important}
  14.  
  15. /*новый внешний вид (корректировка)*/
  16. .tab fieldset legend{
  17. height: inherit;
  18. line-height: 25px;
  19. width: auto;
  20. color: #ffffff;
  21. padding: 0 8px;
  22. border-radius: 99px;
  23. cursor: pointer;
  24. display: block;
  25. background: #b3c2c9;
  26. /*объем*/
  27. box-shadow: 0 0 2px 1px #999999;
  28. }
  29. form fieldset {
  30. padding: 10px 15px 3px 15px;
  31. border-top: solid 1px #B3C2C9;
  32. border-width: medium;
  33. border-right: none;
  34. border-bottom: none;
  35. border-left: none;
  36. margin: 5px 0;
  37. }
  38.  

  1.  
  2. const legend = document.querySelector("legend");
  3. legend.setAttribute("title", "Развернуть/Свернуть блок");
  4. // оставлю
  5. //$('legend').attr("title", "Развернуть/Свернуть блок");
  6. $(document).ready(function() {
  7. $('.tab').on('click', 'legend', function() {
  8. $(this).toggleClass('ready').siblings('.field').slideToggle(0);
  9. });
  10. });
  11.  
Обратите внимание!
Сработает только если поля заключены в группы. (Группа + Выберите группу = Гуппа такая-то)



#9 31 января 2020 в 18:40
чебурек дохлэй мыш, уже какое-то время назад обратил внимание на Ваш компонент,
скачал, и вот он понадобился в использовании

Жалко только что

Жалко, хороший компонент.
А если без него, то, как разобраться куда вставлять эти коды?
Что-то можно через виджет HTML, а что-то в файлах?
#10 31 января 2020 в 18:43
Дмитрий Баринов, в какие файлы можно вставить эти коды?
Да, удобные стили, выделяют группы визуально.

Получается, что все группы будут под спойлером.
А чтобы все были открыты, а одна закрыта?
#11 31 января 2020 в 18:43
Дмитрий Баринов, в какие файлы можно вставить эти коды?
Да, удобные стили, выделяют группы визуально.

Получается, что все группы будут под спойлером.
А чтобы все были открыты, а одна (или любая определённая) закрыта?
#12 31 января 2020 в 19:37

в какие файлы можно вставить эти коды

Polzovinst
В Подвал страницы поставьте HTML блок, добавьте код(тот что выше) в Содержимое HTML блока, поставьте в ДизайнеШаблон контейнераwrapper_plain, снимите чекбокс с ОбщиеПоказывать заголовок. Все.

А чтобы все были открыты, а одна (или любая определённая) закрыта?

Polzovinst
Ну, тут надо подумать… Так сразу не придумаю.
Придумал laugh
Есть штатная сворачивалка .
Сворачиваемые блоки в форме создания/редактирования записи
Там чек, его надо отметить и тогда наверняка не придется играться с JS! (Вам об этом говорили выше в ответах)


#13 31 января 2020 в 19:55

Есть группа полей, которая редко используется.

Polzovinst
Перечитал вопрос… короче говоря, суть в том, что бы скрывать поля/группу полей при просмотре?!
#14 31 января 2020 в 23:51


В Подвал страницы поставьте HTML блок, добавьте код(тот что выше) в Содержимое HTML блока, поставьте в ДизайнеШаблон контейнераwrapper_plain, снимите чекбокс с ОбщиеПоказывать заголовок. Все.

Дмитрий Баринов
Да, как раз так и делал. Пока не срабатывает. Но, думал раз 2 кода (CSS и js), значит их нужно раскидать в разные места.


Есть группа полей, которая редко используется.

Polzovinst
Перечитал вопрос… короче говоря, суть в том, что бы скрывать поля/группу полей при просмотре?!

Дмитрий Баринов
Да, спойлером.
#15 1 февраля 2020 в 02:44
Ёп-тодей, получилось!)

В html-виджет вставил код:
  1. <html>
  2.  
  3.  
  4. <head>
  5.  
  6. <style>
  7. #fset_5 > div{
  8. display:none;
  9. }
  10. #fset_5 > div.open,
  11. #fset_5 > div.close{
  12. height:30px;
  13. line-height:30px;
  14. width:100px;
  15. text-align:center;
  16. color:#fff;
  17. padding:0 8px;
  18. border-radius:5px;
  19. cursor:pointer;
  20. }
  21. #fset_5 > div.open{
  22. display:block;
  23. background:#0d75a2;
  24. }
  25. #fset_5 > div.close{
  26. background:#248c50;
  27. }
  28. </style>
  29.  
  30. </head>
  31.  
  32.  
  33. <body>
  34.  
  35. <script>
  36. $(document).ready(function(){
  37. $('#tab-5 legend').before('<div class="open">Развернуть</div>');
  38. $('#tab-5 legend').before('<div class="close">Cвернуть</div>');
  39. $('#tab-5 .open').click(function(){
  40. $('#fset_5 > div').fadeIn(300);
  41. $(this).hide();
  42. });
  43. $('#tab-5 .close').click(function(){
  44. $('#fset_5 > div').hide();
  45. $('#tab-5 .open').fadeIn(300);
  46. });
  47. });
  48. </script>
  49.  
  50. </body>
  51.  
  52.  
  53. </html>
  54.  
чебурек дохлэй мыш, спасибо!!!)

Так что, всех с 1 февраля!
Чтоб всё было как в Новый Год, чтоб завтра было лучше чем вчера, а вчера не хуже чем завтра.

Месяц пролетел, за кодом.

Кстати, я чи здесь 3 года уже сегодня. (а ума (не)прибавилось)

Бегут года за годом
Вставляем код за кодом...

P.S. Я тут решил в ворде сохранить данную инструкцию,
и когда начал называть файл, понял, что написал "Код Чебурека".
Я думаю вы не против?

Так что, если хотите, можете оформить этот код в виде дополнения,
и назвать"Код Чебурека: Группа полей под спойлер".
Но это если хотите.

А вообще можете использовать данное название в своей книге
или в названии портала для программистов.
Думаю, успех должен быть.

Код Чебурека от Дохлого Мыша...
Не Дохлый Код от Дохлого Мыша...

Не стеб… Размышления…
Вы не можете отвечать в этой теме.
Войдите или зарегистрируйтесь, чтобы писать на форуме.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.