jQuery *

Многие заметили, что на YouTube и на Medium появился небольшой новый элемент UI — прогресс-бар в виде тонкой цветной полоски в самом верху страницы, который примостился прямо под панелью браузера.

Внимание к новому элементу привлек недавний популярный пост New UI Pattern: Website Loading Bars на UsabilityPost. Как выяснилось, причина использования прогресс-бара в том, что вместо загрузки новой страницы содержимое подгружается через JavaScript, и поэтому собственный индикатор браузера о загрузке страницы может не срабатывать. Чтобы у пользователя не возникало ощущения, будто страница «зависла», эту функцию переложили на плечи маленького UI-приема.

Теперь у всех желающих появилась возможность быстро сделать на своем сайте точно такой же прогресс-бар благодаря плагину NProgress.js [Демо][GitHub].

Напоминаем, что конференция jQuery Russia, посвящённая знаменитому JavaScript фреймворку, при активной поддержке портала Айти-Событие.рф, состоится 15 октября в центре Digital October в Москве.


Дата первой международной конференции jQuery Russia все ближе. В настоящий момент организаторы — ITmozg.ru — активно формируют программу конференции.

На днях решил вернуться к перепиливанию одного своего старенького Open Source проекта.
В процессе обдумывания решил, что предыдущий компонент с деревом в его нынешнем виде меня больше не устраивает.

Хотелось чего-нибудь более Event Driven, с понятным и простым API.

Сейчас решил, что оно уже готово для Public.

Берите, пользуйтесь.
Или посмотрите на example в рамках GH-pages.

Под катом краткий перевод краткой документации по API.

UPD: в комментариях мой код для организации перетаскивания.

В процессе работы над одним из проектов передо мной встала задача создания сворачиваемого дерева папок на основе сведений о нем в базе данных. Для уточнения, это выглядит примерно так:



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

Задача

Вот с таким дизайном мне предстояло разработать сайт, главная страница делится на две полосы – тёмную и светлую. Тонкие линии и некоторые ключевые элементы расположены строго по принципу золотого сечения. И тут меня накрыло…

Опять делать простые вещи сложным html+css кодом? Опять каждый браузер будет отображать страницу по-своему? Опять возиться с кроссбраузерностью? Писать хаки?

И почему таких проблем нет в desktop-программировании? Менять размеры элемента по формуле – пожалуйта. Пододвинуть кнопку левее на 17 пикселей – пожалуйста. Устроить принципиально разное расположение элементов в строгой зависимости от размеров окна – нет проблем! И только в html+css с этим могут возникнуть подобные трудности. Однажды я чуть не потерял заказчика, когда затянул с задачей «пододвинуть блок немножечко выше и левее»… мне пришлось основательно переделать всю вёрстку, потому что старая структура на такие перемещения блока рассчитана не была. Труд этот был не оценен, и поделом, ведь в результате я всего лишь пододвинул блок.

Первое и единственное мероприятие в нашей стране, посвящённое знаменитому JavaScript фреймворку — конференция jQuery Russia, при активной поддержке портала Айти-Событие.рф, состоится 15 октября в центре Digital October в Москве.




Старт ежегодной конференции jQuery был дан в 2007 году в Бостоне, и с тех пор по всему миру состоялось около двух десятков конференций под этим брендом, в том числе в Вене, Оксфорде, Сеуле, Портланде и Сан-Франциско. Осенью этого года силами ITmozg знаменитая конференция впервые пройдет в России.

Для работы с SVG есть очень много библиотек для рисования. Мы рассмотрим плагин для jQuery.

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

На разработку собственного варианта подсказок меня натолкнул Tipsy Tooltip используемый в Twitter Bootstrap. По началу я пользовался им, но все возможности плагина мне были не нужны и, будучи перфекционистом, лишний код смущал естество. Решил: напишу-ка я то, что нужно мне и ни строчкой больше. Написал и осмеливаюсь поделиться рецептом с сообществом. Авось кому-то приглянется…

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

Недавно мне понадобилось в своём проекте реализовать выбор цвета, встал выбор использовать уже готовое решение или писать самому. Быстрый гуглопоиск не дал ни одной подходящей реализации. Было принято решение написать свой.

