Django и jQuery Template

Published at September 21, 2011 ·  1 min read

По отдельность Django и плагин jQuery Template у меня работали хорошо. А вот вместе возникли небольшие проблемы. Вот только не знаю: это все из-за моей невнимательности или данная фича/бага плагина тоже сыграла свою роль.

Вначале просто  data binding работал отлично и никаких проблем не предиделось. Но стоило только появиться необходимости использовать тег {{if}} из jQuery Template, встретились первые неожиданности.

Неожиданность номер раз:

Не совсем, конечно, неожиданность, а, скорее, первая меленькая проблемка. Конструкция “{{“ - совпадает с синтаксисом шаблонов в Django, от чего мы получаем ошибку что у нас неправильный темплейт. Пришлось открыть доки django и найти там что такое template tag и как им пользоваться.

jQuery Ajax Table - небольшой плагин для jQuery

Published at August 30, 2011 ·  1 min read

То, о чём писал в твиттере, но не мог написать в блоге раньше. 

Была небольшая и, на первый взгляд, достаточно простая задача - показать на странице таблицу, с возможностью сортировки и автообновления. Ну ещё и поиск по ней. После некоторого времени, потраченного на поиск и попытки исправления существующих решений стало понятно, что написать с нуля будет быстрее и дешевле (тут имеется в виду также дальнейшая поддержка всего этого). Готовые реализации javasctipt-библиотек и плагинов к jQuery были или слишком уж навороченный для данной задачи или, мягко говоря, очень плохо справлялись с обновлением таблицы и последующей сортировкой. Результатом этого всего стало написание плагина для jQuery c нуля.

jQuery из исходников

Published at January 27, 2011 ·  3 min read

jQuery - достаточно мощный и удобный javascript framework. Последняя версия 1.4.4 имеет размер 179KB для разработчиков и всего-лишь 26KB для использования в production. 26 килобайт кода не много, но в таком сжатом формате разобраться практически не возможно даже с помощью дебаггера. В неупакованный версии разобраться проще, в дебаггере всё выглядит хорошо, но всё-равно все тонкости работы и устройства jQuery проходят мимо нас. В 7180-ти строках javascript-кода даже с помощью средств IDE и не менее мощной комбинации Ctrl+F  найти нужный кусок кода не так уж и просто.Что же делать тем, кто хочет разобраться к том, как работает jQuery? Ответ достаточно простой: скачать исходники. Звучит странно и непонятно. В голове возникает вопрос: какие могут быть исходники у библиотеки, написанной на javascript? Под фразой “исходники jQuery” я подразумеваю то, что лежит у них в репозитории http://github.com/jquery/jquery.

Модальные диалоги (popups) на HTML. Часть 2

Published at December 16, 2010 ·  2 min read

Продолжение предыдущего поста: http://blog.e0ne.info/post/Modal-popup-with-HTML.aspx

Часть 2. Практика

Если есть проблема, то, обязательно, должно быть решение. Так как готового я не нашел (возможно, плохо искал), пришлось изобретать свое.  Решений, на самом деле, нашлось аж целых два, но так как я остановился лишь на одном, то это решение я рассмотрю более подробно и с примером.

Для начала рассмотрю тот вариант, который я не стал реализовывать.

Решение проблемы #1: манипуляции с свойством tabIndex.

Те, кто сталкивался с необходимостью навигацией по сайту с помощью клавиатуры непременно сталкивались с таким свойством элементов, как tabIndex. По умолчанию, для всех элементов (кроме ) и tabIndex равен 0. Для других элементов свойство или не определено, или задано значение “-1” (минус еденица) В таком случае переход по элементам осуществляется в порядке их расположения в DOM-моделе. Если необходимо сделать так, чтоб при навигации по странице с помощью кнопки tab фокус на элемент не попадал, то значение tabIndex необходимо сделать -1.

4 способа запустить JavaScript при загрузки страницы

Published at November 22, 2010 ·  2 min read

Рано или поздно при написании JavaScript’а возникает необходимость в том, чтобы он был автоматически запущен при загрузке страницы. Нужно это, как правило, для следующих действий: инициализация интерфейса (UI) и отложенная загрузка данных (lazy load).Как часто бывает, для такой простой на первый взгляд задачи, есть несколько способов решения.

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

Способы решения:

Модальные диалоги (pop-up) на HTML

Published at October 28, 2010 ·  3 min read

Часть 1. Теория

Сейчас использование модальных и не только диалогов на веб-сайтах является вполне нормальным явлением, в следствии чего нам доступна масса уже готовых контролов как для asp.net/…. (подставьте сюда ту технологию, которую вы используете в своих проектах), так и множество плагинов для популярных javascript-фреймворком, таких как jquery, moo tools, prototype и других. Для упрощения договоримся, что здесь под контролом я буду иметь в виду все что, что в итоге превращается в html-код и выглядит как привычное нам модальное диалоговое окно.Реализация диалогового окна на html выглядит следующим образом:

JQuery Tips: маленькие, но полезные скрипты

Published at August 10, 2010 ·  2 min read

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

[Добавлено перед публикацией поста]Все примеры достаточно просты, большинство (5 штук!) взяты из документации, но они активно используются мной и я решил сделать пост-заметку для себя. Может, еще кому-то будет полезно. Те, кто не использует jQuery либо другую библиотеку (еще остались такие?) поймут, что эти несколько строк кода в каждом примере иногда заменяют десятки строк кода на javascript’е без использования сторонних библиотек и своих велосипедов.[/Добавлено перед публикацией поста]

Делаем Hover control с ипользованием ASP.NET и jQuery

Published at June 14, 2010 ·  2 min read

В связи с тем, что я повсеместно пытаюсь избавиться от ASP.NET AJAX Control Toolkit (ACT) и перейти на использование jQuery, то от использования Hover Extender от ACT пришлось отказаться. Сразу же было найдено большое количество разнообразных плагинов для jQuery, но большинство из них имели недостаточную реализацию, из-за чегоостановился на jQuery plugin EZPZ Tooltip.

Из основных достоинств данного плагина хочется выделить:

• “Чистый” HTML - не нужно добавлять специальные атрибуты для элементов, плагин завязывается на отдельный HTML элемент.
• Конфигурация через наименование (Convention over configuration) - поведение элементов зависит от из ID.
• Гибкие настройки - с помощью CSS можно настроить как внешний вид контрола, так и его позиционирование.
• Возможность замены стандартных эффектов путем перехвата соответствующих событий на jQuery.
• Удобство и простота работы.
• Маленький размер - 4.5K в сжатов виде.

Более подробно о всем этом можно почитать на странице проекта, а я хочу рассказать как можно его использовать в связке с ASP.NET на примере простого UserControl.

QUnit - тестируем JavaScript

Published at February 12, 2010 ·  1 min read

Разработчики JavaScript-фреймворка JQuery не перестают нас удивлять. После недавнего релиза JQuery 1.4.1 нам представили инструмент для unit-тестирования кода, написанного на JavaScript - QUnit. 

В данный момент поддерживаются такие функции как expect(), equals(), ok(), same(), log() и асинхронные тесты. Вместе с фреймворком распространяется css-файл, с помощью которого можно быстро и красиво выводить результаты тестов. Также разработчики активно используют его для тестирования самого JQuery, поэтому можно посмотреть уже готовые приверы от авторов фреймворка.

P.S. Что-то подсказывает мне что не загорами плагин для FireBug, по крайней мере, мне бы этого хотелось…

jQuery 1.4 Alfa 1

Published at December 7, 2009 ·  1 min read

Несколько дней назад вышла новая версия популярного JavaScript framework’а jQuery, пока только альфа, которую сами разработчики не рекомендуют использовать в production. Официальная информация на блоге http://blog.jquery.com/2009/12/04/jquery-14-alpha-1-released, а я расскажу о своих первых впечатлениях по сравнению с последней стабильной версией 1.3.2.

Для начала сравним размеры файлов:

Видем что размер вырос, примерно, на 30 килобайт. Много это или мало - судите сами.

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