Уважаемые пользователи!
C 7 ноября 2020 года phpBB Group прекратила выпуск обновлений и завершила дальнейшее развитие phpBB версии 3.2.
С 1 августа 2024 года phpBB Group прекращает поддержку phpBB 3.2 на официальном сайте.
Сайт официальной русской поддержки phpBB Guru продолжит поддержку phpBB 3.2 до 31 декабря 2024 года.
С учетом этого, настоятельно рекомендуется обновить конференции до версии 3.3.

Спойлер на скорую руку

Форум для авторов расширений для phpBB. Здесь можно попросить помощи в разработке у коллег.
Правила форума
Местная Конституция | Шаблон запроса | Документация (phpBB3) | Мини [FAQ] по phpBB3.1.x/3.3.x | FAQ | Как задавать вопросы | Как устанавливать расширения

Ваш вопрос может быть удален без объяснения причин, если на него есть ответы по приведённым ссылкам (а вы рискуете получить предупреждение ;) ).
Wapik
phpBB 1.0.0
Сообщения: 6
Стаж: 8 лет 4 месяца
Поблагодарили: 1 раз

Спойлер на скорую руку

Сообщение Wapik »

Всем привет.
Через полторы недели ковыряния в phpBB решил выложить свою 1ю фишку,которую я гордо обозвал "модом" (ох уж моя самооценка).
Суть в том,что однажды мне захотелось на свой форум поставить спойлер. Различные существующие решения меня не интересовали - хотелось самому облажаться. И вот,что родила моя фантазия (может,кому-нибудь сей бред и пригодится).
Сначала мы идем в админку,а именно - "Нагрузка на сервер". Включаем пункт "Перекомпилировать старые шаблоны". Это нам пригодится,чтобы не бегать постоянно и не чистить кэш шаблонов.
Теперь заходим в менеджер и открываем папку стилей. В каждом стиле копируем это (можно в один родительский,но ничего не гарантирую).

Код: Выделить всё

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script>
var noConflict = jQuery.noConflict( );
noConflict(document).ready(function( ){
noConflict("div.spoiler_container div.spoiler_body").fadeOut(0);
noConflict("div.spoiler_container div.spoiler_title").click(function( ){
noConflict(this).next("div.spoiler_body").toggle(0);
});
});
</script>
Этот JS код скроет то,что нужно от пользователя и будет реагировать на клик (открыть/зaкрыть). Если JS у пользователя не работает,то содержимое спойлера будет развернуто.
Далее - стилизуем наш спойлер.
Создаем файл spoiler_design.css в папке "theme" наших стилей и заполнаем его таким кодом:

Код: Выделить всё

div.spoiler_container div.spoiler_title{
padding: 4px;
border: 1px solid black;
background: #f5f5f5;
color: #000;
font-weight: bold;
}
div.spoiler_container div.spoiler_title:before{
content: "(+/-) ";
}
div.spoiler_container div.spoiler_body{
border: 1px dotted black;
border-top: 0px;
padding: 4px;
padding-top: 3px;
background: #fff;
color: #000;
}
Отлично. Но стили пока что не работают. Необходимо в файле stylesheet.css в стилях включить наш стиль

Код: Выделить всё

@import url("spoiler_design.css");
Sic! Тег import в CSS необходимо прописывать до прямой стилизации (т.е. до описания стилей).
А теперь нам осталось добавить сам тег в админке.
Переходим во вкладку "Сообщения" и видим список пользовательских BB кодов. Жмем "Добавить BBCode".
И заполняем по своему усмотрению.
Но перед этим прочитайте примечание.

- DIV блок с классом spoiler_body содержит скрываемый текст.
- DIV блок с классом spoiler_title содержит заголовок спойлера.
- DIV блок с классом spoiler_container является оберткой спойлера.

Все эти блоки обязательны.
Например,мой BB тег выглядит так:

Код: Выделить всё

[spoiler={TEXT1}]{TEXT2}[/spoiler]
Замена:
<div class="spoiler_container">
<div class="spoiler_title">{TEXT1}</div>
<div class="spoiler_body">{TEXT2}</div>
</div>
На этом все. Сильно не пинайте,под phpBB работаю еще мало.)
Wapik
phpBB 1.0.0
Сообщения: 6
Стаж: 8 лет 4 месяца
Поблагодарили: 1 раз

