jQuery *

Встроенные инструменты разработки в Firefox становятся все удобнее.
Возможность просматривать эвенты в Firefox developer tools была доступна и раньше, но поддерживала она только нативные js события. Для этого, надо открыть Dev tools, перейти на вкладку Inspector и если на элемент было повешено событие, то справа от него отображалась пиктограмма «ev», при нажатии по которой можно было посмотреть обработчик.

Наверняка вы сталкивались с такими задачами:

— Подгрузить ajax данные на страницу;
— По клику на объект получить ответ от сервера;
— Сделать вывод (не) зависимого списка на ajax.

Написанный контроллер решает эти задачи, он может:

— Подрузить любое количество указанных данных на страницу;
— Контролировать события для созданных объектов и подгружать новые;
— Отслеживать зависимость списков SELECT с любой вложенностью.

Размер этого монстра всего несколько строк.

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

Перевод статьи «18 Surprises From Reading jQuery's Source Code», David Aragon.

Я люблю jQuery, и хотя я считаю себя продвинутым JavaScript разработчиком, я никогда, до сих пор, не читал исходники jQuery с начала и до конца. Вот несколько вещей, которые я при этом узнал:

В этой статье я не буду говорить о том зачем в javascript нужны промисы и в частности JQuery.Deferred. Также не буду приводить справочную информацию, ее достаточно в интернете. Например тут или тут или вот тут.
Эта статья для тек кто уже немного знаком с объектом Deferred из библиотеки JQuery, но не имеет опыта написания сложных цепочек (очередей).

Подготовка

Все примеры кода, рассмотренные здесь, используют асинхронный метод $.ajax(), который возвращает так называемый jqXHR в котором реализованы промис-методы (done, fail, always, then). Нам нужны будут только они, поэтому будем считать что $.ajax возвращает промис (promise).
В некоторых примерах используются методы $.map() и $.each(), которые входят в состав библиотеки JQuery.

Последовательное выполнение

Простейшее использование промисов — это последовательное выполнение асинхронных операций. То есть следующая операция не начинается пока текущая не закончится.

$.ajax('http://echo.jsontest.com/id/1')
.then(function(result){
    console.log(JSON.stringify(result));
    return $.ajax('http://echo.jsontest.com/id/2')
}).then(function(result){
    console.log(JSON.stringify(result));
    return $.ajax('http://echo.jsontest.com/id/3')
}).then(function(result){
    console.log(JSON.stringify(result));
});

Живой пример тут.

Введение

В данные статье я хочу вам рассказать о моем способе загрузки файлов на сервер Node.js с помощью JQuery Ajax. Да, я понимаю что есть уже и другие решения, например JQuery File Upload, но все таки иногда хочется сделать что-то уже существующее, для того чтобы понять как это все устроено. Данное решение является учебным примером, все замечания по поводу кода или предложения по его улучшению оставляйте в комментариях.

Что будем использовать

1. Bootstrap
2. JQuery
3. Модуль для Node.js Multiparty

Аннотация

На хабре уже не раз делали описание работы с роутером TL-MR3020 в плане расширения его возможностей на базе прошивки openwrt. Я хочу показать ещё один вариант доработки роутера, при котором он может стать полноценным участником школьного учебного процесса. В статье приводится описание устройства и порядок работы с музыкальным программируемым школьным звонком «Школьник-4».

По работе недавно столкнулся с, вроде бы, тривиальной задачей — форматирование цены и деление ее по разрядам.
Ничего сложного решил я. Тем более на просторах интернета лежит уже куча готовых решений от простых и скучных (разворачиваем строку, добавляем через каждые 3 символа пробелы и разворачиваем назад) до вполне интересных (уверен что эту регулярку многие видели, но речь не о ней)

price.replace(/(\d)(?=(\d\d\d)+([^\d]|$))/g, '$1 ')

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

На глаза попадались даже библиотеки, для разбивания чисел по разрядам, но я решил остановится на вышеупомянутой регулярке.
Повесил форматирование на keyup, что может быть сложнее?

jQuery-плагин, который превращает вложенное (древовидное) меню в систему прокручивающихся меню.

Репозиторий: github.com/webasyst/waslidemenu
Попробовать: jsfiddle.net/7LnSY/
Пример: demo-ru.webasyst.com

Добрый день.
В этом топике я расскажу о удобном jQuery-плагине для валидации веб-форм, простом и мощном, при том — совершенно неизбыточном. Если вам не интересны подробности создания и сравнение с аналогами (точнее — с аналогом), смотрите конец топика, там ссылка на примеры и исходный код.

Некоторое время назад мне пришлось дорабатывать клиент-сайд ресурса, включающего просто невероятное количество анкетных форм. Одной из неприятных особенностей этих форм было жуткое количество разнотипных правил валидации ввода и ещё большее количество взаимосвязей между полями.
Пример: если выбран чекбокс А, то в поле Х можно ввести только цифры, а поле Y должно быть скрыто, но если дополнительно выбрана радиокнопка Z, то поле Y нужно показать, а в поле X можно ввести всё, кроме цифр.
Иными словами — сущий ад, рождённый нездоровым сознанием маркетологов.

Достаточно распространенная задача — поменять местами элементы в списке. Но как правило эта задача решается жуткими костылями, особенно если это Drag&Drop.
Сейчас я расскажу вам очень простой и гибкий способ сделать это, используя Marionette.js и jQuery UI Sortable.

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

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

Вы когда-нибудь задумывались над такими вопросами:

• Как мир относится к технологии CDN для загрузки библиотек?
• Сколько успешных сайтов написано на Wordpress?
• Какие скрипты чаще всего разработчики загружают из Google CDN?
• На сколько популярен jQuery?

