Блог Вячеслава Волкова

Тому, что действительно нужно знать, никто не научит.

— Оскар Уайльд

Тег / jquery

Сборка backbone+requirejs проекта с помощью grunt

Моей основной задачей в последнее время является создание одностраничных javascript приложений. В основном я использую фреймворк Backbone и requirejs. Обычно публикация приложения была простым действием "svn update" но из-за этого возникала куча проблем, начиная с несжатых файлов стилей, огромного количества js файлов и заканчивая кэшированием файлов браузером.

Поэтому я решил озадачится и воспользоваться сборщиком проектов, который должен был решить все возможные проблемы с публикацией проектов. Выбор пал на Grunt. Почему именно он? Возможно потому что для него сейчас уже существует огромное количество плагинов и им легко пользоваться.

Не буду вдаваться в описание этого сборщика, в Интернете есть достаточное количество уже информации. Расскажу о том, как он помогает решать непосредственно мои задачи.

Узнать больше »

Сортировка DOM элементов с jQuery

Очень часто может возникнуть ситуация когда необходима сортировка html элементов в DOM с помощью javascript.

Для решения данной задачи можно воспользоваться встроенной функцией sort.

Например, у нас есть вот такой неупорядоченный список.
<button class="sort-elements">Сортировать</button>

<div class="sorting">
    <ul class="elements">
        <li>Элементы</li>
        <li>Для</li>
        <li>Проверки</li>
        <li>Сортировки</li>
        <li>На</li>
        <li>jQuery</li>
    </ul>
</div>

Для его сортировки можно использовать следующий метод
$('.sort-elements').click(function(){
    var $elements = $('.elements li');
    var $target = $('.sorting ul');
    
    $elements.sort(function (a, b) {
        var an = $(a).text(),
            bn = $(b).text();
        
        if (an && bn) {
            return an.toUpperCase().localeCompare(bn.toUpperCase());
        }
        
        return 0;
    });
    
    $elements.detach().appendTo($target);
});

Или вот здесь можно посмотреть рабочий пример сортировки.

jQuery outerHTML или как получить html содержимое jQuery объекта

Очень часто мы создаем html объекты в jQuery и еще чаще нам необходимо получать готовую строку html его содержимого. Но возникает небольшая проблема, что при вызове метода html() мы получаем не все содержимое, а дочернего элемента. Что бы избежать этого и получать весь нужный html напишем небольшой плагин для jQuery. Узнать больше »

Как заблокировать выделение текста на странице

Иногда нам не хочется, что бы пользователь мог выделять текст на каком-то элементе страницы, для такой блокировки можно воспользоваться следующим javascript кодом написанным для библиотеки jQuery в виде плагина
(function($){
    $.fn.disableSelection = function() {
        return this
                 .attr('unselectable', 'on')
                 .css('user-select', 'none')
                 .on('selectstart', false);
    };
})(jQuery);

Теперь можем заблокировать выделение текста на всей странице повесив обработчик на тег body
// Отключаем выделение мышью
$('body').disableSelection();