jQuery *

Введение

Когда-то давно я написал для себя ежедневник для ведения дел, заметок и фиксации движения по разным задачам. Сделан он был изначально на связке PHP + Kohana 2 + PostgreSQL. Со временем я переписал все на Yii (первой и тогда единственной версии). Для полнотекстового поиска был задействован встроенный в PostgreSQL движок tsearch2. Много лет я пользовался системой, понемногу ее развивал и пришел к тому, что объем текстов в ней накопился приличный. Поиском приходится пользоваться весьма часто и для повышения его удобства я задумал прикрутить к нему autocomplete из состава пакета JQuery UI.

Вступление

Наверняка многие фронтэнд разработчики да и в целом многие пользователи хоть раз интересовались работой и функционированием Youtube Player. В этой статье я расскажу, как он работает, и как сделать свой плеер для воспроизведения Youtube видео со своим интерфейсом. Так же приведу примеры для понимания, как это работает.

Сегодня я хотел бы написать о библиотеке jQuery Vibrate.js. Эта библиотека позволяет настроить вибрацию на мобильных устройствах, можно выбрать различные режимы с разной продолжительностью вибрации.
Вибрация в мобильном устройстве позволяет предупредить пользователя о сообщении или звонке, показать обратную отдачу в играх.
Для подключения библиотеки нужно использовать файл jquery.vibrate.min.js вкупе с jQuery.

Всем привет, дорогие читатели Хабра!

Статья посвящена jQuery UI и его виджету выбора дат.

Часто бывает, что на странице необходимо сделать выбор периода дат (а иногда даже нескольких разрозненных дат). Но Datepicker от jQuery UI позволяет выбирать только одну дату в пределах одного календаря.

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

Итак, наша цель — решить задачу самыми минимальными усилиями используя только jQuery UI Datepicker.

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

9 июня 2016 года состоялся официальный релиз jQuery 3.0, которая была в разработке с октября 2014 года. Нашей целью было создание более легкой и быстрой версии jQuery (конечно, с обратной совместимостью). Мы удалили все старые костыли для IE и использовали некоторое более современное веб API там, где это необходимо. jQuery 3.0 является продолжением ветки 2.x, но с некоторыми изменениями, которые давно хотели внести. Такие ветки как 1.12 и 2.2 будут получать критические патчи в течение некоторого времени, но ожидать новый функционал в них не стоит. jQuery 3.0 — это будущее jQuery. Если вдруг Вам нужна поддержка IE 6-8, Вы можете продолжать использовать релиз версии 1.12.

UPD: по просьбам читателей добавлен список ключевых изменений.

В прошедшую пятницу, 20 мая вышел jQuery 3.0 Release Candidate – практически финальная версия jQuery 3.0, которую уже можно испробовать в деле. После релиза третьей версии jQuery, ветки 1.12 и 2.2 будут некоторое время получать критические патчи, но новых функций или серьезных изменений не получат. jQuery 3.0 не будет поддерживать IE 6, 7 и 8 версии, поэтому если вам важна поддержка этих браузеров – можете использовать последний релиз 1.12.

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

Ссылки для скачивания jQuery 3.0 Release Candidate:

Полная версия: https://code.jquery.com/jquery-3.0.0-rc1.js
Минифицированная: https://code.jquery.com/jquery-3.0.0-rc1.min.js

Вводная

Сразу оговорюсь кому может быть интересна данная публикация. Это начинающие Django + JQuery программисты, интересующиеся векторной графикой в браузере с использованием canvas. Или просто люди, получившие подобное задание.
Итак, находясь в постоянном сканировании рынка труда своего региона, наткнулся на весьма интересную вакансию web-разработчика в достаточно известной местной компании. В описании вакансии было сказано, что нужен python+django разработчик. После отправки резюме получил тестовое задание которое гласило:

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

Добрый день. Возможно, это не самая полезная статья, но я довольно часто я сталкивался с тем, что на сайте требовалось выстроить блоки в «мозаику», и всегда изобретал всякие велосипеды.

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

Для начала давайте создадим jQuery плагин

(function( $ ) {
  $.fn.mozaika= function() {
  };
})(jQuery);

Как и в большинстве плагинов, в нашем будут настройки. Давайте определимся с ними:

• Количество столбиков
• Отступы между блоками
• Поле (padding) сверху и снизу поля с «пазлами»
• Класс для блоков
• Класс для блоков с двойной шириной
• Класс для блоков с тройной шириной
• нижний Padding ячейки

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

Вообще говоря, я бы так и продолжал делать редкие интерактивные карты на flash, но затем произошло кое-что интересное, после чего я снова взглянул на html как на средство создания эффектных интерактивных карт.

Я понимаю, возможно, есть ощущение, что статья опоздала года этак на 2, сейчас модно писать про es6, react, redux или другие модные в мире фронтенда штуки.

