• Большой интерес пользователей к статье Учимся парсить сайты с библиотекой PHP Simple HTML DOM Parser показал, что тема парсеров очень актуальна. В продолжении темы, хочу рассказать, как можно парсить сайты используя JavaScript и всю мощь библиотеки jQuery, взамен Simple HTML DOM Parser.

    Нет, мы не будем использовать для обработки js, какой-нибудь серверный интерпретатор,  весь парсинг и обработка данных будет происходить на Вашей машине, в Вашем браузере. Браузером будет Google Chrome, а парсер мы реализуем в виде расширения Google Chrome Extension. 

     Почему  Google Chrome, трудно сказать, самым верным ответом наверное будет: "А почему бы и нет?!". Не сомневаюсь, что тоже самое можно будет сделать и для Opera. Однако, эта статья не про написание расширений для браузера( хотя возможно Вы почерпнете для себя и здесь, что-то новое), а про то, как писать client-side парсеры на JavaScript.

    Также хочу рассказать про преимущества, которые дает такой подход к написанию парсера.

    Во первых:  jQuery и JavaScript в целом обладает фантастическим  набором методов для  работы с DOM документа, Simple HTML DOM Parser тихо курит в сторонке. Навигация по дереву DOM браузер априори обрабатывает очень быстро, это собственно его нативный функционал.

    Второе: по планете давным давно шагает WEB 2.0. Для тех кто в танке:  веб  второй версии подразумевает динамически меняющийся контент сайта. AJAX или просто замена определенного участка страницы через JS сводит на нет работу любого php парсера. Проиллюстрирую на примере:

    <html>
    <body onload="document.body.innerHTML='Страница была создана динамически! Так нужный Вашему парсеру email равен leroy@xdan.ru'">
    email:leroy*****.ru
    </body>
    </html>

    Полагаю Вы догадываетесь, что увидит написанный на php парсер, загрузивший данную страницу, и тупо проверяющий содержание тега body.

    Использование браузера  в качестве парсер-машины позволяет, обмануть сайт, и выполнить подобные скрипты, получив результирующую страницу. 

  • После двух прошлых статей мы имеем git репозиторий расположенный на github.com. Этого почти достаточно, чтобы плагин появился на plugins.jquery.com. Нам не хватает лишь манифест файла. 

    Манифест jQuery - это json файл с информацией о вашем плагине. По ссылке вы найдете описание всех доступных полей. Однако нам пригодятся не все. Обязательными являются следующие поля

    • name - название плагина
    • version - версия плагина ( очень важное поле)
    • title - короткое название плагина на человеческом языке
    • author - имя, mail, ссылка на сайт автора
    • licenses - лицензия по которой вы распространяете свой плагин (опять она, говорили ведь - это важно)
    • dependencies - какую версию jquery требует для работы ваш плагин
  • В библиотеке jQuery есть несколько методов для работы с ajax: jQuery.post, $.get, $.getJSON, $.ajax. В конечном счете, все они - более удобная надстройка над $.ajax. Объясню на простом ajax примере: 

    Отправим на страницу index.php данные с формы. После того, как данные отправлены, выведем сообщение. В случае ошибки также сообщим об этом пользователю.

    Сначала методом $.post

    var data = $('#form').serialize(); 
    $.post('index.php',data,function(data,status){
    	if( status=='success' ){
    		alert('Данные успешно отправлены!')
    	}else{
    		alert('В процессе отправки произошла ошибка :(')
    	}
    })
    
  • Retro Clock плагинЗаказчик попросил для сайта сделать часы в стиле Ретро, такие как в фильме день Сурка, каждая циферка это табличка, которая падает вниз сменяя следующую. Все просто. Готовых решений тоже хватает, однако они мне почему-то не очень понравились. Хотелось простого решения в виде jQuery плагина. Поэтому недолго думая, я создал свой плагин

    Представляю Вашему вниманию jQuery плагин xdRetroClock

    Возможности у часов скромные: можно отключить показ минут, часов, секунд, установить небольшое смещение по времени или ускорить анимацию. Подробнее можете прочесть на странице проекта.

    Страница проекта

    Исходные файлы 

  • range2dSlider плагин на jQuery ​Вновь статья в названии содержит громогласное «самый лучший». Время показало, что когда я рассказывал про datetimepicker, эти слова оказались верны. Сейчас я более чем уверен, jQuery плагин range2DSlider придется многим по вкусу.

    Море настроек конфигурации делают этот плагин одним из лучших в своем роде. Просто взгляните, на что он способен:

     

    Та, конфигурация, для которой он был создан 2d слайдер

    Показать код

    Или обычный range слайдер (ползунок), альтернатива нативному input type="range", но с поддержкой нескольких значений

    Показать код

    Вертикальный вариант исполнения, того же ползунка input type="range"

     

    Показать код

    В подсказке над(под/слева/справа) ползунком можно выводить не только текущие значения. Все кастомизируется довольно просто

    Показать код

    Не нравится внешний вид? Я старался, честно! Ну что же, добавим своих стилей, и легким движением руки, брюки превращаются...

    Показать код

    Все что вы увидели выше не строго зашито в слайдер, а является сочетанием определенных настроек. Можно создать конфигурации на все случаи жизни. Под катом описание настроек и их конфигураций, а заинтересовавшиеся могут сразу скачать плагин и поковырять его сами

  • jQuery DateTimePicker pluginКак-то я описывал работу с jQueryUI datetimepicker. Приемлимым этот плагин назвать было сложно, потому как он тянул с собой весь jQueryUI, и еще 10-ок файлов. По функциональности он тоже весьма скуп. Ничего более стоящего, и тогда и сейчас найти не удалось. Поэтому написал свой плагин с преферансом и поэтессами.

    Результатом трудов стал великолепный на мой взгляд плагин на jQuery DateTimePicker

    Почему он лучше, чем стандартный jQuery UI виджет?

    Во первых, потому, что не требует кроме себя и собственно jQuery ничего более. Во вторых в сжатом виде, весит менее 5кб вместе со стилями. Нет других дополнительных файлов с изображениями, только файл стилей и файл js.

    Однако, главным преимуществом, я считаю, наличие отключаемого,  TimePicker'а. Да DatePicker тоже отключаем и это очень удобно.

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

  • На просторах интернета нашел один очень симпатичный слайдер изображений COIN SLIDER, работающий на jQuery. Его можно скачать как на официальном сайте так и на xdan'е. Всякое бывает, проект забросят или сайт пропадет, именно поэтому выкладываю public скрипты у себя на сайте, но все же настоятельно советую качать такие вещи с оффсайтов. Слайдер вырос из другого подобного плагина того же автора jqFancyTransitions

    Симпотичнчый COIN SLIDER на Jquery с великолепным эффектом перехода

    И так, что он умеет.

    Плагин совместим с Internet Explorer 6+, Firefox 2+, Safari 2+, Google Chrome 3+, Opera 9+, т.е. можно уверенно сказать, что он запуститься почти на всех браузерах. Также у него есть ряд несомненных плюсов:

    Он бесплатен и используется по  MIT лицензии

    Совместим с Android и iPhone (iOS) платформами

    Имеет уникальный эффект перехода между слайдами

    Валидная разметка слайдера

    Гибко настраеваемая конфигурация

    Автоматическая прокрутка слайда

    Кнопки навигации (Назад, Вперед и перейти к нужному слайду)

    Легковесный (всего 8kb)

    Полностью настраиваемый с помощью CSS

     

     

     Посмотрите на Демо

     

  • Для написания плагина будут использоваться материалы из статьи Мастер класс по созданию плагина галереи на jQuery, а также для понимания материала рекомендую ознакомится со статьей Как написать плагин на jQuery

    Что я хотел получить в результате

    На страницу в произвольном порядке выводятся несколько блоков, содержащих фотографии. Этими блоками могут быть, как обычные <div> так и ссылки <a>. Кроме них к странице подключаются два файла, сам плагин и его стили. Вызвав соответствующий названию плагина метод объекта $, с некими параметрами мы бы получали прокручивающуюся галерею фото. Фотографии должны прокручиваться, как с помощью мыши так и соответствующими кнопками по бокам галереи - назад-вперед. Кроме этих средств навигации в плагине должна быть возможность прокрутки к любой фотографии. 

    В дополнении ко всему у плагина должна быть возможность выбора ориентации, горизонтальная либо вертикальная, смена скорости и шага прокрутки.

    Если Вам лень читать, как это все работает то Вы можете скачать готовый плагин

  • Для любого input на странице можно задать свой стиль отображения. Но не для input type="checkbox". Попробуйте поменять размер этого элемента или округлить углы его рамки. Ко всему прочему все браузеры отображают этот элемент по разному.

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

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

    Представляю Вашему вниманию xdCheckbox jQuery плагин для стилизации input checkbox

    Страница проекта

    Исходные файлы 

  • Удобный jQuery плагин для создания диалоговых оконЭтот плагин назревал уже очень давно. В процессе создания Конструктора Яндекс карт, пришлось воспользоваться наиболее известным jQueryUI. Он безусловно хорош, но избыточен. Минифицированная версия основного файла весит более 200 кб плюс еще на 100 кб стилей, и на 50 файлов со спрайтами. В комплексе, этот пакет решает несколько проблем, поэтому я его и использовал в конструкторе, однако если нужен только определенный функционал, то лучше использовать другие плагины.

    Мне потребовался плагин для создания диалоговых окон. При том без обилия настроек для первого использования, но при этом чтобы они были, когда я захочу, что-то не стандартное.

    Таких плагинов очень много, но все они обладают рядом недостатков. Поэтому снова берем все в свои руки, и пишем нужный плагин с нуля. 

    Вот, что из этого вышло.