Вставка якоря в сообщения
Добавляет в форму ответа функцилнал для создания якорей - ссылок на заданный фрагмент текущего поста.
Автор: Fover & Deff
Платформа: MyBB
Пояснения:
Задача: Передвинуть скролл к нужному месту на странице при клике на ссылку.
Актуально при длинных пояснениях к чему либо.
К примеру: В игровых описаниях, в расшифровках неких списков проставленных ссылками, в расшифровках описания ингредиентов и способа их приготовления
Аналог в HTML: http://htmlbook.ru/samhtml/yakoryaякорь - место, в которое будет передвигаться(красный якорёк) - ставим латинскими буквами на нижнем регистре название якоря
Ссылка на якорь (синий якорёк) В ссылку на якорь ставим то же самое слово, что и обозвали якорь, в Описание - своё нужное словоДополнительно есть фича открывания спойлера, если сам якорь внутри спойлера или в описании спойлера
В Принципе имеется возможность переходить к якорю и с произвольной страницы
для этого вид ссылки в Сообщении такой:
[url=http://forum.mybb.ru/viewtopic.php?pid=31044#Name]Описание[/url]
Зеленым - ссылка на форум
синим - последняя группа цифр после #p при клике на дату в сообщении
красным - имя якоря
Вариант с открытыми значками
<script type="text/javascript">
$('#post').find("#button-addition").after('<td id="button-aanchor"><img style="width: 20px!important; height: 20px!important; margin-left: 4px!important;" src="https://forumstatic.ru/files/0012/e8/7a/38504.png" title="Вставить якорь" id="button-aanchor" onclick=\"addanchor()\"></td><td id="button-anchor"><img style="width: 20px!important; height: 20px!important; margin-left: 4px!important;" src="https://forumstatic.ru/files/0012/e8/7a/97990.png" title="Вставить ссылку на якорь" id="button-anchor" onclick=\"anchoru()\"></td>');
function addanchor(){
var adnchor = '';
adnchor = prompt("Введите название якоря", "#");
insert("[url&" + adnchor + "]" + adnchor + "[/url]\n");
}
function anchoru(){
var anchorp = '';
anchorp = prompt("Введите название якоря", "#");
var anchorc = '';
anchorc= prompt("Введите описание якоря", "Описание");
insert("[url=http://anchor" + anchorp + "]" + anchorc + "[/url]\n");
}
$('.post-content').each(function(){
$(this).find('p:contains("[url&#"),div[onclick]:contains("[url&#")').each(function(){
var str=$(this).html();
var val = str.replace(/\[url&#[^\[\]]+\]#([^\[\]]+)\[\/url\]/img,'<a name="$1"></a>');
if(val!=str)$(this).html(val);
});
$(this).find('a[href*="//anchor"]').each(function(){
var href=$(this).attr('href');
href = href.split('#')[1];
if(!!href){$(this).removeAttr('target');$(this)[0].href = '#'+href;
var str = $(this).text();
if(str.indexOf('http://')==0)$(this).text(href);
}
});
});
$('.post-content').find('a[href^="#"]').live('click', function(){
var lnk = $(this).attr('href');
var a=$('.post-content').find('a[name="'+lnk.substr(1)+'"]');
b = a.parents('.spoiler-box').find('div[onclick]:first').not('.visible');
if(b.length)b.click();
setTimeout(function(){location.replace(document.URL.split('#')[0]+lnk)},10)
return false;
});
</script>Вариант со спрятанными значками под кнопку "Дополнительно"
<script type="text/javascript">
var img1 = "https://forumstatic.ru/files/0012/e8/7a/38504.png";
var img2 = "https://forumstatic.ru/files/0012/e8/7a/97990.png";
$('#post').find("#addition-area").prepend('<div onclick="addanchor()"><img style="width: 20px!important; height: 20px!important; margin:5px -3px -5px -14px!important;" src="'+img1+'"/> <span>Вставить якорь</span></div><div onclick="anchoru()" style="padding-bottom:4px"><img style="width: 20px!important; height: 20px!important; margin:5px 0 -5px -14px!important;" src="'+img2+'"/><span>Ccылка на якорь</span></div>');
function addanchor(){
var adnchor = '';
adnchor = prompt("Введите название якоря", "#");
insert("[url&" + adnchor + "]" + adnchor + "[/url]\n");
}
function anchoru(){
var anchorp = '';
anchorp = prompt("Введите название якоря", "#");
var anchorc = '';
anchorc= prompt("Введите описание якоря", "Описание");
insert("[url=http://anchor" + anchorp + "]" + anchorc + "[/url]\n");
}
$('.post-content').each(function(){
$(this).find('p:contains("[url&#"),div[onclick]:contains("[url&#")').each(function(){
var str=$(this).html();
var val = str.replace(/\[url&#[^\[\]]+\]#([^\[\]]+)\[\/url\]/img,'<a name="$1"></a>');
if(val!=str)$(this).html(val);
});
$(this).find('a[href*="//anchor"]').each(function(){
var href=$(this).attr('href');
href = href.split('#')[1];
if(!!href){$(this).removeAttr('target');$(this)[0].href = '#'+href;
var str = $(this).text();
if(str.indexOf('http://')==0)$(this).text(href);
}
});
});
$('.post-content').find('a[href^="#"]').live('click', function(){
var lnk = $(this).attr('href');
var a=$('.post-content').find('a[name="'+lnk.substr(1)+'"]');
b = a.parents('.spoiler-box').find('div[onclick]:first').not('.visible');
if(b.length)b.click();
setTimeout(function(){location.replace(document.URL.split('#')[0]+lnk)},10)
return false;
});
</script>
