Обсуждение шаблона:Spoiler — различия между версиями

Материал из Вики LessWrong.ru
Перейти к: навигация, поиск
(Новая страница: «Чтобы спойлеры работали, нужно добавить js и css. В common.css: <pre>.spoiler { background: #EEEEEE; display: inline-blo…»)
 
 
Строка 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);