Блог вебмастера

Включите распознавание сложных жестов мышью (жесты могут описывать буквы, символы других алфавитов и иные символы, включая Ваши собственные знаки) на Вашем сайте!

Возможности

• 1. Можно создавать свои собственные жесты;
• 2. Можно иметь множество областей на странице, которые будут способны распознать жесты;
• 3. Есть визуальная обратная связь;
• 4. Работоспособность во всех основных браузерах.

Благодарности

Этот скрипт инициирован из скрипта распознавания жестов мыши от Didier Brun.

Демонстрация

Запустить демонстрацию распознавания жестов мыши

Скриншот модных жестов jQuery

CodePlex радует новыми решениям. На этот раз Ribbon интерфейс на jQuery в стиле 2010 версии Microsoft Office.

Несмотря на то, что необходимо минимизировать количество http-запросов, иногда (или часто, в зависимости от задачи) бывает полезно загружать часть «тяжелого» функционала только тогда, когда он действительно понадобится на странице.

У jQuery есть механизм, позволяющий осуществить это — $.getScript, однако, он обладает рядом недостатков:

• не запоминаются уже загруженные или загружаемые в данный момент скрипты, при повторном запросе опять идет их загрузка.
• выключен кэш (к каждому урлу насильно приписываются параметры типа ?_=1242843920520). Зачем это было так жестко сделано, для меня осталось загадкой.
• у коллбэка нельзя задать контекст (это вообще болезнь коллбэков jQuery).

Пришлось написать небольшой плагин, лишенный вышеперечисленных недостатков:



$.loadScript(url, callback, [context])



Может кому-то пригодится. Скачать и попробовать можно с code.google.

Есть у меня небольшой проект с user-generated content-ом. Встала задача сделать код кнопки с ссылкой на страничку пользователя, для интеграции в пользовательские блоги и сайты. Но делать скучные кнопки, как у большинства конкурентов, не хотелось. Хотелось, на равне с простыми кнопками и ссылками, сделать что-то особенное, jQuery-евское, с аяксом и анимацией .



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



Проблемы очевидны:

1. Необходимо определить, используется ли jQuery и нужный плагин на сайте пользователя. Если нет, то обоих динамически подгрузить. Делать отдельно коды для тех кто использует jQuery на своем сайте и для тех кто нет — не комильфо, а тем более подгружать при любом раскладе (могут возникнуть глюки, особенно у плагинов).
   
2. Пережатый jQuery весит около 60 кБ, и в случае подкачки может не успеть полностью загрузиться и инициализироваться до исполнения кода.
   

В качестве вкусности я использовал плагин fancybox. Он позволяет не только отображать фотографии с lightbox-эффектом, но и любой другой контент в iframe.



Ниже представлен код.

Другая неделя, другая коллекция ссылок на некоторые из самых интересных и захватывающих событий в Сети, касающихся jQuery.



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



Такэже стоит упомянуть новый облик сайта jQuery для дизайнеров от Реми Шарпа.

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



Конечно же, не претендую на какую-то новизну, и данная заметка будет больше полезна начинающим с jQuery (коим и сам являюсь), чем людям, имеющим существенный опыт с данным javascript фреймворком.

Итак, опять немного произвольный список открытий, относящихся к jQuery на этой неделе.

Проблема

Итак, сегодня я получил очень полезный комментарий на топик об загрузке файлов в iframe



Nedomolkin :

в Опере 9.2 не работает. впрочем, к моему сожалению и скрипт от kossnocorp на последней версии jquery так же не функционирует в опере 9.2 из-за вот этого (http://dev.jquery.com/ticket/4217) бага

Баг действительно имел место быть и дело не в моем плагине. Дело в Sizzle. Почитав тикет, тему на Google Groups я понял, что проблема ничтожна и всего лишь надо пропатчить KDE под FreeBSD Sizzle. Будучи противником ненативных решений, я решил собрать jquery-sizzle с самым свежим движком селекторов который уже пропатчен и замечательно работает.



Дело за малым, создаем папке, открываем консоль (для Wюзеров Open Git Bash Here) меняем директорию на свежую папку и пишем:

git init

git remote add origin git://github.com/jeresig/sizzle.git

git pull origin master

Нам доставляется свежая версия Sizzle которую нам теперь неплохо бы собрать (вот тут я незнаю что советовать Wюзерам, надеюсь активные комментаторы помогут с этим):

make

И вуаля у нас появляется «jquery-sizzle.js» который мы и будем использовать в проекте. Но торопиться не стоит, может Джое случайно заснул на клавиатуре и все это закоммитил? Проверяем: открываем в браузере test/index.html.

all_red_numbers == 0 ? 'Вел дан у нас все вышло!' : '*ля'

Теперь все что нам нужно, это после включения jquery добавить jquery-sizzle и наслаждаться результатом.



UPD: Протестировано: Windows 7 / Opera 9.64

Новая неделя, и новая коллекция ссылок на некоторые из самых интересных и захватывающих происшествий в сети.

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



Задача: во всех проектах над которыми я работаю, не редко используется js и технология ajax. Нередко также передомной стоит задача: надо показать что сайт не проигнорировал действие пользователя и не сломался. Он просто что то подгружает. До вчерашего дня я пользовался простой обверткой любого аякс запроса двумя функциями. Одна показывала плашку «загрузка», другая эту плашку прятала.



jQuery нам позволяет отловить ajax запросы, но не дает контролировать процесс load() (например для того что бы отловить загрузку файла в iframe ). Так же иногда процессов (пользователь активировал несколько функций) бывает несколько, а такой простой подход спрячет плашку сразу после загрузки первого процесса.



Решение: плагин jQuery — loadprocess направлен на то, что бы вы раз написали подобный код и забыли об этом:

var loading = $('#loading');



$().loadprocess({

 load_start: function() {

  loading.fadeIn(300);

 },



 load_end: function() {

  loading.fadeOut(300);

 }

});



* This source code was highlighted with Source Code Highlighter.

Плагин вылавливает ajax выполнение, встраивается в функцию load (extend) и считает процессы. Все что надо это простой js и блок с информацией о загрузке.



Кстати его не надо скрывать. После того, как сайт будет полностью готов к работе, сработает callback функция load_end и она исчезнет с глаз долой (как в примере).



TODO: Автоматическая блокировка кнопок и ссылок что бы предотвратить массовые аякс запросы и повторные нажатия.



И как всегда:



Лицензия: MIT

Скачать можно с git репозатория: http://github.com/kossnocorp/jquery-loadprocess



Вопросы и мои ответы на них, а так же предложения, пожелания и критика: