Обсуждение шаблона:Spoiler — различия между версиями
Fpaint (обсуждение | вклад) (Новая страница: «Чтобы спойлеры работали, нужно добавить js и css. В common.css: <pre>.spoiler { background: #EEEEEE; display: inline-blo…») |
Fpaint (обсуждение | вклад) |
||
Строка 1: | Строка 1: | ||
Чтобы спойлеры работали, нужно добавить js и css. | Чтобы спойлеры работали, нужно добавить js и css. | ||
− | В common.css: | + | В [[MediaWiki:Common.css|common.css]]: |
<pre>.spoiler { | <pre>.spoiler { | ||
background: #EEEEEE; | background: #EEEEEE; | ||
Строка 29: | Строка 29: | ||
}</pre> | }</pre> | ||
− | В common.js: | + | В [[MediaWiki:Common.js|common.js]]: |
<pre>function init_spoilers() { | <pre>function init_spoilers() { | ||
$(document).on('click', '.spoiler > .spoiler_title', function(e) { | $(document).on('click', '.spoiler > .spoiler_title', function(e) { |
Текущая версия на 07:49, 25 октября 2017
Чтобы спойлеры работали, нужно добавить js и css.
В common.css:
.spoiler { background: #EEEEEE; display: inline-block; padding: 0.2em 0.5em; border-radius: 0.3em; } .spoiler > .spoiler_title { cursor: pointer; display: inline-block; } .spoiler > .spoiler_title:hover { text-decoration: underline; text-decoration-style: dotted; } .spoiler > .spoiler_inner { display: none; font-size: 90%; max-width: 50em; } .spoiler.expanded > .spoiler_inner { display: block; }
В common.js:
function init_spoilers() { $(document).on('click', '.spoiler > .spoiler_title', function(e) { e.stopPropagation(); var spoiler = $(e.target).parent(); var inner = $('.spoiler_inner', spoiler); var expanded = spoiler.hasClass('expanded'); if(expanded) { inner.slideUp(); } else { inner.slideDown(); } spoiler.toggleClass('expanded'); }); } $(init_spoilers);