Search
Write a publication
Pull to refresh
0
Richard_Ferlow @Richard_Ferlowread⁠-⁠only

User

Send message

jQuery Deferred Object (подробное описание)

Reading time7 min
Views122K
31 января вышел релиз jQuery 1.5, одним из ключевых нововведений которого стал инструмент Deferred Object. Именно о нём я и хочу рассказать подробнее в этой статье.

Эта новая функциональность библиотеки направлена на упрощение работы с отложенными (deferred) вызовами обработчиков (callbacks). Deferred Object, аналогично объекту jQuery, «цепочный» (chainable), но имеет свой набор методов. Deferred Object способен регистрировать множество обработчиков в очередь, вызывать зарегистрированные в очереди обработчики и переключать состояние на «завершено» или «ошибка» для синхронных или асинхронных функций.
Подробности и примеры далее

Использование Deferred объектов в jQuery 1.5

Reading time6 min
Views37K
Deferred объекты появились в jQuery 1.5. Они позволяют отделить логику, которая зависит от результатов выполнения действия от самого действия. Для JavaScript Deferred объекты не новы, они уже были в MochiKit и Dojo, но с изменениями логики jQuery ajax от Julian Aubourg, внедрение Deferred объектов было неминуемо. С Deferred объектами несколько callback могут быть связаны с результатом задачи и любые из них могут быть привязаны к действию даже после начала его выполнения. Выполняемая задача может быть асинхронна, но не обязательно.

Deferred объекты теперь встроены в $.ajax() таким образом вы будете получать их автоматически. Обработчики теперь могут быть связаны с результатом следующим образом:
// $.get, ajax запрос, он асинхронный по умолчанию
var req = $.get('foo.htm')
   .success(function( response ){
      // что-нибудь делаем с ответом
   })
   .error(function(){
      // делаем что-нибудь если запрос провалился
   });
 
// это выполнится перед тем как $.get() будет выполнено
doSomethingAwesome();
 
// Делаем что-то ещё перед завершением запроса
req.success(function( response ){
   // делаем  что-то ещё с ответом
   // он будет выполнен когда запрос завершится, а если запрос завершен, то будет вызван немедленно
   // если запрос уже был выполнен
});

Читать дальше →

Креативные сайты с нестандартными элементами

Reading time3 min
Views63K
Последнее время все чаще можно встретить сайты с необычным дизайном и функциональностью, увидев которые, можно залипнуть на некоторое время. Увидев такие, у меня рука непроизвольно тянется к f12, чтобы открыть firebug и посмотреть, как же реализован тот или иной компонент. Таким образом можно открыть для себя интересные техники и в будущем реализовать их на своих проектах. Некоторые из них стали доступны с приходом новых технологий, например таких, как CSS 3 — то, что раньше было реализовано на флеше, теперь можно воплотить с помощью строк кода в таблице стилей. Дизайнеры тоже не теряют времени, создавая новые тренды и все плотнее взаимодействуя с верстальщиками. В этой статье я хотел бы показать 15 сайтов, которые так или иначе удивили и порадовали меня. Возможно, кого-то они вдохновят на собственный шедевр



Читать дальше →

Создание оконного интерфейса при помощи jQuery UI. Часть 1

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

Создание оконного интерфейса при помощи jQuery UI. Часть 2

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

Сверхплавные трансформации для jQuery

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

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

С более старыми браузерами новые эффекты не работают, а стандартные CSS будут меняться, хотя и без какой-либо анимации. Для того, чтобы откатиться обратно на animate, достаточно использовать следующее:
if (!$.support.transition)
    $.fn.transition = $.fn.animate;

Всего 2КБ.

Доступ к статическим данным

Reading time2 min
Views2.8K
Начиная с версии 5.3 появилась возможность обращаться к статическим данным классов используя переменную. Благодаря этому мы практически забыли об ошибке «syntax error, unexpected T_PAAMAYIM_NEKUDOTAYIM», которая возникала при попытке использования оператора "::" как-то «не так».

Но, как мне кажется, об открывшихся возможностях знают не все.
Читать дальше →

PHP warning/notice сообщения в JS консоль + секретная кнопка

Reading time2 min
Views2.4K
Когда требуется делать правку кода на рабочем сайте, возникает потребность в обработке возможных ошибок, и делать это незаметно для пользователя. Для начала, потребуется определить собственную функцию обработки php ошибок.
Читать дальше →

Подборка CSS3 меню

Reading time1 min
Views15K
Под катом находится сравнительно небольшая подборка СSS3 и СSS3+JQuery меню. Некоторые из них уже могли встретится пользователям на просторах Интернета, некоторые-нет. Весь обзор представлен в виде скриншотов и демо-ссылок, а также ссылок на закачку сырцов, там, где это возможно.
Читать дальше →

Дизайн через интернет

Reading time3 min
Views7.1K
Всё сложно! Езда в общественном транспорте крупных городов похожа на консервирование овощей, а за рулём автомобиля – на боевые действия. Обозлённые лица прохожих расцветают лишь на facebook-митингах. Там, где действительно хорошо, и всё «лайк!».
Не всегда хочется выходить на неубранные, некрасивые улицы и видеть там мрачных и угрюмых людей. И кажется, что в недружелюбной, а подчас и враждебной среде, отечественный дизайн не развивается, а яркие таланты растворяются в серой действительности.

А с другой стороны, может быть, это – идеальная почва для создания новых интернет-решений? Решений для отказавшихся выходить из своих «бункеров» людей? Ведь если есть доставка суши или пиццы, то может существовать и доставка дизайна логотипа, к примеру…
Читать дальше →

Fiddler — помощник в отладке JavaScript

Reading time3 min
Views207K
На Хабре уже упоминалась данная тулза, но как-то в контексте других тем.

