Lecaw

Учимся создавать Web-сайты

Foundation для начинающих: Индикаторы, оповещения и всплывающие подсказки

July 24, 2013
CSS
264hits

Сегодня, в серии статей Foundation для начинающих, вы узнаете как использовать индикаторы, оповещения и всплывающие подсказки, которые Zurb используют на своих сайтах. Мы рассмотрим все эти компоненты в виде контактной формы из предыдущего урока, для того чтобы вы могли понять, как можно использовать данные элементы в своих проектах. Давайте начнем.

ДЕМО Исходные файлы

 

Серия статей Foundation для начинающих:

Всплывающие подсказки

Прежде всего мы добавим всплывающую подсказку к чекбоксу "Send me spam", выведем небольшую подсказку о спаме, для пользователей.

<label class="has-tip">
    <span class="has-tip" title="Don't worry we won't really send you any spam this is just to display a checkbox." data-tooltip="" data-width="300">Send me spam</span>
    <input style="display: none;" type="checkbox" checked="checked" />
</label>

Здесь мы установили всплывающую подсказку для элемента label, используя класс has-tip.

Обратите внимание, что в качестве оболочки, мы использовали тег span. Тег span, помимо текста всплывающей подсказки, также должен содержать один из пользовательских атрибутов Foundation, в данном случае это data-tooltip. Это создаст рабочую подсказку, но возможно вы захотите добавить заголовок подсказки или установить фиксированную ширину. Для этого вам понадобятся такие атрибуты как - ‘title’ и ‘data-width’. Без атрибута ширины, подсказка заполнит пространство родительского контейнера.

Добавление класса ‘has-tip’ и размещение в теге span с указанными атрибутами означает, что вы можете легко установить всплывающую подсказку к любому элементу.

Добавление интерактивности

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

Отправка формы не будет работать, поскольку я только демонстрирую функции Foundation, хотя можно добавить PHP сценарий и использовать Ajax, чтобы установить отправку формы без перехода на другую страницу. Взгляните на кнопку отправки формы не обновляя страницу, используя JQuery для получения дальнейших инструкций.

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

<div class="progress round" id="progress" style="display: none;"></div>

При помощи DIV с классом “progress” мы установили прогресс бар в качестве контейнера, в то время как внутренний span (с классом “meter”) используется в качестве цвета, который постепенно заполняет контейнер.

Давайте добавим сообщение об успешной отправке. В этом примере мы сосредоточимся только на данном сообщении, но в реальной ситуации вы можете также добавить, сообщение об ошибке, например как на - blog-craft.ru. Это можно осуществить с помощью обработчика и JQuery плагина проверки.

<div class="alert-box success" style="display: none;" data-alert="">Success! Your message has been sent.
 <a class="close" href="#">×</a></div>

Возьмем DIV и добавим к нему атрибут “data-alert” вместе с двумя классами, а именно “alert-box” и “success”. Установим кнопку закрытия, чтобы пользователи могли закрыть сообщение об успешной отправке. Вы наверно заметили, что на данный момент форма выглядят немного грязно, но это не страшно, нужно добавить jQuery код, чтобы создать уровни взаимодействия.

var submitButton = $('#submitme');      		 // Переменная для кэширования кнопки       
var progressBar = $('#progress');               // Переменная для кэширования прогресс бара
var progressBarMeter = $('#progress .meter');   // Переменная для кэширования индикатора
var alertBox = $('.alert-box');                 // Переменная для кэширования индикатора
var closeButton = $('.close');                  // Переменная для кэширования кнопки закрытия
$(submitButton).click(function() { 		 	 // Запускает отправку
    $(this).fadeOut(500); 				 // Кнопка отправки, при нажатии постепенно исчезнет
    setTimeout(function() { 				 // Эффект задержки
        $(progressBar).fadeIn(500); 		 // Появление индикатора
        $(progressBarMeter).animate({width : '100%'},2000); 	// Анимация прогресс бара
        setTimeout(function() { 		 	 // Эффект задержки
            $(progressBar).fadeOut(500); 	 // Постепенно исчезает индикатор, после завершения анимации
            setTimeout(function() { 		 // Эффект задержки
                 $(alertBox).fadeIn(500); 	 // Отображение сообщения об успешной отправке
            }, 500);
        }, 2500);
    }, 500);
});

Сброс формы

$(closeButton).click(function() { 			// Инициализация функции сброса
    $(alertBox).fadeOut(500); 			// Постепенно исчезает сообщение об успешной отправке
    $(progressBarMeter).css({width : '0%'});   // Сброс индикатора
    setTimeout(function() { 				// Эффект задержки
        $('input, textarea').not('input[type=submit]').val(''); 	// Сброс полей
        $(submitButton).fadeIn(500); 		// Постепенно исчезает кнопка отправки
    }, 500);
        return false; });

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

Полезные инструменты

Много проектов, особенно которые используют панель инструментов, нуждаются в графиках и chartjs.org это отличный способ, чтобы добавить их в свой Foundation проект. Почему бы вам тоже не попробовать визуализацию данных? Эти карты отлично смотреться в рамках Foundation, даже на ретина дисплеях.

Chartjs работает на HTML5 Canvas, который поддерживается всеми современными браузерами, а с помощью polyfills можно добавить поддержку для IE7 / 8.

ДЕМО Исходные файлы

 

Дополнительная информация

Влерий Аликин - веб-разработчик & дизайнер. Соучредитель и член команды Lecaw.

Эл. почта
RATTING:
(1 Голосовать)

Оставить комментарий