Головна » Блоги » InstantCMS - переваги та недоліки системи » Шаблон для віджетів InstanCMS 2 з посиланнями в загловку, які відкриваються при наведенні чи по кліку

Шаблон для віджетів InstanCMS 2 з посиланнями в загловку, які відкриваються при наведенні чи по кліку

0
Голосів: 0
Опубліковано: 2018 / 11 / 19
Переглядів: 58
Редагувалося: 5 раз — останній 19 листопада 2018
Досить часто ми зустрічаємося з ситуацією, коли в заголовку віджета треба вивести значну кількість посиланнь. При цьому певна іх кількість не поміщається в блок заголовка і стає невидимими.
Для таких випадків зробив окремий шаблон виводу віджета. В ньому посилання виводяться при наведенні на бутон (на компьютерах) або по кліку на ньому (на телефонах та планшетах).
В кінцевому варіанті віджет виглядаме так (стилізувався під дефолтний шаблон):

Шаблон для віджетів InstanCMS 2 з посиланнями в загловку, які відкриваються при наведенні чи по кліку


Щоб зробити такий варіант виводу віджета, створіть в папці templates - default - widgets файл wrapper_links.tpl.php (можна назвати інакше).
Його код (для 2.10.2) буде таким:
Код PHP:
  1.  
  2. <?php $device_type = cmsRequest::getDeviceType(); ?>
  3. <div class="widget<?php if ($widget['class_wrap']) { ?> <?php echo $widget['class_wrap']; } ?>" id="widget_wrapper_<?php echo $widget['id']; ?>">
  4. <?php if ($widget['title'] && $is_titles){ ?>
  5. <h4 class="title<?php if ($widget['class_title']) { ?> <?php echo $widget['class_title']; } ?> for_links_switch <?php echo $device_type; ?>_title" id="title<?php echo $widget['id']; ?>">
  6. <?php echo $widget['title']; ?>
  7. <?php if (!empty($widget['links'])) { ?>
  8. <div class="links_block" id="links_block_<?php echo $widget['id']; ?>">
  9. <div id="link_switch_<?php echo $widget['id']; ?>" class="links_switch"></div>
  10. <div id="links_<?php echo $widget['id']; ?>" class="widget_links">
  11. <?php $links = string_parse_list($widget['links']); ?>
  12. <?php foreach($links as $link){ ?>
  13. <a href="<?php echo (strpos($link['value'], 'http') === 0) ? $link['value'] : href_to($link['value']); ?>">
  14. <?php echo $link['id']; ?>
  15. </a>
  16. <?php } ?>
  17. </div>
  18. </div>
  19. <?php } ?>
  20. </h4>
  21. <?php } ?>
  22. <div class="body<?php if ($widget['class']) { ?> <?php echo $widget['class']; } ?>">
  23. <?php echo $widget['body']; ?>
  24. </div>
  25. <?php if(cmsUser::isAdmin()){ ?>
  26. <?php include 'wrap_edit_links.tpl.php'; ?>
  27. <?php } ?>
  28. </div>
  29.  
  30. <style>
  31. .widget > .title.for_links_switch {
  32. position: relative;
  33. padding-right: 50px;
  34. height: auto;
  35. min-height: 47px;
  36. }
  37. .links_block {
  38. position: absolute;
  39. top: 0;
  40. right: 0;
  41. height: 47px;
  42. line-height: 47px;
  43. }
  44. .links_switch {
  45. background: url(templates/default/images/icons32/menu-icon.svg) no-repeat center center;
  46. background-size: 30px 26px;
  47. cursor: pointer;
  48. position: absolute;
  49. right: 10px;
  50. top: 12px;
  51. width: 30px;
  52. height: 24px;
  53. transition: .3s;
  54. z-index: 102;
  55. }
  56. .links_block:hover .links_switch {
  57. background-color: #27ae60;
  58. background-size: 24px 20px;
  59. }
  60. .widget_links {
  61. border: 5px solid #27ae60;
  62. background-color: #fff;
  63. position: absolute;
  64. right: 10px;
  65. top: 31px;
  66. width: 250px;
  67. line-height: 25px;
  68. padding: 0 1px 1px;
  69. opacity: 0;
  70. visibility: hidden;
  71. transition: .3s;
  72. }
  73. .links_switch:hover + .widget_links,
  74. .widget_links:hover {
  75. opacity: 1;
  76. visibility: visible;
  77. z-index: 101;
  78. }
  79. .widget_links > a {
  80. background-color: #fff;
  81. border-bottom: 1px solid #27ae60;
  82. display: block;
  83. padding: 0 15px;
  84. font-size: .8em;
  85. font-weight: 400;
  86. text-decoration: none;
  87. }
  88. .widget_links > a:last-child {
  89. border-width: 0;
  90. }
  91. .widget_links > a:hover {
  92. background-color: #ecf0f1;
  93. }
  94. </style>
  95. <?php if($device_type != 'desktop' && !empty($widget['links'])) { ?>
  96. <style>
  97. .for_links_active .links_switch {
  98. background-color: #27ae60;
  99. background-size: 24px 20px;
  100. }
  101. .for_links_active .widget_links {
  102. opacity: 1;
  103. visibility: visible;
  104. }
  105. </style>
  106. <script>
  107. $(function(){
  108. $("#link_switch_<?php echo $widget['id']; ?>").click(function(){
  109. $("#title<?php echo $widget['id']; ?>").toggleClass("for_links_active");
  110. });
  111. });
  112. $(function(){
  113. $(document).click(function(event) {
  114. if ($(event.target).closest("#title<?php echo $widget['id']; ?>.for_links_active .links_block").length) return;
  115. $("#title<?php echo $widget['id']; ?>").removeClass("for_links_active");
  116. event.stopPropagation();
  117. });
  118. });
  119. </script>
  120. <?php } ?>
  121.  
Як ви вже помітили, скрипт, який потрібен для перемикання видимості блоку з посиланнями, підключається тільки для пристроїв, що будуть ідентифіковані системою як телефони або планшети. Нагадую, що на компьютерах блок виведеться при наведенні на кнопку.

Далі все просто: в налаштуваннях потрібних віджетів на вкладці "Дизайн" в опції "Шаблон контейнера" виберіть створений файл і додавайте в заголовок стільки посиланнь, скільки вам потрібно.

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

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

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