Однако, я думаю, у многих до сих пор есть проекты, которые используют jQuery + jQuery UI. И вот в одном из проектов, используя именно jQuery UI для сортировки элементов списка, мне потребовалась анимация сортировки, которой в jQuery UI «из коробки» нет. Гугление и поиск по stackoverflow привели только к странным решениям через стандартные jquery-ui колбэки, а так как мест, где сортировка использовалась было несколько, такие решения мне не подходили.

К тому же в проекте использовалась библиотека jQuery UI Touch Punch, которая позволяет элегантным образом заставить jQuery UI работать на touch-устройствах, я подумал, почему бы не сделать так же.

* Это шутка.


(картинка позаимствована где-то в интернете)

[ Репозиторий ]

Всем привет.

Уже давно прошли времена обязательной поддержки 6, 7, 8 Ослов и неизбежного использования jQuery, DOM API постепенно приводится к единому виду, но я всё так же часто встречаю на просторах интернета утверждения о том, что VanillaJS — это длинная колбаса.

Мол, зачем мне писать вот так:

document.querySelector('.selector');

Если я могу написать вот так:

$('.selector');

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

// selects one node matched given selector
function $(selector, ctx) {
	return (ctx || document).querySelector(selector);
}

// selects all nodes matched given selector
function $$(selector, ctx) {
	return [].slice.call((ctx || document).querySelectorAll(selector));
}

Это касается крошечных скриптов. Для крупных проектов, конечно, нужно юзать какой-нибудь фреймворк, который берет на себя все манипуляции над DOM.

Введение

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

Хочу поделиться с вами опытом написания компонента выбора даты для текстового поля.

Я на Тостере периодический вижу вопросы типа «как скрыть блок по клику» или «как раскрасить по условию», поэтому я хочу вам показать 4 «приема» которые могут улучшить ваш jQuery-код и скорость разработки.

Начальный пример

Примеры к описанию ниже: jQuery пример и Angular Light пример
Этот пример состоит из 2-х «моментов»: 1. Кликом выбрать «панель», 2. Отобразить выбранную «панель».

Добрый вечер, уважаемые дамы и господа!

При всей неослабевающей популярности фреймворка AngularJS мы все-таки не успели отметиться с книгой по его первой версии, а теперь решили не дожидаться второй и поинтересоваться: насколько вам импонирует вот эта работа, охватывающая кроме AngularJS и более широкий контекст JavaScript-разработки?



Под катом вы найдете перевод регулярно обновляемой статьи Паскаля Прехта (версия от 12 октября 2015 года), рассказывающей о таких высоких материях, как внедрение зависимостей в AngularJs и, что самое интересное, тех доработках, которые ждут этот механизм в Angular 2.

Предисловие

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

Целевая аудитория — полагаю, будет полезно любому веб-разработчику, но особенно тем кто пришел с сервера — например, из джавы.

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

В качестве вступления

Ранее, в течение последних 2-х лет, были попытки запуска некоторых браузерных игр малого масштаба, которые собирали менее 1000 игроков, но в этой статье мы их затрагивать не будем. Рассказ пойдет о первом опыте создания браузерной онлайн-игры, которая в будущем будет стремиться выйти в массы.

Идея создания космической игры родилась довольно давно. Почему космической? Отчасти потому, что космическая тема всегда вызывала мой личный интерес, а отчасти, по причине ностальгических воспоминаний от приятного времяпрепровождения за «Космическими рейнджерами», когда-то в далеком прошлом…

Понадобилось сделать многострочный placeholder в textarea. Выяснилось, что Firefox, в отличие от всех других современных браузеров, не поддерживает перенос строки в элементе placeholder. Хотя делает он это в соответствии с W3C спецификацией — радости это не добавляет.

Все нагугленные решения не понравились. Ставить JQuery-плагины только ради переноса строк в Firefox не хотелось. Решил попробовать сделать свой placeholder во вспомогательном блоке. В итоге получилось вот такое простое решение, которое работает во всех браузерах и предоставляет широкие возможности для кастомизации placeholder.

Стандартное поведение реализуется с помощью jQuery (используется у меня в проекте, при необходимости легко заменяется чистым JS). Если вам нравится скрывать placeholder, когда поле попадает в фокус, то можно обойтись только CSS.

Посмотреть пример на jsfiddle.

UPD
Спасибо gwer за подсказки.

Изменения и уточнения:

• на чистом CSS работать не будет, без JS не обойтись
• в JS нужно использовать событие 'input'. Тогда placeholder исчезает и при вставке из буфера обмена через контекстное меню.

В данной публикации не буду писать для чего нужен Autocomplete, так как в интернете много публикаций про данный плагин. В том числе, про него уже есть 2 поста и на Хабре. НО! Нигде не описывается как можно использовать его в многоуровневых списках, где данные второго уровня зависят от выбора данных на первом уровне. В свое время мне пришлось перелопатить весь интернет и убить на это пару дней — чтобы прикрутить правильно данный плагин в многоуровневый список.

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