css(8) html(19) JavaScript(23) MODx(17) Perl(21) php(20) RegExp(13) SEO(7) гаджеты(1) задачка(9) интернет(35) лытдыбр(10) полезности(35) разное(10) разработка(37) софт(11) тесты(4) юмор(5)

Я тут на досуге написал функцию занятную. Ее предназначение - применять определенный стиль к определенному типу ссылок в элементе DOM. Получилось довольно коротко и симпатично, на мой взгляд.

Постановка задачи 

Итак, прежде, чем что-то разрабатывать, нужно поставить задачу. Нужно применить какие-то стили к ссылкам, входящим в какой-то конкретный элемент DOM. Причем стили нужно применять, основываясь на том, какие это ссылки. Ведут ли они на внешний ресурс? Может, это ссылка на какую-то часть текущей страницы. Или ссылка для написания почты? Все эти ссылки нужно оформлять по-разному.

Когда проектируешь функцию, проще всего формировать ТЗ, составляя вишлист. Так вот:

• Хочу, чтобы оформление этих самых ссылок было простым - грузишь функцию, вызываешь ее и вот тебе результат.
• Хочу, чтобы разные элементы моей страницы подвергались разной обработке. Вдруг, я захочу оформить внешние ссылки в навигации при помощи одного стиля, а в контентной части - при помощи другого?
• Хочу передавать функции простые параметры, чтобы она понимала какие ссылки выделять, а какие нет.

Вроде как все. Приступимс.

Анализ. Какие бывают ссылки.

Какие виды ссылок мы можем выделить? Я выделил такие:

• ссылка на внешний ресрурс
• ссылка на часть текущей страницы
• ссылка mailto
• обычная ссылка, в пределах домена

Думаю, чтобы применить какой-то стиль к обычным ссылкам, ведущим на другую страницу сайта, JS применять не нужно. Поэтому остановимся на оставшихся трех типах ссылок. Применять стили проще всего, применяя CSS-классы. Поэтому не будем мудрствовать, а лучше просто создадим набор класс и будем присваивать определенному типу ссылок определенный класс.

Чтобы решить задачку, нужны:

• элемент DOM, в котором мы будем изменять классы ссылок
• список типов ссылок, классы которых нужно изменять
• имена классов

Вызов функции должен выглядеть как-то так:

linkStyler(ссылка на DOM, {outpage:'имя класса', inpage:'имя класса', mailto:'имя класса'});

Что ж, примемся за реализацию.

Реализация linkStyler

Вроде как все просто. Нужно взять все элементы <a> из переданной ссылки на объект DOM, а потом проверить их аттрибуты href на соответствие каким-то правилам. В случае, если href ссылки удовлетворяет правилу - применить нужный стиль. Вот что у меня получилось:

function linkStyler(elem, options)  {
//getting all anchors in DOM element
var links = elem.getElementsByTagName('a');

//Getting current domain
var locate = document.location;
var reg = /^[^:]+:\/\/?([^\/]+)/;
var domain = reg.exec(locate)[1];
//true, if url is in current domain
var on_domain = new RegExp("^[^:]+:\/\/"+domain, "i");

for (var i=0; i<links.length; i++)
    {
    var link = links[i];
    if (options.mailto!=undefined && link.protocol == 'mailto:')
        {
        link.className = options.mailto;
        link.title = (link.title == '' ? 'Написать письмо' : link.title);
        continue;
        }
    if (options.outpage!=undefined && link.hostname != domain && link.hostname != '')
        {
        link.className = options.outpage;
        if (link.title == '')
            {
            link.title = 'Ссылка на внешний сайт.';
            if(link.target != '') link.title += ' Откроется в новом окне.';
            }
        continue;
        }
    if (options.inpage!=undefined && link.hash!='' && on_domain.test(unescape(link.href)))
        {
        link.className = options.inpage;
        link.title = (link.title == '' ? 'Перейти к участку на этой странице' : link.title);
        continue;
        }
    }
}

Результат работы функции

Оговорка: Если скачать страничку-пример себе на компьютер, то кое-что не будет работать. Это связано с тем, что location документа сильно изменяется, если открывать его не через http. Однако, для применения на реальном сайте эта функция вполне подходит. Буду пользовать сам, если кому надо - забирайте!