jQuery *

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

Плагин позволяет передавать команды манипуляции ДОМом в одном объекте, то есть заменить много вызовов методов одним вызовом функции.

Использование

$.executeObject({"#my_div": ["text", "новый текст"]})   // можно передать объект
$.executeObject('{"#my_div": ["text", "новый текст"]}') // а можно и JSON

Чем дальше в лес, тем толще партизаны. Нет, не так. Чем старше веб, тем больше джаваскрипта

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

На проектах использую Twitter Bootstrap и jQuery UI для прототипирования интерфейсов различных элементов страниц в т.ч. форм.

На днях понадобилось дополнить форму одним полем. Был выбран наиболее подходящий формат, в виде набора переключателей (элемент input, тип radio).

В Twitter Bootstrap, набор переключателей представлен в виде набора кнопок и не работает напрямую с элементом input, что предполагает написание дополнительного кода для обработки событий. Библиотека jQuery UI, имеет решение подобной задачи, и вся обработка событий уже реализована.

Как известно, youtube является крупнейшим видеохостингом в мире.
Помимо прочего, здесь хранится как огромное музыкальных клипов, так и просто песен. Дело в том, что ютуб очень часто используют и как хостинг для аудио композиций, видимо потому что в интернете не существует специализированного аудиохостинга. Таким образом возникла идея сделать аудио плеер на основе музыкальных роликов из ютуба…

Как обычно все началось из-за отсутствия или плохого поиска, или не полной реализации того что мне было необходимо.
А необходимы мне были кастомные radio и checkbox'ы которые я смог бы применять в своей повседневной работе при верстке. При этом они должны были бы работать в IE6+ и всех основных браузерах.
Также элементы должны были реагировать по клику на лейбл. И еще одно их могло быть на 1 странице сколько угодно с разными стилями(да иногда случаются такие мего дизайны).
Поэтому я решил взять все лучшее, что встречал в реализациях чекбоксов и радиобатонов на JS. И написать свой плагин jQuery который удовлетворял бы мои потребности.

В последнее время, сайты с parallax scrolling эффектом стали появляться повсюду. Я не хотел это пропускать, поэтому я создал демонстрационную страницу с parallax scrolling эффектом с помощью jQuery и CSS.

В статье показывается способ применения jQuery для работы с базой данных Caché, в результате чего реализуется простой функционал по вставке и удалению данных в ajax веб-приложении.

Предполагается, что читатель обладает средним уровнем знаний HTML, CSS и Javasсript и имеет минимальный опыт работы с Intersystems Cache. Загрузить последнюю версию Caché можно здесь. Начальный опыт работы с Caché можно обрести тут.

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

В последнем проекте который состоял всего из одной странички, потребовалось реализовать простой эффект, суть которого лучше понять на примере #1 и #2.

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

Хочу поделиться с хабросообществом javascript-библиотекой fc.tape. Её назначение — управление анимацией спрайта, представляющего собой склеенные кадры.
Демо

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

Kickstrap это то, что будет если соединить Twitter Bootstrap, HTML5 Boilerplate, значки от IcoMoon и Font Awesome, добавить проверенные jQuery плагины Chosen и jGrowl, включить поддержку разных цветовых схем и тем оформления Bootswatch, дополнительную CSS сетку и вменяемую поддержку ранних версий IE.

Введение

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

Как это работает

Принцип работы прост: в блок, совпадающий с размерами слайда засовываю блок «подлиннее», в который буду упаковывать изображения, выровненные по левой стороне(float:left), и у которого будет плавно меняться левый отступ(margin-left) благодаря jquery функции animate.

Несколько месяцев назад на Гитхабе появилась очень неплохая коллекция паттернов и антипаттернов JavaScript и jQuery на все случаи жизни. Автор проекта Shi Chuan проделал отличную работу, собрав десятки примеров кода из книг и других источников. Репозиторий уже набрал почти полторы тысячи подписчиков и активно пополняется. Всё очень удобно разложено по категориям и откомментировано. Наслаждайтесь!

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

Работает с тем же синтаксисом, что и animate, но вместо этого стоит использовать метод transition.

С более старыми браузерами новые эффекты не работают, а стандартные CSS будут меняться, хотя и без какой-либо анимации. Для того, чтобы откатиться обратно на animate, достаточно использовать следующее:

if (!$.support.transition)
    $.fn.transition = $.fn.animate;

Всего 2КБ.

Первая часть .
Стоит еще раз уточнить, что статья рассчитана на пользователей только начинающих своё знакомство с библиотекой интерфейсов jQuery UI и показывает общие принципы работы с ней, а не задаёт постоянный порядок действий для каждого, а тем более, масштабного веб-проекта. Из известных минусов описываемого интерфейса – вёрстка оставляет желать лучшего и отсуствие наследования. Решение последней проблемы предлагается в комментариях пользователем k12th.
В этой части будет показано, как назначить действия кнопкам окна и сделать окно сворачиваемым/разворачиваемым.
Результат, который должен получиться после изучения двух частей.

Классный jQuery плагинчик может применить blur на любой html элемент.

Работает в canvas используя алгоритм StackBlur.



www.blurjs.com

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

Ура! Еще один, свеженький… чем он лучше других?



а) Новенький! Всегда, кто берется что-то делать, то обычно смотрит: есть ли в этом смысл, и если есть — делает это.
б) Красивенький! Можно не точить, а ставить из коробки. Основан на Bootstrap'е и иконках Glyphicons
в) Само собой мультиселект файлов, Drag&drop, прогрессбар и превьюшки фотографий.
г) Поддержка кросдоменного соединения, докачка и ресайз фоток на стороне клиента.
д) Готов для любой платформы сервера (PHP, Python, Ruby on Rails, Java, Node.js, и тому подобное.)

blueimp.github.com/jQuery-File-Upload

Поддержка браузеров:

github.com/blueimp/jQuery-File-Upload/wiki/Browser-support

Проблема

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