BBcode подсказка

BBCode — это специальный вариант HTML
С помощью BBcode - вы сможете отформатировать текст в сообщении, вставить видео, картинки и многое другое.
Loveaction

BBcode подсказка

Loveaction 23 июн 2009, 03:29 Сообщение

Тоже хорошая штучка. Смысл: выделенное слово через ббкод, наводим на него мышкой, получаем мышку с маленьким знаком вопроса и подсказку. Будет полезна тем, у кого на форуме просто уйма специфических слов, которые смогут понять не так много пользователей. :)
Развернуть


Что делаем:

идем в админку -> сообщения -> bbcodes -> добавить новый ббкод


Прописываем:

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

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

[acronym]{TEXT1},{TEXT2}[/acronym]



Замена HTML

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

<acronym title="{TEXT2}" style="cursor:help; font-weight: bold; color: black; text-decoration:none;">{TEXT1}</acronym>



В подсказке

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

Acronym: [acronym]Text,Popuptext[/acronym]



К сожалению, черный вопросительный знак на скриншоте не появился. Верьте на слово :D Но штучка стоит того. Можно изменить параметры выделенного слова (на скриншоте: в ббкоде убрала декорацию и изменила цвет на зеленый). :)


Приятного аппетита! :)
Правила форума up.4admins.ru

Внимание! Оставить заявку на создание логотипа,
вы можете в разделе 4админс "Ваше творение", подфорум
"Логотип на заказ".

Migration&Kommunikation форум по Германии

Питер

BBcode подсказка

Питер 06 ноя 2017, 09:41 Сообщение

Подскажите такое дело. Почему этот bbcode вступает в "конфликт" с ссылками URL.
Подробнее. Есть внутренние ссылка (на другую страницу сайта или форума) и на сторонние ресурсы. Они отличаются внешним видом. Внутренние — просто кликабельный текст, а на внешней — еще и значок. Если в тексте поста я применяю этот bbcode, то внешний вид внутренней ссылки, становиться как внешняя.
Как справиться с этой проблемой?

Аватара пользователя
CabinetAdmin

BBcode подсказка

CabinetAdmin 06 ноя 2017, 15:25 Сообщение

Вообще не должно, тут стили применяются конкретно к элементу и, как я понимаю, позволяют вывести курсор с вопросительным знаком при наведении, плюс оформить сам текст жирным шрифтом. Сам по себе ббкод не может влиять на ссылки, ни на внешние, ни на внутренние.

зы. Не понятно только зачем использовать <acronym>, можно было бы обойтись обычным <span> :unknown
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Питер

BBcode подсказка

Питер 06 ноя 2017, 16:23 Сообщение

CabinetAdmin писал(а):Источник цитаты Не понятно только зачем использовать <acronym>, можно было бы обойтись обычным <span>

Ради спортивного интереса сделал новый bbcode, используя span. То же самое, ссылка меняется на внешнюю.

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

[tt][b]Castle Skull[/b][acronym][sup][color=#FF0000]*[/color][/sup],Harper & Bros.: New York & London; 1931[/acronym][size=85](n.)[/size] [Henri Bencolin #2] — [url=http://impossible-crimes.ru/index.php?Castle_Skull][size=75][b]ЗАМОК "МЕРТВАЯ ГОЛОВА"[/b][/size][/url] /[size=60]ЗАМОК ЧЕРЕП[/size][acronym][sup][color=#FF0000]1[/color][/sup],"Классика детектива — Собрание сочинений Д.Д. Карра #2; Центрполиграф; 2005[/acronym][/tt]

Аватара пользователя
CabinetAdmin

BBcode подсказка

CabinetAdmin 06 ноя 2017, 20:59 Сообщение

Если честно, я ничего не понял:) Вот та ссылка, что внутри всего этого кода, становится внешней? К ней добавляется значок из другого ббкода, который предназначен для внешних ссылок? И это только если в сообщении встречается acronym?
Тогда как у вас выглядит ббкод для внешних ссылок? Но я всё таки не могу найти у них связь...


