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

Демо Скачать

Недавно мне понадобился календарь в виде органайзера, который бы умел экспортировать события в формат iCal. В принципе несложно написать такой виджет самостоятельно, но сначала я попробовал найти готовое блюдо в сети. Поиск привел меня к календарю Plans, который, как оказалось, многое умеет и не уступает платным скриптам. Написан на Perl, легко инсталлируется, хорошо документирован. Единственное, что вызвало недоумение, так это смесь самих данных (событий) и параметров их визуализации в одном xml файле.

Источник: cnn.com

jQuery

Введение в jQuery UI-часть 1

JQuery для продвинуттых: проект UI

Как работают jQuery UI виджеты – тюториал

Beginners Guide to jQuery Sorting

jQuery UI - виджет “Аккордеон” – часть 1

Использование модального и диалогового окон в JQuery UI

Простые перетаскиваемые объекты в jQuery

Использование разных тем jQuery UI на одной странице

Использование jQuery UI слайдера

Как создать аккордеон (виджет)?

Создание слайдера в стиле Google

Перетаскивние с помощью jQuery UI

Создание слайдера с помощью jQuery UI

Создание слайдера содержания с помощью jQuery UI

jQuery UI закладки След/Пред

jQuery закладки: создание HTML закладок с использованием jQuery UI

Create A Tabbed Content Rotator Using jQuery

Комбинирование перетаскиваемых и выделяемых объектов с помощью jQuery UI

Построение простого измерителя стоимости с помощью jQuery UI слайдера

Ручная обработка команды 404 с помощью jQuery и jQuery UI

jQuery UI – начианем изучать с темой ThemeRoller

Создание собственных компонент jQuery “ThemeRoller-Ready”

The jQuery UI CSS фреймворк – введение в разработку собственных тем

Стилизация кнопок и тулбаровс помощью jQuery UI CSS фреймворка

jQuery Visualize Plugin

Flot

jQchart – jQuery Chart Plugin

jQchart + CanvasGradient

jqPlot

jQuery + Flot – Plots, Canvas and Charts

Fun With Canvas: Create a jQuery Graph Plugin

jQuery Sparklines

TufteGraph

Источник
Creating Charts And Graphs Using jQuery

Краткий перевод. Источник TimesOnline

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

Гуглфон (Googlephone) обещает стать одним из самых современных смартфонов с большим сенсорным дисплеем и процессором, который будет почти в два раза быстрее, чем в процессор в Apple iPhone 3GS. Это будет первый телефон, работающий на новой версии операционной системы Android с кодовым названием “Флан” от компании Google. Скорость 3D игр будет не хуже, чем у многих портативных игровых консолей!

Согласно Ашоку Кумару, аналитику фирмы “Northeast Securities”, занимающейся финансовыми услугами, телефоны компании Google будут собираться на стороне - возможно, их производителем станет тайваньская фирма HTC. В качестве процессора будет взят процессор от Qualcomm.

Реальный прорыв произойдет при внедрении в Гуглфон услуги Google Voice от калифорнийской компании Tech, известной на рынке высоких технологий в области телефонии. Google Voice выделяет пользователям США бесплатный телефонный номер и предоставляет неограниченные по времени бесплатные звонки на любой телефон в стране - стационарный или мобильный. Что касается международных звонков, то их стоимость будет начинаться от нескольких центов за минуту. Google Voice, используя сложные алгоритмы распознавания речи, позволяет преобразовывать голосовые сообщения в текстовые сообщения электронной почты, автоматически блокировать вызовы связанные с рекламой (спам), а также дает пользователям свободный обмен текстовыми сообщениями.

Google озвучил свои намерения две недели назад, когда он купил небольшую компанию под названием Gizmo5, которая разработала технологию для соединения для соединения с сетями VoIP (voice-over-internet - голос через интернет) , такими как Skype. Теперь Google располагает средствами, чтобы предложить службу от абонента до абонента, с помощью которой потребители могут звонить и принимать звонки между Гуглфоном и другими телефонами или компьютерами в любой точке мира, и часто совершенно бесплатно.

“Мы никогда не были такой ситуации, когда один поставщик контролирует весь стек услуг - от операционной системы до огромного спектра услуг компании Google”, говорит Кумар. “Это изменяет динамику соревновательности и конкуренции, такого никогда прежде не было”.

Сам Google однако отказался комментировать свои планы.

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

Если компании Google удастся связать услугу Google Voice со Skype и другими сетями Voip, то она сможет заманить пользователей с предложением бесплатных звонков и предоставлением реального телефонного номера.

Одной из проблем Google станет связь с мобильными телефонными сетями, которая должна обеспечить функциональность не только в с Wi-Fi, но и внутри 3G сетей, после чего станет реальной возможность связи из любой точки между двумя любыми мобильными устройствами мобильной, а также Интернетом.

