С сайта kremlin.ru была отпочкована JS-библиотека, позволяющая легко выделять интересные цитаты в длинных текстах и давать цитату прямо на них:
Назвали "Маша" (Mark&Share). Это первый в мире случай, когда технология расходится по вебмастерам с сайта руководителя государства.
Комментарий Roem.ru: не такой уж и первый - Барак Обама, например, сильно популяризовал Drupal (хотя его команда мало что сделала непосредственно в контрибуторском плане, конечно).
А вообще штука прикольная, но вот меняет поведение браузера, что не все юзеры любят.
MASHA написана на чистом javascript и не требует для своей работы каких-либо дополнительных библиотек (кроме ierange, поставляющегося вместе с MASHA для поддержки Internet Explorer). Чтобы подключить MASHA, необходимо внутри тега <head></head> добавить:
PHP:
<!--[IF IE]>
<script type="text/javascript" src="ierange.js"></script>
<![ENDIF]-->
<script type="text/javascript" src="masha.js"></script>
<link rel="stylesheet" type="text/css" href="masha.css">
<script type="text/javascript">
if(window.addEventListener){
window.addEventListener('load', function(){
// can be called by domready
MaSha.instance = new MaSha();
}, false);
} else {
window.attachEvent('onload', function(){
// can be called by domready
MaSha.instance = new MaSha();
});
}
</script>
Для работы MASHA необходимо наличие в HTML двух элементов:
Элемент, содержащий текст, который можно выделять (cм. настройку "selectable" ниже).
Кнопка, появляющаяся при выделении текста мышкой, при нажатии на которую подсвечивается текст и меняется адресная строка браузера (cм. настройку "marker" ниже).
При активации MASHA вы можете воспользоваться настройками по умолчанию или переопределить их по своему усмотрению:
Настройки передаются в виде словаря и по умолчанию имеют следующие значения:
PHP:
{
'regexp': new RegExp('[^\\s,;:–.!?<>…\\n\xA0\\*]+', 'ig'),
'selectable': 'selectable-content',
'marker': 'txtselect_marker',
'ignored': null,
'onMark': null,
'onUnmark': null,
'onHashRead': function(){ … }
}
Здесь:
'regexp' — регулярное выражение, соответствующее слову;
'selectable' — html-элемент или id элемента, содержащего текст, который можно выделять;
'marker' — html-элемент или id элемента с иконкой маркера, который появляется при выделении текста;
'ignored' - функция-фильтр, позволяющая запретить выделение в элементах, находящихся внутри 'selectable', принимает в качестве аргумента html-элемент, возращает true/false, true означает запрет на выделение;
'onMark' — callback, вызывается при выделении текста;
'onUnmark' — callback, вызывается при снятии выделения;
'onHashRead' — функция, вызывающаяся при загрузке страницы с метками, по умолчанию задана функция, проскроливающая страницу до первого выделенного фрагмента.
Поддержка Internet Explorer
Для поддержки Internet Explorer используется библиотека ierange, немного отличающаяся от оригинала. Вы можете использовать поставляющуюся вместе с MASHA, либо добавить в конец корневой функции строку:
PHP:
window.DOMRange = DOMRange;
ЛИЦЕНЗИЯ
MASHA распространяется по лицензии MIT (группа лицензий для свободного программного обеспечения). Данная лицензия позволяет безвозмездно использовать, изменять, распространять утилиту почти без ограничений.
View attachment SmartTeleMax-MaSha-2869d57.zip
View attachment Masha_Logo.zip
материал взят частично с roem.ru
демо: h**p://kremlin.ru/news/12516 - выделите что нибудь в тексте...