зы. А если оформить ббкод таким образом:

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

[acronym={TEXT1}]{TEXT2}[/acronym]

Замена HTML:

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

<span title="{TEXT1}" style="cursor:help;font-weight:bold;color:black;">{TEXT2}</span>

Подсказка:

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

Acronym: [acronym=Подсказка]Текст[/acronym]
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Питер

BBcode подсказка

Питер 06 ноя 2017, 22:19 Сообщение

Попробую обьяснить.
Есть библиография авторов. Пишется название на языке оригинала. К нему пишется всплывающее пояснение (причем оно работает только на компе (на планшете, смартфоне ни в какую — надо подвести мышку) с указанием кем и где было первое издание. Конечно, лучше было бы как в случае с последним сообщении главной странице форума (на моем форуме, если поводишь мышку к "конвертику" последнего сообщения на каком-то конкретном подфоруме, то оно "всплывает" в маленьком окошке — причем это работает и на планшете и на смартфоне), но чего-то подобного я не нашел. Затем русскоязычный перевод (кликабельный — если на форумном сайте или форуме есть страница/тема) и доп. всплывающие пояснения о других переводах на русский язык. Если ДО (а это как правило всегда, за редким исключением) кликабельного названия использован acronym то все. Внутренняя ссылка принимает вид внешней.
К примеру, тут видно, если опуститься до библиографии http://impossible-crimes.ru/Forum/viewtopic.php?f=290&t=2196

Я попробовал проверить ваш вариант (поменяв одну букву в acronym — ecronym, иначе все всплывающие сообщения "полетят", их там тысячи) и вроде все отлично. Надо будет переделывать все :%)

Вы, конечно, обратили внимание в коде, который я привел, сколько там "напихано". Текст ссылки (номер) красный (дополнительная возня), в верхнем регистре (еще одна возня). И не дай бог, где то знак какой то пропустить))
Есть возможность уже прописать это (красный цвет и верхний регистр) в вашем варианте непосредственно в замене HTML?

Аватара пользователя
CabinetAdmin

BBcode подсказка

CabinetAdmin 07 ноя 2017, 16:14 Сообщение

Питер писал(а):Источник цитаты Есть возможность уже прописать это

Конечно, можно стили оформить так:

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

style="color: #FF0000; cursor: help; font-weight: bold; font-size: smaller; vertical-align: super;"