Источник:
Неполный свободный перевод статьи The Googlephone: Google gears up for attack on mobile-phone market от 22 Ноября в онлайновом издании “The Sunday Times”

Скачать
Демо

Задача

Если вы по какой либо причине должны иметь на сайте большую форму для заполнения с большим количеством полей, то ее следует семантически разбить на отдельные группы полей (fieldsets). Каждая такая группа полей должна иметь четкое и ясное название. И хотя множество примеров в инете сегодня выглядят совершенно по разному, этому правилу все же надо стараться следовать.

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

Создаем “шаги”

    

        <-- поля ввода -->
    
    

        <-- поля ввода  -->
    
    

        <-- поля ввода  -->
    

Теперь поясним код, приведенный ниже. Чтобы определить, сколько должно быть шагов, нам необходимо выделить все группы полей (fieldsets) и получить размер этого набора групп полей. Затем мы проходим по этому набору (который возвращает как раз все группы полей), чтобы определить количество шагов. Каждую группу полей мы с помощью jQuery на лету помещаем в слой (div) и присоединяем к нему HTML элементы “параграф”(<p></p>), которые как раз и будут кнопками “веред” и “назад”.

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

var steps = $("#SignupForm fieldset");

var count = steps.size();

steps.each(function(i) {
    $(this).wrap("


");
    $(this).append("


");

    if (i == 0) {
        createNextButton(i);        // to do
        selectStep(i);                  // to do
    }
    else if (i == count - 1) {
        $("#step" + i).hide();
        createPrevButton(i);       // to do
    }
    else {
        $("#step" + i).hide();
        createPrevButton(i);       // to do
        createNextButton(i);       // to do
}
}

Теперь мы объясним, как создавать кнопки и как пользователь будет переходить по шагам от одной формы к другой с помощью мастера заполнения.

Создаем кнопки “вперед” и “назад” и добавляем интеракивности

Создание кнопок не так сложно. Каждой кнопке мы даем уникальное имя (например, step1next или step3prev) и добавляем их к панелям, которые мы создали в предыдущем разделе. Чтобы сделать кнопки интерактивными, мы свяжем с ними событие “click”. Вот как они будут работать:

Creating the buttons isn’t that hard. Each button will have a unique name (e.g. step1next, or step3prev) and will be appended to their panels created in previous step. In order to add some interaction, and that is to enable moving between steps, we need to bind click event to each button. This is how they will work:
* Когда пользователь нажимает кнопку “назад”, текущий шаг делается невидимым, показывается предыдущий шаг и вызывается метод selectStep(), который пометит этот шаг как текущий.
* Когда пользователь нажимает кнопку “вперед”, текущий шаг делается невидимым, показывается следущий щаг и вызывается метод selectStep(), который пометит этот шаг как текущий.

function createPrevButton(i) {
    var stepName = "step" + i;
    $("#" + stepName + "commands").append("< Back");
    $("#" + stepName + "Prev").bind("click", function(e) {
    $("#" + stepName).hide();
    $("#step" + (i - 1)).show();
        selectStep(i - 1);
    });
}
function createNextButton(i) {
    var stepName = "step" + i;
    $("#" + stepName + "commands").append("Next >");
    $("#" + stepName + "Next").bind("click", function(e) {
        $("#" + stepName).hide();
        $("#step" + (i + 1)).show();
        selectStep(i + 1);
    });
}

Функция selectStep(), о которой мы говорили выше, удаляет класс “current” со всех шагов и добавляет этот класс к текущему шагу.

function selectStep(i) {
    $("#steps li").removeClass("current");
    $("#stepDesc" + i).addClass("current");
}

Создание информатора о шагах мастера заполнения

Мастер работает. Добавим информатор о том, на каком шаге находится пользователь, используя концепцию Steps left UI design pattern
В самом начале нашего кода мы добавим неупорядоченный список с перечнем шагов. Кроме этого, мы спрячем кнопку регистрации, которая будет видна только на последнем шаге.

var steps = $("#SignupForm fieldset");
var count = steps.size();

$("#SaveAccount").hide();
$("#SignupForm").before("


");

Мы также воспользуемся функцией each() и добавим информацию о шагах к каждому набору полей (fieldset) отобранного набора элементов. Каждый шаг нумеруется числом. К этому числу мы добавляем описание шага, полученного из тегов <legend>.

steps.each(function(i) {
    var name = $(this).find("legend").html();
    $("#steps").append("
Step " + (i + 1) + "" + name + "

");
    ...
});

И наконец, кнопку submit сделаем видимой только на последнем шаге.

$("#" + stepName + "Prev").bind("click", function(e) {
    $("#SaveAccount").hide();
});

$("#" + stepName + "Next").bind("click", function(e) {
    if (i + 2 == count)
        $("#SaveAccount").show();
});

Скачать

Демо
Перевод статьи Turn any webform into a powerful wizard with jQuery (FormToWizard plugin)