What is Fiddler?
Fiddler is a Web Debugging Proxy which logs all HTTP(S) traffic between your computer and the Internet. Fiddler allows you to inspect traffic, set breakpoints, and «fiddle» with incoming or outgoing data. Fiddler includes a powerful event-based scripting subsystem, and can be extended using any .NET language.

Fiddler is freeware and can debug traffic from virtually any application that supports a proxy, including Internet Explorer, Google Chrome, Apple Safari, Mozilla Firefox, Opera, and thousands more. You can also debug traffic from popular devices like Windows Phone, iPod/iPad, and others.

To debug applications you've written in Java, .NET, or using WinHTTP, see this page.


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

Подробности

Автоматическая кросс-доменная установка высоты Iframe

Reading time4 min
Views36K
Думаю, многие, кто сталкивался в своей работе с iframe, сталкивались и с задачей установки высоты этого самого айфрейма.

Это может быть необходимо, например, когда ты хочешь дать возможность пользователям ставить виджеты с вашего сайта на их сайт, и хочется, чтобы размер контейнера (iframe) виджета соответствовал размерам содержимого этого виджета.

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

Есть одно неплохое кросс-доменное решение, но оно было написано в 2007 году, а с тех пор многое изменилось. Поэтому пришлось разрабатывать решение этой проблемы самостоятельно, основываясь на приведенном решении.

Читать дальше →

3D в описании товара

Reading time4 min
Views6.7K
Добрый день дамы и господа,

Писать этот топик в «я пиарюсь» несколько неверно, т.к. мы ищем не клиентов, а партнеров. Поэтому я выбрал хабы «Веб-разработка» и «ИТ-Инфраструктура». Если решение не верное, то сообщите пожалуйста в личку.

Хочу вам представить один из проектов, который должен поспособствовать проникновению 3D в Online. Идея не нова и ее пытались уже много раз реализовать, до сих пор, как я понимаю, не удачно, т.к. повсеместно ее так и не используют. Смысл состоит в том, что кроме фотографий продукта в магазине можно добавить и 3D модель. Весьма часто такая модель несет больше информации, чем огромный набор фотографий. Это происходит по той простой причине, что модель воспринимается как одно целое, а вот фотографии нужно еще и совместить, что не каждому дано.

Модель можно вставить куда угодно(почти). Например, вы купили своему сыну классного робота Лего, выложили в Одноклассниках фотки с дня рождения, естественно, подарок там тоже есть. Но можно ведь к фотографиям еще и 3D модель добавить(смотрите, какой клевый подарок!), тем более, что это ничего не стоит и делается быстро. Через пару месяцев робот сыну надоел, выбрасывать его жалко, т.к. он в хорошем состоянии да и не дешевый. С сыном заключается договор: робот продается, три недели мороженное не покупается( а может нужно 5 по математике принести?), деньги от продажи + вышеуказанный бонус и покупается новая игрушка. Сказано-сделано. Старый робот выставляется на аукцион. К описанию с фотками добавляется 3D модель. Выглядеть это будет вот так(реальный лот на E-Bay). Модель бесплатна, покупатели довольны.

Читать дальше →

Заготовка для сайта (Kohana+Bootstrap+HTML5)

Reading time4 min
Views29K
Рассмотрим заготовку для сайтов, обладающую хорошими возможностями для дальнейшего расширения. Будут указаны её основные особенности, и подробно описан процесс установки.
Если представленная заготовка окажется полезной большинству пользователей, о чем они не преминут указать в комментариях, тогда, скорее всего, отдельные её модули и особенности будут рассмотрены в дальнейшем.
Некоторые функции, код и отображение данных используются больше в показательных целях, чем для практического применения в рамках создания рабочего сайта.
В представленном виде заготовку уже можно применять для создания простых сайтов, но с неплохими возможностями для расширения.
Читать дальше →

Экспорт друзей VK в Google Contacts

Reading time5 min
Views21K
После покупки андроид-фона, появилась необходимо перебросить всех друзей ВК с нормальными номерами телефона в Гугл контакты. В интернете ничего подходящего не нашел, поэтому пришлось написать свой скрипт на Python.
Читать дальше →

Веб-интерфейс с образным представлением блока меню

Reading time3 min
Views2.6K
Проанализировав несколько существующих интернет-сайтов, таких, например, как: ru.asus.com (ведущий производитель компьютерных комплектующих), bbc.com (сайт ведущего мирового агентства СМИ), msu.ru (сайт московского государственного университета), admhmao.ru (сайт администрации ХМАО – Югры), было установлено, что проектирование пользовательского веб-интерфейса сводится к созданию структуры, состоящей из следующих блоков:
1. Верхняя, титульная часть дизайн-макета веб-страницы («шапка» или header).
2. Нижная, титульная часть дизайн-макета веб-страницы («подвал» или footer).
3. Блок меню, которое может располагаться как горизонтально, так и вертикально. Элементы меню часто выполняются в блочно-текстовом или символьном виде.
4. Блок с основным содержанием страницы («контент»), который также может содержать дополнительный функционал.

Методами при таком проектировании, в основном являются: метод «Золотого сечения», «Кошелек Миллера» и «Принцип группировки».

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

Читать дальше →

Организация разработки веб-приложений с JQuery виджетами

Reading time3 min
Views2.3K

Проблема


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

Kartograph — фреймворк для создания интерактивных карт

Reading time1 min
Views20K
Kartograph — это новый фреймворк для создания интерактивных картографических веб приложений без использования Google Maps/Bing Maps или любого другого сервиса. Он создавался с учетом потребностей дизайнеров и журналистов.

Можно поглядеть на демки, чтобы узнать на что способен Kartograph.
или узнать как это все работает.

Information

Rating
Does not participate
Location
Россия
Registered
Activity