А я вот задумался.
И не просто задумался, а сделал маааленькое исследование.
И написал маленькое расширение для хрома, которое, возможно, сделает жизнь лучше или сломает интернеты.
Результаты внутри.

В этой заметке расскажу, как я использую пользовательские события jQuery (custom events) в своей работе.

Имитиация событий

Дана простая задача, реализацию которой наблюдают все хабровчане: когда пользователь достаточно прокрутил страницу вниз, анимированно отображается блок-врезка «Лучшее за 24 часа», и скрывается, когда пользователь прокручивает страницу вверх. Эта задача решается подвешиванием обработчика на события scroll и resize окна (window), который занят двумя вещами: вычисляет, нужно или нет отображать/скрывать блок-врезку, и в зависимости от результата производит анимацию отображения или осуществляет скрытие.

Если эта задача стояла перед нами, как бы мы приступили к ее реализации? Ну, например, написали такой кусочек кода:

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

(из серии «малая механизация web страниц»)

Что такое Repeatable?

Repeatable это способ вывода (популяции) всякого рода списков, таблиц и пр. по массивам данных. Данный механизм
использует шаблон описанный в самом коде разметки (в отличие от, скажем, {{mustache}} templates).

Поддерживаются выражения и условное включение. И всё это в 90 строках кода.

Repeatable функиональность есть в каждом «взрослом» web framework'е. Но если вы не хотите по тем или иным причинам завязываться с монстрами то вот вам механизм который, что называется, есть не просит.

Пример

Скажем есть такие данные:

var data = [
       { name: "Olga", age: 20, email: "aaa@example.com" },
       { name: "Peter", age: 30, email: "bbb@example.com" },
       { name: "Ivan", age: 15, email: "ccc@example.com" },
    ];

И нам нужно из вывести как-то так:

<ul id="people">
    <li><a href="mailto:{{this.email}}">{{this.name}}</a> <b if="this.age > 18">18+</b> </li> 
    <li>No data available</li>
</ul>

Первый <li> собственно и есть шаблон записи. Для каждой записи во входном наборе этот элемент будет повторен с подстановками и гуляшшыми девами. Второй <li> будет выведен если Repetable «накормить» пустым массивом.

Если у нас это все описано то собственно популяция нашего списка это одна строка:

var list = $("ul#people").repeatable(); // declaring the repeatable
    list.value = data; // that's data population, sic!

Вот живой пример.

Спустя годы библиотека jQuery стала неотъемлемой частью в работе каждого web-разработчика. Ведь она простая в использовании, быстрая и имеет очень широкие возможности. В этой статье я собрал список из более чем десяти сниппетов, которые вы можете свободно брать для использования. Их очень легко адаптировать под нужды ваших собственных проектов.

Вступление

Всем привет! Здороваюсь с хабром я в первый, и надеюсь не последний, раз. Не смотря на то, что читаю хабр довольно давно, идея написать что-то полезное появилась совсем недавно, когда на работе я столкнулся с весьма интересной задачей — разработка он-лайн редактора коллажей. Поскольку особого ассортимента инструментов разработки не было, решили делать средствами js+jQuery и php GD. Процесс реализации задуманного оказался весьма интересным, и куча полученных положительных эмоций и новых навыков подтолкнули меня на написание статьи на хабр. В этой статейке я постараюсь рассказать о некоторых интересных моментах, с которыми столкнулся при разработке он-лайн редактора.

Задача

По изначальному плану статьи я хотел описать весь процесс разработки, но потом передумал, поскольку статья получилась бы слишком длинной и имела бы много очевидных и итак всем понятных вещей. Поэтому план статьи был переработан, и я решил оставить только самые интересные и важные, как мне кажется, моменты.
Итого: речь пойдет об использовании jQuery UI в связке с PHP библиотекой GD. В статье я постараюсь, как можно доходчивее, показать и рассказать об использовании таких возможностей jQuery UI, как перетаскивание и ресайз элементов. А также формирование картинки из созданных и обработанных пользователем элементов (картинок).
Чтобы было более понятней и наглядней думаю будет не плохо сделать рабочий пример(посмотреть можно тут). В примере реализована одна из частей он-лайн редактора, а именно работа с аппликациями, в которой пользователь может наложить на картинку дополнительные элементы, перетаскивать их как угодно и ресайзить, после чего все это «искусство» должно собраться в единую картинку.
Что-то я много говорю, пора уже и к делу приступить, начнем.

Привет всем!

В данной статье я хотел бы поделиться с вами соображениями о том, как на практике можно использовать механизм работы с асинхронными процессами, предоставляемый библиотекой jQuery с версии 1.5 под названием deferred, «отложенный» (jQuery.Deferred), а также со связанными объектами и методами.

Разумеется, уже написан не один десяток статей на тему работы с парой deferred/promise. Своей же я задался целью предоставить такой набор знаний, который дал бы новичку, во-первых, возможность забыть о своих страхах перед непонятным и сложным и, во-вторых, сделать еще один шаг к написанию понятного и хорошо структурированного кода, работающего с асинхронными процессами. Я бы хотел сосредоточить свое и ваше внимание на проблемах, которые легко разрешаются ипользованием deferred, на предпосылках и типовых схемах использования этого объекта.

CSS селекторы в фронтенде можно сравнить с SQL операторами в бэкенде. Не смотря на их изначальную роль в CSS, мы активно используем селекторы в нашем Javascript коде, и, учитывая декларативный стиль селекторов, они являются приоритетными кандидатами на оптимизацию.