Обсуждение шаблона:Цитата — различия между версиями
Demetrius (обсуждение | вклад) (→Давайте показывать оригинал не по hover'у, а по щелчку: новая тема) |
Demetrius (обсуждение | вклад) (→Давайте показывать оригинал не по hover'у, а по щелчку: пример JS-скрипта, которым это можно сделать) |
||
Строка 13: | Строка 13: | ||
Сделать показ по щелчку можно несложным JS-скриптом. Если надо, могу его написать. [[Участник:Demetrius|Demetrius]] ([[Обсуждение участника:Demetrius|обсуждение]]) 12:55, 2 мая 2024 (MSK) | Сделать показ по щелчку можно несложным JS-скриптом. Если надо, могу его написать. [[Участник:Demetrius|Demetrius]] ([[Обсуждение участника:Demetrius|обсуждение]]) 12:55, 2 мая 2024 (MSK) | ||
+ | |||
+ | === Примеры скриптов === | ||
+ | |||
+ | Вот пример скрипта для скрытия по hover'у (оба нужно выполнять после загрузки страницы, т.е. нужно запихнуть их либо в <code>$(function () { ... })</code>, либо в <code>document.addEventListener('DOMContentLoaded', function () { ... })</code>. Кроме того, оба кода конфликтуют с нашим теперешим CSS'ом, так что CSS по <code>:hover</code> надо убрать тогда. | ||
+ | |||
+ | <pre> | ||
+ | // на jQuery, ES5 | ||
+ | $('.show_original').click(function () { | ||
+ | var $button = $(this); | ||
+ | var $wrapper = $button.closest('.original'); | ||
+ | var $text = $wrapper.find('.hidden_original'); | ||
+ | if ($text.is(':hidden')) { | ||
+ | $text.show(); | ||
+ | $button.text('Скрыть оригинал'); | ||
+ | } else { | ||
+ | $text.hide(); | ||
+ | $button.text('Показать оригинал'); | ||
+ | } | ||
+ | }); | ||
+ | |||
+ | // без jQuery, современный JS (ES6) | ||
+ | Array.from(document.querySelectorAll('.show_original')).forEach(buttonElement => { | ||
+ | buttonElement.addEventListener('click', function () { | ||
+ | const buttonElement = this | ||
+ | const wrapperElement = buttonElement.closest('.original') | ||
+ | const textElement = wrapperElement.querySelector('.hidden_original'); | ||
+ | if (textElement.style.display === 'none') { | ||
+ | textElement.style.display = ''; | ||
+ | buttonElement.innerText = 'Скрыть оригинал'; | ||
+ | } else { | ||
+ | textElement.style.display = 'none'; | ||
+ | buttonElement.innerText = 'Показать оригинал'; | ||
+ | } | ||
+ | }) | ||
+ | }) | ||
+ | </pre> | ||
+ | |||
+ | [[Участник:Demetrius|Demetrius]] ([[Обсуждение участника:Demetrius|обсуждение]]) 13:24, 2 мая 2024 (MSK) |
Версия 13:24, 2 мая 2024
Оригиналы цитат
Я нашла способ удобно размещать оригинал цитаты в этом шаблоне. Демонстрация. Для этого требуется добавить в MediaWiki:Common.css такие строчки и внести небольшую правку в разметку шаблона, это беру на себя. EvilCat 10:10, ноября 29, 2011 (UTC)
Спасибо. Ждём, когда обновится кэш Викии. EvilCat 18:32, ноября 29, 2011 (UTC)
Давайте показывать оригинал не по hover'у, а по щелчку
Показ оригинала по наведению мыши имеет существенные недостатки:
- Наведение недоступно на устройствах с сенсорным вводом. А это не только мобильные устройства (которые мы и так не поддерживаем), но и планшеты и некоторые ноутбуки.
- Наведение меняет размер страницы, сдвигаяя всё вокруг при перемещении мыши. Это сбивает с толку, т.к. перемещение мыши не воспринимается как действие, а тут при перемещении элементы сдвигаются.
Сделать показ по щелчку можно несложным JS-скриптом. Если надо, могу его написать. Demetrius (обсуждение) 12:55, 2 мая 2024 (MSK)
Примеры скриптов
Вот пример скрипта для скрытия по hover'у (оба нужно выполнять после загрузки страницы, т.е. нужно запихнуть их либо в $(function () { ... })
, либо в document.addEventListener('DOMContentLoaded', function () { ... })
. Кроме того, оба кода конфликтуют с нашим теперешим CSS'ом, так что CSS по :hover
надо убрать тогда.
// на jQuery, ES5 $('.show_original').click(function () { var $button = $(this); var $wrapper = $button.closest('.original'); var $text = $wrapper.find('.hidden_original'); if ($text.is(':hidden')) { $text.show(); $button.text('Скрыть оригинал'); } else { $text.hide(); $button.text('Показать оригинал'); } }); // без jQuery, современный JS (ES6) Array.from(document.querySelectorAll('.show_original')).forEach(buttonElement => { buttonElement.addEventListener('click', function () { const buttonElement = this const wrapperElement = buttonElement.closest('.original') const textElement = wrapperElement.querySelector('.hidden_original'); if (textElement.style.display === 'none') { textElement.style.display = ''; buttonElement.innerText = 'Скрыть оригинал'; } else { textElement.style.display = 'none'; buttonElement.innerText = 'Показать оригинал'; } }) })
Demetrius (обсуждение) 13:24, 2 мая 2024 (MSK)