• Arctext.js - Искривления текста с CSS3 и JQuery

    При помощи CSS3 Вы можете вращать вокруг своей оси отдельные буквы, однако довольно сложно будет выстроить каждую букву по некой криволинейной траектории. Arctext.js является JQuery плагином, который делает именно это. Основанный на Lettering.js, он вычисляет угол вращения каждой буквы и распределяет буквы одинаково по всей мнимой дуге заданного радиуса.

    Arctext.js - искривления текста с CSS3 и JQuery

  • audio player на сайте

    Как добавить mp3 плеер на свой сайт? Чтобы был, как можно проще, но при этом максимально кастомизировался. Умел проигрывать всякие audio форматы (mp3,wma и т.д.).

    Очень просто! Представляю  Вам замечательный аудио и видео проигрыватель jplayer

    Проигрывать на сайт

    На сайте разработчика есть множество демо. Если кратко, то плеер умеет практически все. Проигрывать музыку и видео, поддерживает плейлисты, кастомные скины, свои элементы управления. Работает сие чудо на flash, но если браузер "в порядке" и умеет воспроизводить нужный формат из под коробки, то используется только браузер (html5). К примеру Опера не умеет проигрывать mp3, а вебкиты умеют. Полное описание поддерживаемых браузером фич есть в их руководстве

  • fancybox с яндекс картой

    Не нашел в сети решение данной проблемы поэтому решил разобраться сам. Если в для API v1.x есть достойное решение с использованием метода redraw, то в API версии 2.0 такого метода нет.

  • javascript определить что скролинг элемента закончен

    В контакте есть такая фича: прокручиваешь новости до конца страницы, после этого автоматически подгружаются другие новости. Это весьма удобно, не нужно организовывать сложную систему пагинации. Просто крутишь страницу. Сделать такое на jquery не составит труда. Для этого используем событие scroll. Создадим элемент.

    <div id="mynews" style="height:100px;overflow-y:scroll;"></div>

    к нему прицепляем обработчик события

    var page = 1;
    $('#mynews').scroll(function() {
    	if( $(this).height() + $(this).scrollTop() >= this.scrollHeight ) {
    		$('#mynews').append($.get('news.php?page='+page++));
    	}
    });

    а вот и демонстрация работы:

    В челябинске упал астероид

    Невероятно но факт в челябинске упал астероид

    Лада выпустила электрокар

    Невероятно но факт Лада выпустила электрокар

    Харламов встречается с Асмус

    Невероятно но факт Харламов встречается с Асмус

    Зеленое ведро зеленее черного ведра

    Невероятно но факт в Зеленое ведро зеленее черного ведра

    Эффект плацебо победил рак

    Невероятно но факт Эффект плацебо победил рак. С животным все в порядке.

  • JQLite альтернатива jQuery для мобильных устройств

    jquery liteУ Web-программистов сложилась добрая традиция - в любую даже самую простейшую страницу по дефолту  подключать jquery. Я ничего не имею против этой библиотеки. Она шикарна. Она лучшая в своем роде, и продвинула и продвигает современный web далеко вперед. Повсеместный переход сайтов на ajax также связываю с этой библиотекой.

    Однако тут есть одно НО. В простейших проектах: небольшая анимация, баннеры, или любую другую логику, где не требуется работа с DOM или ajax, надобность в лишних 90кб скриптов отпадает. Особенно критично это для мобильных устройств. И дело не столько в лишних килобайтах, а в том, что такие скрипты напрасно грузят и без того занятый процессор.

    Сперва я хотел написать все на vanila.js, но кросплатфоменность в среде мобильных приложений та еще головная боль, поэтому решено было выбрать легковесный аналог jquery - jQLite.

  • jquery parent parents и closest или как получить предка по его номеру

    Доброго дня. Небольшая заметка о том, как можно получить родителя элемента по его порядковому номеру в дереве родителей.

    В jquery есть несколько способов получения родителей элементов :parent, parents, closest

    parent- возвращает прямого родителя, это один элемент, как параметр может получать селектор. Тогда метод возвращает родителя только если родительский селектор совпадает с тем, что подается в качестве параметра.

  • jQuery плагин получить значения поля по умолчанию

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

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

    Второй способ, это повесить на поле ввода обработчики событий change, keyup, mouseup, в которых добавлять к полю некий атрибут, который будет говорить о его изменении. В коде это будет выглядеть как-то так

  • onDomReady без jQuery

    Выдернул из jQuery реализацию обработчика события onDomReady. Для тех, кто не в курсе поясню, что это событие возникает, после того как весь html код страницы будет загружен браузером, но в отличие от  window.load, срабатывает раньше того, как будут загружены все стили, скрипты, картинки и т.д. Т.е. если в своем JS вам надо провести какие-то манипуляции с DOM на странице до ее показа, то вам нужен именно этот метод. Вы, конечно, можете подключать jQuery целиком, и тогда в вашем распоряжении будет этот метод. К примеру при подключенном jQuery установить событие можно так

  • Вышла новая версия CMS Danneo v.0.5.4

    Обновилась одна из лучших отечественных CMS Danneo. Система выложена на официальном сайте 23 марта 2011, так что пишу статью с большим опозданием, но так как толковых описаний изменений в новой версии не нашел, то сделаю это сам.

    Danneo обновила не мажорную цифру, и даже не минорную. Система обновилась до версии 0.5.4.  Последняя вышедшая версия была 0.5.3 

    Процесс установки не претерпел никаких изменений. Все по старому, в самом конце по прежнему надо вручную удалить папку setup. Однако, приятные сюрпризы начинаются сразу после установки. Первое, что мне бросилось в глаза это две предустановленных шкурки Soft и Clear. Скинов Original и Begin остались в старой версии, но для тех кто не любит старину разработчики обещали портировать на новую версию и их. 

    Что нового в Danneo 0.5.4? Изменений в системе достаточно. Среди них

    1. SEO-инструменты для продвижения сайтов:

    • Проверка пузомерок сайта (домена), таких как - PR, ТИЦ и alexa Rank.
    • Проверка позиции в выдаче в популярных поисковиках (яндекс, google, yahoo) по ключевым словам
    • Проверка обратных ссылок.
    • Полностью настраиваемая карта сайта - Google Site-Map.
    • Настраиваемые социальные закладки.
    • Внутренняя перелинковка страниц по ключевым словам, для улучшения внутреннего ссылочного ранжирования сайта.

    2. Свои meta-заголовки для отдельных страниц, и категорий (Очень ожидаемое нововведение для seo-шников)

    3. Добавлена возможность использования в ЧПУ, дефисов и знаков подчеркивания при разделении слов "-" (slovo-slovo-slovo).

    4. Возможность добавления неограниченного количества тегов, к новостям.

    5. Добавление неограниченного количества изображений к страницам.

    6. Создание групп пользователей, ассоциируются с группами форума, при интеграции.

    7. Выпадающее меню, настраиваемое в панели управления (надо сказать, что не очень удобна реализация в админ-панели).

    8. «Хлебные крошки», теперь можно выносить в шапку сайта. Это значит, что теперь место непосредственного вывода надо использовать $siteglobal['insert']['breadcrumb']

    9. Модная нынче тенденция: для управления системой и создания эффектов, используется библиотека jQuery. Это в свою очередь значит, что мы можем использовать любые анимационные плагины этой библиотеки и не только их. Благодаря этой библиотеке интерфейс административной части заметно оживился. В встроенном файл браузере повсеместно используется AJAX.

    10. Для повышения читабельности и соответствии стандартам оформления, переписан весь код PHP. Первое, что замечаешь это PhpDoc комментарии в файлах модулей. А еще в административной части все print заменены на более быстрые echo.

    11. 2 скина Soft и Clear заменили стандартные Original и Begin.

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

    13. Каждый блок имеет свои настройки.Так же долгожданное нововведение. Отсюда новое правило написания блоков. 

    Расскажу подробнее о некоторых пунктах

  • Делаем красивый combobox с умным поиском на jQuery

    Сегодня сделаем функциональный combobox с умным поиском. На выходе получим нечто такое

    Умный combobox делаем на jquery

    Одной из главных фич, будет то, что поиск будет вестись не исключением, а сортировкой. При этом, сортировать будем по умному, а не простым сравнением. 

    Обычно, при создании подобных плагинов, делают проверку на совпадение подстрок и тогда возвращают результат. У нас будет плагин, который на слово kazam, вернет в первой строчке KAZAN. 

    Приступим. 

  • Добавляем в jQuery $.browser

    jQuery Browser  В jQuery плагин $.browser устарел, и его удалили. Разработчикам советуют использовать для этих целей специальные инструменты типа Modernizr. Беда в том, что браузеров становится очень и очень много. Следить за всеми ними уже не так важно, новые версии jQuery не поддерживают ie6-7, что правильно. 

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

  • Заменить выделенный текст на странице с помощью JS

    При написании одного парсера передо мной встала задача предоставить пользователю возможность самому выбирать ту часть страницы которую он хотел бы спрарсить. Сделать я это решил на базе WYSWYG редактора JWYSWYG, он очень легкий, кросбраузерный, написан на моем любимом JQuery и легко поддается модификации. Кроме того я встроил в него функцию автоперевода выделенного текста при помощи Google Tranlate Ajax API. От слов к делу. Оказалось что задача не настолько тривиальна как кажется с первого взгляда. Получить со страницы надо было именно кусок выделенного HTML а не тот текст, который собственно попадет в буфер обмена если нажать кнопку копирования.

    UPD. Судя по поисковым запросам, много людей ищут не теорию, а готовое решение на jQuery. Дабы не смущать Вас лишней информацией можете сразу пройти на страницу с готовым плагином на JQuery и пример его использования

  • Используем datepicker из jquery ui

    Более удобный DateTimePicker разработка автора xdan.ru

    JQuery UI - это набор пользовательских интерфейс виджетов, компонентов и эффектов. Datepicker - это небольшой виджет календарик, удобный прежде всего тем, что пользователь может легко выбрать нужную дату, при этом дата запишется в требуемом формате, и не будет требовать стандартизации. 

    Вот так виджет Datepicker выглядит из под коробки в стандартном jQuery UI

    Стандартный Dateicker из jQuery UI

     Все лаконично и просто. Но есть один большой минус. В нем нет редактирования времени. Собственно потому виджет и называется DatePicker, аналогичный виджет со временем должен был бы называться DateTimePicker) К сожалению такого виджета в библиотеке нет. Для простоты Datepicker,TimePicker и dateTimePicker обычно обобщают в одно понятие DatePicker.

    К слову в html5 появились новые элементы ввода, в том числе Date и DateTime Picker'ы. Но мало того, что поддерживаются они не во всех браузерах, так еще и эта самая поддержка оставляет желать лучшего. Приведу пример, как выглядит html5 datepicker в разных браузерах

  • Как завершить все ajax запросы на jquery

    Как щавергить все ajax запросы к серверуКак завершить все ajax запросы на jquery. Вы я верен знаете, что все события в JavaScript происходят последовательно. То, что называется асинхронным ajax запросом, на самом деле ем что иное, как цепь последовательных событий. И так случается, то если запросы происходят к одному серверу, что пока не завершится один запрос, другой будет висеть в воздухе. В связи с этим возникла необходимость, обрубать все текущие ajax запросы, при инициализации нового. Как это сделать? 

  • Как зарегистрировать свой jQuery плагин на jquery.plugins.com

    В далеком 2006-м, Джон Резиг, создавая очередную JavaScript библиотеку jQuery, возможно и не предполагал, что она станет настолько популярна. Одной из ее "килл-фич" была система плагинов. Трюк, который прокатил с Мозилой и прокатывает с Хромом: делаем средний продукт, но с отличным API для создания расширений для него.

    Идея не нова, до этого в 2005-м, мир узнал Prototype Сэма Стефенсона. Параллельно с jQuery развивался Mootools  Валерио Проетти. К слову второй зародился, как плагин для первого.

    Да сам JavaScript со своим своеобразным ООП реализует наследование, по идеологии плагинов, а не родителей. Пишем класс, создаем его экземпляр, подключаем к prototype полю другого объекта, и вот оно - наследование. Второй объект использует все плюшки первого.

    Качественным отличием jQuery на этом фоне стало удобство. Сравните код создания расширения для Prototype, Mootools и jQuery (код для первых двух взят из Википедии).

    Prototype

    var FirstClass = Class.create( {
        initialize: function () {
            this.data = "Hello World";
        }
    });

     Mootools

    var Animal = new Class({
        initialize: function(name) {
            this.name = name;
        }
    });
     
    var Cat = new Class({
        Extends: Animal,
        talk: function() {
            return 'Meow!';
        }
    });

    Vanila JavaScript

    var a = function(){
    	this.hi = function( name ) {
    		alert('Hello World and '+name)
    	}
    }
    var b = function(){};
    b.prototype = new a;
    (new b).hi('Valeriy');

    И jQuery

    $.fn.hi = function( ){
     alert( this[0].tagName )
    }
    $('body').hi();// BODY

    Удобство наглядное и бесспорное. Первые два фреймворка заставляют окунуться в дебри ООП и требуют от программиста определенной квалификации. jQuery же "порог вхождения" понизила до уровня школьного Бейсика.

    Результат не заставил себя ждать. Плагины плодились тысячами. Их уровень варьировался от плохих до очень плохих. Все это дело оседало на plugins.jquery.com

    Залить туда плагин мог любой желающий. Никаких модераторов. Демократия. Стоит ли говорить, через ни так много времени сайт превратился в свалку. Мой первый плагин тоже там побывал. 

    У ребят из команды jQuery руки растут оттуда, откуда надо. Они эту лавочку прикрыли. Включили режим "Только чтение" и приступили к созданию нового ресурса.

    13 Декабря 2011 на свет появился новый сайт. С иной системой публикации. Плагины не заливаются непосредственно на ресурс. Делать на самом plugins.jquery.com вообще ничего не надо ( Вот это поворот=) ). Вместо этого дело сводится к колдовству с git репозиторием и его хостингом.

  • Как зарегистрировать свой jQuery плагин на jquery.plugins.com. Заключительная

    Из серии статей вы узнали Как выбрать имя плагина, как работать с git и как написать свой манифест. Все что осталось - это сообщить сервису plugins.jquery.com о нашем плагине. Нет, на сам сервис заходить не нужно. Он не дает такого функционала. Он узнает о нашем плагине, после того, как мы добавим в настройки плагина Hook этого сервиса. 

    Hook в программировании  - это привязка, чего угодно к какому-либо событию. К примеру в Windows можно повесить hook на нажатие клавиш, написав простейший кейлогер. Вирусы так и работают.

    В терминах github добавляя Hook plugins.jquery.com в настройки репозитория, мы тем самым делаем следующее: при любом изменении репозитория, будет вызван некий скрипт с plugins.jquery.com, который при необходимости скачает манифест и добавит плагин в общую базу данных. Именно для этого и нужен был манифест из предыдущей статьи.

  • Как написать плагин на jQuery

    Итак, вы стали комфортно работать с jQuery и хотели бы знать, как написать свой собственный плагин.  Замечательно! Вы там, где нужно. Расширение функционала jQuery по средствам плагинов и методов является очень мощной штукой и может спасти много часов разработки Вам и Вашим коллегам,  заключая Ваши самые часто употребляемые функции в плагины. Этот пост, обрисует в общих чертах,  основы, лучшие методы, и распространенные ошибки, которые надо учитывать при написании Вашего плагина. 

    Содержание

     

    Приступая к работе

    Начнем писать JQuery плагин, с добавления нового метода к объекту jQuery.fn, где имя метода - это название Вашего плагина: 

    jQuery.fn.myPlugin = function() {
    
      // здесь помещаете код Вашего плагина
    
    };

    Но постойте! Где же мой знак доллара, который я знаю и люблю?- спросите Вы. Он по прежнему доступен, однако надо убедиться, что Ваш плагин не будет конфликтовать с другими библиотеками, которые также могут использовать знак доллара(Mootools, Prototype). Для этого код Вашего плагина нужно поместить в само вызывающееся замыкание. 

    (function( $ ){
      $.fn.myPlugin = function() {
      
        // здесь код Вашего плагина
    
      };
    })( jQuery );

    Так-то лучше. После этого, другие библиотеки сколько угодно могут изменять знак $, на Вас это не отразится. Внутри замыкания, $ будет равен jQuery.

  • Как сделать анимированный баннер на jQuery

    Часто возникает задача: «на коленке» сделать анимированный баннер используя лишь несколько изображений с эффектами перехода. Да, есть Adobe Flash, есть GIF анимация, но бывают случаи, когда маркетолог скинул тебе пару скудных jpg макетов, и попросил - «что-нибудь с ними сделать». 

    Софт-программисты ищут, в таких случаях, нужный jquery плагин. Благо, их обилие позволяет легко найти подходящий. Но это не всегда оправданно, так как сама jQuery имеет отличные средства анимации и эффектов. И код для этого, будет не более 20-ти строк, в зависимости от того, какое количество эффектов Вам потребуется.

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

    В результате мы получим такой баннер:

     
     
     
     
     
  • Мастер класс по созданию плагина галереи на jQuery

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

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

  • Необычное облако тегов с jQuery плагином xdCloudTags

    Необычное облако тегов с jquery плагином xdCloudTags

    Доброго времени суток! Представляю Вашему внимаю свою разработку jquery плагин xdCloudTags. Который делает из обычного облака тегов, что-то похожее на то, что вы видите слева.

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

    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="jquery.xdcloudtags.js"></script>
    <link rel="stylesheet" type="text/css" href="jquery.xdcloudtags.css" />

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

  • Пишем javascript парсер при помощи Google Chrome Extension

    Большой интерес пользователей к статье Учимся парсить сайты с библиотекой 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.

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

  • Пишем Манифест или как зарегистрировать свой jQuery плагин на jquery.plugins.com. Часть 3-ая

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

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

    • name - название плагина
    • version - версия плагина ( очень важное поле)
    • title - короткое название плагина на человеческом языке
    • author - имя, mail, ссылка на сайт автора
    • licenses - лицензия по которой вы распространяете свой плагин (опять она, говорили ведь - это важно)
    • dependencies - какую версию jquery требует для работы ваш плагин
  • Примеры работы с ajax на 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('В процессе отправки произошла ошибка :(')
    	}
    })
    
  • Ретро часы на jQuery

    Retro Clock плагинЗаказчик попросил для сайта сделать часы в стиле Ретро, такие как в фильме день Сурка, каждая циферка это табличка, которая падает вниз сменяя следующую. Все просто. Готовых решений тоже хватает, однако они мне почему-то не очень понравились. Хотелось простого решения в виде jQuery плагина. Поэтому недолго думая, я создал свой плагин

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

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

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

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

  • Самый лучший range slider на jQuery

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

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

     

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

    Показать код

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

    Показать код

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

     

    Показать код

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

    Показать код

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

    Показать код

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

  • Самый удобный DateTimePicker

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

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

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

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

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

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

  • Симпатичный COIN слайдер на jQuery с уникальными эффектами перехода

    На просторах интернета нашел один очень симпатичный слайдер изображений 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, а также для понимания материала рекомендую ознакомится со статьей Как написать плагин на jQuery

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

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

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

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

  • Стилизация элементов checkbox при помощи плагина xdCheckbox

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

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

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

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

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

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

  • Удобный jQuery плагин для создания диалоговых окон

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

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

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

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