Итак, рассмотрим что же не так в методах fadeIn и fadeOut, которые, как утверждает документация, являются аналогами метода fadeTo, но имеют некоторые свои особенности. На первый взгляд ничего, всё написано в документации. Однако, это не всегда верно, и не все особенности можно найти в документации.

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

Здравствуйте, хабровчане.

Хочу поделиться с вами одной техникой организации кода при массивной работе с DOM-элементами. Несколько лет назад, когда еще вовсе не было бэкбона и MVVC, мы писали старый добрый джаваскрипт без фреймворков: создавали объекты и заставляли их плясать на странице в общем танце. Такая практика, без сомнения, до сих пор оправдывает себя, и техника, о которой пойдет речь, применима именно к ней.

Мой рассказ — о маленькой библиотечке PageObject.js (текущая версия v0.14, 2.6K) и о том, как с ее помощью можно упростить себе жизнь.

Всплывающая фиксированная навигация



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

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

Существует два основных подхода для стилизации скроллбара средствами HTML/CSS, каждый из которых имеет свои плюсы и минусы:

• Эмуляция скролла средствами JavaScript
• JavaScript обёртка над родным скроллом

Релизнулась версия 2.0 самой популярной JavaScript-библиотеки.

В релизе выкинули поддержку Internet Explorer 6, 7 и 8. За счёт этого выиграли в размере на 12% и прибавили в скорости. Можно выиграть в размере ещё больше, если сделать свой билд, убив ненужные из 12-и встроенных по умолчанию модулей.

Тем, кому нужны старые IE остаются на ветке 1.x, которая их поддерживает и которую не забросили (скоро выйдет 1.10) и планируют поддерживать ещё несколько лет. API 2.0 хоть и совместим с не-deprecated 1.9, но изменений всё-таки много.

Подробный список изменений есть в официальном анонсе.

Итак ajax запросы, всё просто, все привыкли их уже писать, но всё же как можно сократить количество написанного кода.
jquery.async.js

Сразу пример:

<form action="/" jasync>
	<input type="submit" />
</form>

форма отправляется ассинхронно

<input type="file" href="/" multiple jasync />
<div type="file" href="/" multiple jasync>Выберите файл</div>
<div href="/" jasync dropfile>Перетащите файлы и они отправятся на сервер</div>

файлы загружаюся асинхронно

<a href="/" jasync data="year=2013&month=5" class="send">отправить данные</a>

данные отправляется ассинхронно

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

Доброго времени суток!

Хочу поделиться своей наработкой для перевода страниц сайта с помощью простейшего jQuery плагина и такой приятной новой плюшки html5, как data-* атрибуты.

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

Теперь немного кода. Предположим у нас имеется вот такая вот нехитрая html разметка:

<h1 data-translate-key="HEADING-ONE">Heading 1</h1>
        
<p data-translate-key="SOME-TEXT">Some text in tag P</p>
        
<p data-translate-key="ANOTHER-TEXT">another text</p>

Доброго времени суток, %habrauser%!

Предисловие

Я работаю программистом и пишу проекты для внутренних нужд компании. Проекты попадаются разнообразные и интересные.
До недавнего времени многие «красивости» я делал при помощи небезызвестного jQuery UI. В наборе есть практически все необходимые виджеты и т.п., использовать его просто и удобно. И даже если возникли проблемы, ответы на вопросы можно без проблем найти в сети.
И все бы было хорошо в датском королевстве, если не одно НО

Блог Interoperability @ Microsoft сообщает о том, что в будущей версии библиотеки jQuery 2.0 (первого марта была вторая бета) появится полная поддержка создания приложений для Windows 8. Над вкладом в самую популярную JS-библиотеку работала инициативная группа appendTo при технической поддержке подразделения Microsoft Open Technologies, Inc. (MS Open Tech). В связи с чем, как сообщается, разработчики получат уникальную возможность создавать программы для Windows Store в привычной среде и с использованием уже существующего JS-кода.

Также отмечается, что на данный момент для создания Windows 8-приложений уже можно использовать ряд других фреймворков — backbone.js, Knockout.JS, YUI — поэтому добавление к этому арсеналу такой популярной вещи как JQuery, должно сказаться положительно на мотивации разработчиков. При этом, конечно, Microsoft обеспечивает полный доступ ко всем возможностям WinRT API.