Re: Спойлер на скорую руку

Сообщение Wapik »

UPD: JS код копируем в overall_header.html шаблонов.
Аватара пользователя
KimIV
phpBB 2.0.1
Сообщения: 286
Стаж: 8 лет 6 месяцев
Откуда: Кунгур
Благодарил (а): 166 раз
Поблагодарили: 21 раз

Re: Спойлер на скорую руку

Сообщение KimIV »

Вот это что такое?
Wapik писал(а):

Код: Выделить всё

src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js
Что-то внешнее? А оно безопасное? А в дальнейшем оно будет безопасным?
Ты должен делать добро из зла, потому что его больше не из чего делать. Уоренн Роберт Пенн.
Wapik
phpBB 1.0.0
Сообщения: 6
Стаж: 8 лет 4 месяца
Поблагодарили: 1 раз

Re: Спойлер на скорую руку

Сообщение Wapik »

Это библиотека jQuery. Я не стал прикладывать файл (да и использование jQuery от Google экономит ресурсы сервера).
При желании этот JS файл можно скачать и использовать локально.
Он полностью безопасен.)
Аватара пользователя
владимир1983
phpBB 3.2.6
Сообщения: 5954
Стаж: 13 лет 11 месяцев
Откуда: Сергиев Посад
Благодарил (а): 306 раз
Поблагодарили: 296 раз

Re: Спойлер на скорую руку

Сообщение владимир1983 »

В 3.1.х по умолчанию подключена библиотека jquery.
За ваши деньги решу ваши проблемы. Стучи в ЛС.
Нет человека - нет проблемы. (c)
Wapik
phpBB 1.0.0
Сообщения: 6
Стаж: 8 лет 4 месяца
Поблагодарили: 1 раз

Re: Спойлер на скорую руку

Сообщение Wapik »

Я не смотрел. Но,если есть,то хорошо.)
Аватара пользователя
Sheer
Former team member
Сообщения: 12113
Стаж: 17 лет 2 месяца
Откуда: Калининград не Кенигсберг
Благодарил (а): 41 раз
Поблагодарили: 1716 раз

Re: Спойлер на скорую руку

Сообщение Sheer »

Wapik писал(а): Я не смотрел
Ин зря. Также ты не смотрел то, что можно использовать локальную версию jquery или брать ее у гугля. Это настраивается в админке.
Второе. Все это запросто делается расширением без уродования исходного кода. Все необходимые события для этого есть. Не придется даже вручную прописывать в админке замену html для bb-кода.
Короче, ни к черту не годится. Советую "ковырять" дальше в сторону создания расширений. Информации на форуме для этого достаточно.

Отправлено спустя 1 минуту 31 секунду:
rxu писал(а): Wapik, спасибо за труды, и в phpBB 3.1 код можно не править, помогают расширения
Изображение
Общие ошибки новичков (07.11.2005) & Как задавать вопросы
Мини FAQ
Если ничто другое не помогает, прочтите, наконец, инструкцию!
"Никакая инструкция не может перечислить всех обязанностей должностного лица, предусмотреть все отдельные случаи и дать вперёд соответствующие указания, а поэтому господа инженеры должны проявить инициативу и, руководствуясь знаниями своей специальности и пользой дела, принять все усилия для оправдания своего назначения".
Циркуляр Морского технического комитета №15 от 29.11.1910 г.
Аватара пользователя
Sumanai
phpBB 3.0.0 RC5
Сообщения: 1668
Стаж: 9 лет 5 месяцев
Благодарил (а): 257 раз
Поблагодарили: 195 раз

Re: Спойлер на скорую руку

Сообщение Sumanai »

Sheer писал(а): Второе. Все это запросто делается расширением без уродования исходного кода.
На самом деле даже расширение не нужно, можно добавить простой ббкод.
Аватара пользователя
Sheer
Former team member
Сообщения: 12113
Стаж: 17 лет 2 месяца
Откуда: Калининград не Кенигсберг
Благодарил (а): 41 раз
Поблагодарили: 1716 раз

Re: Спойлер на скорую руку

Сообщение Sheer »

