• Добавляем в 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" />

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