и в таком виде не надо будет добавлять ббкоды [sup] и [color=#FF0000].

Питер писал(а):Источник цитаты Если ДО (а это как правило всегда, за редким исключением) кликабельного названия использован acronym то все. Внутренняя ссылка принимает вид внешней.

Посмотрел на вашем форуме тему, нашёл то место, в общем дело не в этом ббкоде, дело в стилях. Ко всем ссылкам с классом postlink добавляется иконка и у вас она выглядит как внешняя. Но класс postlink также добавляется и к ссылкам обрамлённых ббкодом [url].
Можно пойти таким же путём, что и для ббкода, который я описал чуть выше. Добавить ббкод для ссылок сразу с прописанными стилями для [size=75] и [b]. Грубо говоря:

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

<a href="{URL}" style="font-size: 75%; line-height: 116%; font-weight: bold;">{TEXT}</a>

исполнение любое, например:

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

[url_loc={URL}]{TEXT}[/url_loc]
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Питер

BBcode подсказка

Питер 07 ноя 2017, 19:31 Сообщение

К большому сожалению не могу несколько раз поблагодарить за вышестоящий пост!
СПАСИБО = 100
И самое главное, даже не то, что эти два bbcode решили мне мои проблемки. Главное то, что я понял как можно в замене HTML добавлять стили, постоянно используемые в конкретном bbcode.

Питер

BBcode подсказка

Питер 08 ноя 2017, 07:16 Сообщение

А как в эту "всплывающую подсказку" еще добавить стиль? К примеру, как в Википедии.
https://en.wikipedia.org/wiki/John_Dickson_Carr
Подвести мышку к примечанию "1". Естественно в соответствующем фоне, да и колесика не нужно.

Аватара пользователя
CabinetAdmin

BBcode подсказка

CabinetAdmin 08 ноя 2017, 16:37 Сообщение

Эту не сделать.
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Питер

BBcode подсказка

Питер 08 ноя 2017, 16:38 Сообщение

А просто как то оформить пооригинальнее?

Аватара пользователя
CabinetAdmin

BBcode подсказка

CabinetAdmin 08 ноя 2017, 16:48 Сообщение

Это обычный title, к нему нельзя применить стили. Чтобы так сделать, надо создавать новый ббкод с tooltip. tooltip бывают с помощью стилей, бывают на скриптах, примеров в сети много, тут уж дело вкуса, какой вариант больше понравится.
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Питер

BBcode подсказка

Питер 08 ноя 2017, 16:54 Сообщение

Да вот один понравился (в вики). А где их можно увидеть и главное доступно понять как сделать bbcode?

Аватара пользователя
CabinetAdmin

BBcode подсказка

CabinetAdmin 08 ноя 2017, 17:21 Сообщение

Первый попавшийся:

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

.tooltip { /* стиль текста, наведя или нажав на который появится пояснение */ display: inline-block; position: relative; cursor: help; /* вид курсора */ } .tooltip > span { /* стиль появляющейся подсказки */ position: absolute; bottom: 100%; left: -20em; /* = max-width */ right: -20em; /* = max-width */ width: -moz-max-content; width: -webkit-max-content; width: max-content; /* ширина подсказки может быть не более содержимого */ max-width: 20em; /* ширина подсказки может быть не более 20em */ max-height: 80vh; /* необязательное ограничение по высоте подсказки, 1vh — это 1% от ширины окна */ overflow: auto; visibility: hidden; margin: 0 auto .4em; /* поднята на .4em над текстом, наведя или нажав на который появится пояснение */ padding: .3em; border: solid rgb(200,200,200); font-size: 90%; background: #fff; line-height: normal; cursor: auto; } .tooltip:after { /* треугольничек под подсказкой; тут тоже везде .4em */ content: ""; position: absolute; top: -.4em; left: 50%; visibility: hidden; margin: 0 0 0 -.4em; border: .4em solid; border-color: rgb(200,200,200) transparent transparent transparent; cursor: auto; } .tooltip:before { /* поле между текстом, наведя или нажав на который появится пояснение, и подсказкой нужно чтобы, если перевести курсор мышки на подсказку, та не исчезла; тут тоже везде .4em */ content: ""; position: absolute; top: -.4em; left: 0; right: 0; height: .4em; visibility: hidden; } .tooltip:hover > span, .tooltip:hover:before, .tooltip:hover:after, .tooltip:focus > span, .tooltip:focus:before, .tooltip:focus:after { visibility: visible; transition: 0s .4s; } .tooltip:focus { outline: none; } @media (max-width: 20em) { /* ширина подсказки может быть не более ширины окна браузера */ .tooltip > span { max-width: 100vw; /* в 100vw входит полоса прокрутки, но на мобильных она часто отсутствует */ box-sizing: border-box; } }

Сам ббкод можно оформить следующим образом:

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

[acronym={TEXT1}]{TEXT2}[/acronym]

замена:

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

<span class="tooltip">{TEXT2} <span>{TEXT1}</span></span>

подсказка:

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

Acronym: [acronym=Подсказка]Текст[/acronym]
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Питер

BBcode подсказка

Питер 08 ноя 2017, 17:53 Сообщение

Если заменю bbcode acronym, то "слетит" все, где уже использован этот bbcode. Так ведь? Если да, то я же могу вместо acronym использовать к примеру hint?

Сам tooltip загнать все в тот же контент в любом месте?

Попробовал. Как только стиль в админке — дало длиннющую "простыню" ошибок на белом фоне.
То, что в скрипе для стиля есть русский текст на кириллице, может к такому привести?



Похожие темы

Вернуться в «Пользовательские BBCode для phpBB»

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и 1 гость