Найти на сайте
  2. Форумы
  3. РАЗНОЕ
  4. Флейм / Флуд / Оффтопик
  5. Заключить группу полей под спойлер

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

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

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

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

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

Можно как-то заключить группу полей при создании/редактировании записи под спойлер?
СЛАВА БЭКАПУ! ПРОГРАММИСТАМ СЛАВА!
0
#2 31 января 2020 в 06:36
Тип контента -> Настройки -> В самом низу

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

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

чебурек дохлэй мыш
Это для форм создания/редактирования записей, для вывода просмотра записи не работает.
Вкусные цены на NVME Win-сервера, Компоненты для заработка
0
#4 31 января 2020 в 07:13
Да, внизу ничего не наблюдается подобного.
СЛАВА БЭКАПУ! ПРОГРАММИСТАМ СЛАВА!
0
#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. Сохраните.

Результат:

Иллюстрация

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

Результат:

чебурек дохлэй мыш
Великолепно dance
0
#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.  
Обратите внимание!
Сработает только если поля заключены в группы. (Группа + Выберите группу = Гуппа такая-то)



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

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

Жалко, хороший компонент.
А если без него, то, как разобраться куда вставлять эти коды?
Что-то можно через виджет HTML, а что-то в файлах?
СЛАВА БЭКАПУ! ПРОГРАММИСТАМ СЛАВА!
0
#10 31 января 2020 в 18:43
Дмитрий Баринов, в какие файлы можно вставить эти коды?
Да, удобные стили, выделяют группы визуально.

Получается, что все группы будут под спойлером.
А чтобы все были открыты, а одна закрыта?
СЛАВА БЭКАПУ! ПРОГРАММИСТАМ СЛАВА!
0
#11 31 января 2020 в 18:43
Дмитрий Баринов, в какие файлы можно вставить эти коды?
Да, удобные стили, выделяют группы визуально.

Получается, что все группы будут под спойлером.
А чтобы все были открыты, а одна (или любая определённая) закрыта?
СЛАВА БЭКАПУ! ПРОГРАММИСТАМ СЛАВА!
0
#12 31 января 2020 в 19:37

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

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

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

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


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

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

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


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

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


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

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

Дмитрий Баринов
Да, спойлером.
СЛАВА БЭКАПУ! ПРОГРАММИСТАМ СЛАВА!
0
#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. Я тут решил в ворде сохранить данную инструкцию,
и когда начал называть файл, понял, что написал "Код Чебурека".
Я думаю вы не против?

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

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

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

Не стеб… Размышления…
СЛАВА БЭКАПУ! ПРОГРАММИСТАМ СЛАВА!
0
Ошибки при обновлении.
Как поменять редактор в Типе к
Вы не можете отвечать в этой теме.
Войдите или зарегистрируйтесь, чтобы писать на форуме.

Похожие темы

Автоматическое формирование поля контента на основе значений других полей по шаблону

Инновации в системе Создана 2 года назад 10 сообщений

Скрыть под спойлер, как?...

Компоненты Создана 4 года назад 7 сообщений

[ЕСТЬ РЕШЕНИЕ] Как поменять редактор стены группы???

Релизы 2.X Создана 1 месяц назад 3 сообщения

Вывод категорий с списке записей на главной ТК в виде спойлеров с раскрывающимся списком. Возможно?

Разработка и тестирование Создана 3 месяца назад 10 сообщений

Не могу редактировать типы контента

Сайт и форум проекта Создана 3 года назад 6 сообщений

Перестал работать «Спойлер» в TinyMCE.

Вопросы настройки InstantCMS Создана 10 месяцев назад 7 сообщений

InstantCMS Team

Связь с нами
Email dev@instantcms.ru

Делаем полезные Интернет проекты с 2008 года 💫

О проекте

Поддержка

Дополнения

Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.