Судя по частоте появления статей, KnockoutJS набирает популярность на Хабре. Внесу и я свою лепту. Хочу осветить тему нестандартных для HTML элементов управления и «дерева» в частности. Под деревом здесь понимается аналог элемента управления TreeView. Статья подразумевает, что читатель уже знаком с KnockoutJS на базовом уровне. Публикация может рассматриваться, как пособие для изучения KnockoutJS. С другой стороны, надеюсь, и опытные пользователи KnockoutJS смогут почерпнуть для себя что-то новое.
Читать полностью »
Рубрика «javascript» - 512
Knockoutjs. «Растим» дерево
2013-01-21 в 7:25, admin, рубрики: javascript, knockout, knockoutjs, mvvm, tree, treeview, Веб-разработка, метки: javascript, knockout, knockoutjs, mvvm, tree, treeview Трюк:
Внутрь элемента засовываем пустой фрейм с position:absolute, придаём элементу position:relative;
И отслеживаем frame.onresize:
Тест-Код:
<div id="Test" style="position:relative;border:red solid 1px;width:200px;height:100px;">
<iframe name="frame" width=100% height=100% style="position:absolute;z-index:-1"></iframe>
Тут контент ...
</div>
<script type="text/javascript">
frame.onresize = function(){
alert('Размеры div #Test изменены.');
};
setTimeout(function(){
document.getElementById("Test").style.width='100px';
},3000)
</script>
Введение в NikaFramework (NKF). Часть 2
2013-01-18 в 10:57, admin, рубрики: javascript, open source, web 2.0, web-разработка, Веб-разработка, метки: javascript, web 2.0, web interface, web-разработкаПродолжение первой части.
Геокодирование адреса в координаты и геолокация текущего местоположения в OpenLayers
2013-01-18 в 9:02, admin, рубрики: javascript, openlayers, OpenStreetMap, Веб-разработка, метки: javascript, openlayersПривет.
Этот пост будет небольшим, но надеюсь полезным. Сегодня я расскажу о том, как я реализовал поиск места на карте по его адресу, а также как я определяю текущее местоположение пользователя. Все это реализовано на основе OpenLayers 2.
Я рассчитываю на то, что читатель уже знаком с азами работы в OpenLayers и карта со слоями уже создана. Если нет, то пишите в комментарии, я попробую все подробно рассказать.
Встречайте долгожданный plugins.jquery.com
2013-01-17 в 19:01, admin, рубрики: javascript, jquery, jquery plugins, open source, метки: javascript, jquery, jquery plugins, open sourceРеестр плагинов jQuery уже давным давно успел превратиться в кладбище. За последние несколько лет по нему стало страшно перемещаться, на могилах некогда популярных библиотек перестали читаться имена, и лишь порывы холодного ветра и странные тени, мелькающие между мраморных плит, могли ожидать случайного путника, на свое несчастье выбравшего дорогу через этот ресурс.
К счастью, царствию уныния и страха пришел конец. Встречайте переродившийся, красивый и удобный, полезный, логичный и пригодный к использованию Реестр Плагинов jQuery
Читать полностью »
Джон Резиг об интернационализации JavaScript-приложений
2013-01-17 в 12:19, admin, рубрики: express, i18n, javascript, node.js, Веб-разработка, интернационализация, интерфейсы, локализация интерфейса 
Недавно мне пришлось заниматься интернационализацией веб-приложения на Node.js+Express, над которым я сейчас работаю, и, как мне кажется, получилось довольно неплохо (иностранные пользователи очень довольны, и я вижу заметный приток трафика из неанглоязычных стран). Стратегия интернационализации, которую я опишу, не слишком сильно завязана на Node и может подойти любому веб-приложению.
Мне часто приходилось пользоваться многоязычными сайтами или заходить на англоязычные сайты из разных стран мира, так что я хорошо представлял, каким требованиям должна удовлетворять интернационализация:
Читать полностью »
Три способа поддержать вставку картинок в поле ввода от разработчиков Яндекс.Почты
2013-01-17 в 10:37, admin, рубрики: javascript, Блог компании Яндекс, Веб-разработка, интерфейсы, котики, Яндекс.Почта, метки: javascript, интерфейсы, котики, Яндекс.Почта 
Не так давно мы подробно рассказывали новые аттачи в Яндекс.Почте. В декабре в у нас появился новый просмоторщик картинок. Работать с изображениями в Почте благодаря этим нововведениям стало действительно проще и удобнее.
Тем не менее, оставалась ещё одна сложность: в связи с браузерными ограничениями изображения нельзя было вставлять прямо в тело письма. Картинку нужно было сохранить на своём компьютере и уже оттуда прикрепить к письму, как любой другой файл.
Мы долго думали над этой проблемой. Можно было использовать java-апплет или flash, но у этих решений были существенные ограничения. Например, при использовании java-апплета нужно будет обязательно разрешать выполнение апплета в браузере. В итоге мы решили использовать новые возможности современных браузеров, такие как Clipboard API, File API и Drag n Drop.
Читайте в нашем посте о том, как вставлять в письмо картинки из буфера обмена или по публичному URL и как добавлять их в тело письма простым перетягиванием с рабочего стола.
Инерция в JavaScript на примере OL3
2013-01-17 в 6:26, admin, рубрики: javascript, maps, Maps API, Блог компании ДубльГИС (2ГИС), метки: javascript, mapsСовременный мир диктует разработчикам и дизайнерам довольно высокие стандарты качества и удобства использования веб-приложений. Как правило, хорошее впечатление о приложении складывается из множества мелочей, которые должны гармонично сочетаться между собой. Одной из таких мелочей может являться инерционное движение “драгабельных” (перетаскиваемых) объектов на странице — об этом мы и поговорим в рамках сегодняшней небольшой статьи. Фича особенно актуальна при взаимодействии пользователя с приложением посредством тач-устройств, так как размер экранов таких устройств ограничен, и передвигать объект из одной точки в другую хочется одним “легким движением руки”, а не многократными касаниями экрана.
Подобным вопросом мы когда-то задались в рамках разработки API карт 2GIS, а сегодня решили поделиться нашим скромным опытом.
Читать полностью »
jsiedit: идея и создание удобного подключаемого WYSIWYM редактора с примером для Хабрахабра
2013-01-16 в 18:18, admin, рубрики: javascript, Веб-разработка, интерфейсы, редактор, хабрахабр, метки: javascript, редактор, ХабрахабрВведение
В статье описываю подход к созданию удобного инструмента на Javascript для онлайн-редактирования текстов. В качестве примера создал прототип для редактирования статей на Хабре (описан ниже). С его помощью сейчас и вношу изменения в данную статью.
Передо мной встала задача выбора онлайн-редактора для текстов на сайте. Самым очевидным решением оказался бы один из WYSIWYG редакторов. Но этот вариант мне не понравился по нескольким причинам. Во-первых, многие уязвимости популярных CMS систем связаны именно с WYSIWYG редакторами. Во-вторых, после публикации текст часто будет отличаться от того, что было в редакторе. В-третьих, подобные редакторы сложно расширить для поддержки новых тэгов и элементов. Поэтому остановился на WYSIWYM редакторе.
Введение в NikaFramework (NKF). Часть 1
2013-01-16 в 16:13, admin, рубрики: javascript, open source, web 2.0, web interface, web-разработка, Веб-разработка, метки: javascript, web 2.0, web interface, web-разработкаЧто такое NikaFramework
NikaFramework — архитектурный JavaScript Framework для Web UI разработчиков.
Первое что нужно понять, что это не UI-ный фреймворк, как напр. ExtJS или SmartClient.
Это фреймворк, который призван организовать ваш код, сделать написание сложных динамических страниц простым занятием, при этом оставив возможность самостоятельно верстать страници на усмотрение разработчика.
-chast-1.png "NikaFramework Logo")
Какие задачи решает фреймворк?
1. Организация кода
Читать полностью »