Головна » Блоги » InstantCMS - переваги та недоліки системи » Як розділити простір порівну між трьома позиціями з виведеними віджетами в шаблоні InstantCMS 2-х

Як розділити простір порівну між трьома позиціями з виведеними віджетами в шаблоні InstantCMS 2-х

+1
Голосів: 1
Опубліковано: 2018 / 02 / 28
Переглядів: 128
Редагувалося: 5 раз — останній 28 лютого 2018
Вітаю, друзі!
Кілька раз зверталися користувачі з проханням про таке рішення.
Отже, є рядок з 3-х позицій та необхідність розділити порівну доступний рядку простір між позиціями, в які виведено віджети.
Спадають на думку кілька варіантів. Один з них нижче.
Отже, створюємо в файлі макету шаблона (templatesшаблонscheme.html) потрібні позиціі.
Хай це будуть three_left, three_center, three_right.

Де-небудь в верху файла main.tpl.php призначимо змінні:
Код PHP:
  1.  
  2. $is_left = $this->hasWidgetsOn('three_left');
  3. $is_center = $this->hasWidgetsOn('three_center');
  4. $is_right = $this->hasWidgetsOn('three_right');
  5. $is_left_center = $is_left && $is_center && !$is_right;
  6. $is_left_right = $is_left && $is_right && !$is_center;
  7. $is_center_right = $is_center && $is_right && !$is_left;
  8. $is_left_center_right = $is_left && $is_center && $is_right;
  9.  
Надіюся, тут все зрозуміло, перші 3 змінних - виведено віджети в відповідну позицію, наступні - їх можливі комбінаціїї.
Виводимо в шаблон, призначаємо сеоектори з умовами на комбінації:
Код PHP:
  1.  
  2. <?php if($is_left || $is_center || $is_right) { ?>
  3. <div class="three<?php if($is_left_center_right){ ?> three_pos<?php } elseif($is_left_center ||
  4. $is_left_right || $is_center_right){ ?> two_pos<?php } ?>">
  5. <?php if ($is_left){ ?>
  6. <div>
  7. <?php $this->widgets('three_left'); ?>
  8. </div>
  9. <?php } ?>
  10. <?php if ($is_center){ ?>
  11. <div>
  12. <?php $this->widgets('three_center'); ?>
  13. </div>
  14. <?php } ?>
  15. <?php if ($is_right){ ?>
  16. <div>
  17. <?php $this->widgets('three_right'); ?>
  18. </div>
  19. <?php } ?>
  20. </div>
  21. <?php } ?>
  22.  
Додаємо в стиль пару правил:
Код PHP:
  1.  
  2. .three > div{
  3. box-sizing: border-box;
  4. float: left;
  5. margin: 0 0 1em;
  6. padding: 0 1em;
  7. width: 33.33%;
  8. }
  9. .three.two_pos > div{
  10. width: 50%;
  11. }
  12. .three.three_pos > div{
  13. width: 100%;
  14. }
  15.  
Готово! Наш шаблон став значно гнучкішким.
Миру вам!

Читайте також:

Коментарі (0)

Немає коментарів. Ваш буде першим!