Sumanai писал(а): можно добавить простой ббкод.
Не в этом дело.
Wapik, тренируйся на кошках -->
ext.zip
У вас нет необходимых прав для просмотра вложений в этом сообщении.
Изображение
Общие ошибки новичков (07.11.2005) & Как задавать вопросы
Мини FAQ
Если ничто другое не помогает, прочтите, наконец, инструкцию!
"Никакая инструкция не может перечислить всех обязанностей должностного лица, предусмотреть все отдельные случаи и дать вперёд соответствующие указания, а поэтому господа инженеры должны проявить инициативу и, руководствуясь знаниями своей специальности и пользой дела, принять все усилия для оправдания своего назначения".
Циркуляр Морского технического комитета №15 от 29.11.1910 г.
Аватара пользователя
romaamor
phpBB 3.0.3
Сообщения: 2144
Стаж: 12 лет
Откуда: Одесса
Благодарил (а): 619 раз
Поблагодарили: 144 раза

Re: Спойлер на скорую руку

Сообщение romaamor »

Wapik, а смысл этого расширения ? Уже давно есть сполер .
Изображение
Аватара пользователя
KimIV
phpBB 2.0.1
Сообщения: 286
Стаж: 8 лет 6 месяцев
Откуда: Кунгур
Благодарил (а): 166 раз
Поблагодарили: 21 раз

Re: Спойлер на скорую руку

Сообщение KimIV »

romaamor писал(а): Уже давно есть сполер .
Он другой... вот такой

Код: Выделить всё

[spoiler]{TEXT1}[/spoiler]
А Wapik сделал такой

Код: Выделить всё

[spoiler={TEXT1}]{TEXT2}[/spoiler]
На мой взгляд, совершенно разные вещи!
Ты должен делать добро из зла, потому что его больше не из чего делать. Уоренн Роберт Пенн.
Anvar
Former team member
Сообщения: 1965
Стаж: 14 лет
Благодарил (а): 57 раз
Поблагодарили: 625 раз

Re: Спойлер на скорую руку

Сообщение Anvar »

В phpBB3.1 спойлер гораздо проще делается.

Использование BBCode:

Код: Выделить всё

[spoiler={TEXT1}]{TEXT}[/spoiler]
Замена HTML:

Код: Выделить всё

<div class="dropdown-container">
<span class="dropdown-trigger button">{TEXT1}</span>
<div class="hidden" style="max-width:100%;">{TEXT}</div>
</div>
Красоту его можно отрепетировать как душе угодно.
Не пишите вопросы лично, если можете задать их на форуме!
Спецзаказы не интересуют!
Wapik
phpBB 1.0.0
Сообщения: 6
Стаж: 8 лет 4 месяца
Поблагодарили: 1 раз

Re: Спойлер на скорую руку

Сообщение Wapik »

Anvar, спасибо за наводку. Право,не знал.)
Аватара пользователя
romaamor
phpBB 3.0.3
Сообщения: 2144
Стаж: 12 лет
Откуда: Одесса
Благодарил (а): 619 раз
Поблагодарили: 144 раза

Re: Спойлер на скорую руку

Сообщение romaamor »

KimIV писал(а): Он другой... вот такой
Не правда -
[spoil][/spoil] :D
eserguei
phpBB 1.2.0
Сообщения: 14
Стаж: 8 лет 9 месяцев
Благодарил (а): 11 раз
Поблагодарили: 1 раз

Re: Спойлер на скорую руку

Сообщение eserguei »

Anvar писал(а): В phpBB3.1 спойлер гораздо проще делается.
Благодаря подсказке Anvar сделал свой вариант спойлера на базе стандартного.

Может кому пригодится:

Использование BBCode:

Код: Выделить всё

[spoiler={TEXT1}]{TEXT}[/spoiler]
Замена HTML:

Код: Выделить всё

<div class="spoilwrapper" style="margin:5px 0;font-weight:normal;padding:4px 10px;background-color:#fff;border:1px solid #dbdbdb;border-radius:4px;color:#333333;"><div class="spoiltitle" style="margin:0;padding:0;width:100%;"><span class="spoilbtn" style="margin:2px 5px;text-transform:uppercase;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:11px;font-weight:bold;display:block;cursor:pointer;color:#333;">{TEXT1}</span></div><div class="spoilcontent" style="color:#333333;display:none;padding:5px;border-top:1px solid #ccc;">{TEXT}</div></div>

Вернуться в «Для разработчиков»