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

идем в админку -> сообщения -> 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 Но штучка стоит того. Можно изменить параметры выделенного слова (на скриншоте: в ббкоде убрала декорацию и изменила цвет на зеленый). :)


Приятного аппетита! :)
Комментарии: 106

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

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

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

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

зы. Не понятно только зачем использовать <acronym>, можно было бы обойтись обычным <span> :unknown
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

ПитерПетр 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]
  • 0

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]
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

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

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

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

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

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]
  • 1
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

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

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

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

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

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

Эту не сделать.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

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

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

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

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

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

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

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]
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

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

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

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

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

Похожие темы