—»     —»   Кнопки со встроенным индикатором прогресса
  Раздел: Кнопки   Комментариев: 1  

Кнопки со встроенным индикатором прогресса



Кнопки со встроенным индикатором прогресса

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

Они идеально подойдут для отображения прогресса при заполнении форм или при загрузки контента при помощи AJAX. Здесь мы также будем использовать CSS3-стили и переходы, чтобы вы смогли без труда оформить их по собственному усмотрению.

Демо | Скачать архивом
Внимание! У вас нет прав для просмотра скрытого текста.


HTML-код

В первом разделе нашего руководства давайте займемся разработкой HTML-верстки. Она представлена в виде стандартного HTML5-документа, который включает в себя два дополнительных ресурса, о которых мы с вами поговорим позже – styles.css и javascript-файл script.js. Вдобавок, мы также включили сюда jQuery-библиотеку и шрифт Raleway из библиотеки веб-шрифтов от Google.

Index.html

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8"/>
<title>Tutorial: Buttons with built-in progress meters</title>

<link href="http://fonts.googleapis.com/css?family=Raleway:400,700" rel="stylesheet" />

<!-- The Stylesheets -->
<link href="assets/css/style.css" rel="stylesheet" />

</head>

<body>

<h1>Progress Buttons</h1>

<a id="submitButton" href="#" class="progress-button">Submit</a>

<a id="actionButton" href="#" class="progress-button green" data-loading="Working.." data-finished="Finished!" data-type="background-bar">Action!</a>

<a id="generateButton" href="#" class="progress-button red" data-loading="Generating.." data-finished="Download" data-type="background-vertical">Generate</a>

<h1>Progress Control</h1>

<a id="controlButton" href="#" class="progress-button">Start</a>

<div class="control-area">
<a class="command increment">Increment</a>
<a class="command set-to-1">Set to 1%</a>
<a class="command set-to-50">Set to 50%</a>
<a class="command finish">Finish</a>
</div>

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="assets/js/script.js"></script>

</body>
</html>

Разметка здесь довольно простая. Кнопки прогресса будут определены в виде обычных гиперссылок. Для того чтобы они были распознаны плагином и преобразованы в кнопки со встроенными индикаторами прогресса, нам нужно привязать к ним класс .progress-button. Кнопки также можно конфигурировать при помощи установки 3 атрибутов data-*:

* data-type определяет, какой тип строки прогресса будет отображаться. На данный момент поддерживаются три типа: background-horizontal (по умолчанию), background-bar и background-vertical.
* data-loading определяет текст, который будет отображаться в момент движения строки прогресса. Стандартное значение Loading..
* data-finished содержит текст, который будет отображен на кнопке после завершения. Стандартное значение Done!

Если вы опустите эти атрибуты, то будут использоваться стандартные значения.

Кнопки со встроенным индикатором прогресса

jQuery-код

В данной части руководства мы займемся созданием javascript и jQuery-кода, которые и заставят наши кнопки работать. Код будет организован в формат 6 jQuery-плагинов, которые делят между собой общее имя - progressInitialize, progressStart, progressIncrement, progressTimed, progressSet и progressFinish. В коде приведено множество комментариев, поэтому вы без труда разберетесь в нем:

assets/js/script.js

$(document).ready(function(){

// Convert all the links with the progress-button class to
// actual buttons with progress meters.
// You need to call this function once the page is loaded.
// If you add buttons later, you will need to call the function only for them.

$('.progress-button').progressInitialize();

// Listen for clicks on the first three buttons, and start
// the progress animations

$('#submitButton').click(function(e){
e.preventDefault();

// This function will show a progress meter for
// the specified amount of time

$(this).progressTimed(2);
});

$('#actionButton').click(function(e){
e.preventDefault();
$(this).progressTimed(2);
});

$('#generateButton').one('click', function(e){
e.preventDefault();

// It can take a callback

var button = $(this);
button.progressTimed(3, function(){

// In this callback, you can set the href attribute of the button
// to the URL of the generated file. For the demo, we will only
// set up a new event listener that alerts a message.

button.click(function(){
alert('Showing how a callback works!');
});
});
});

// Custom progress handling

var controlButton = $('#controlButton');

controlButton.click(function(e){
e.preventDefault();

// You can optionally call the progressStart function.
// It will simulate activity every 2 seconds if the
// progress meter has not been incremented.

controlButton.progressStart();
});

$('.command.increment').click(function(){

// Increment the progress bar with 10%. Pass a number
// as an argument to increment with a different amount.

controlButton.progressIncrement();
});

$('.command.set-to-1').click(function(){

// Set the progress meter to the specified percentage

controlButton.progressSet(1);
});

$('.command.set-to-50').click(function(){
controlButton.progressSet(50);
});

$('.command.finish').click(function(){

// Set the progress meter to 100% and show the done text.
controlButton.progressFinish();
});

});

// The progress meter functionality is available as a series of plugins.
// You can put this code in a separate file if you wish to keep things tidy.

(function($){

// Creating a number of jQuery plugins that you can use to
// initialize and control the progress meters.

$.fn.progressInitialize = function(){

// This function creates the necessary markup for the progress meter
// and sets up a few event listeners.

// Loop through all the buttons:

return this.each(function(){

var button = $(this),
progress = 0;

// Extract the data attributes into the options object.
// If they are missing, they will receive default values.

var options = $.extend({
type:'background-horizontal',
loading: 'Loading..',
finished: 'Done!'
}, button.data());

// Add the data attributes if they are missing from the element.
// They are used by our CSS code to show the messages
button.attr({'data-loading': options.loading, 'data-finished': options.finished});

// Add the needed markup for the progress bar to the button
var bar = $('<span class="tz-bar ' + options.type + '">').appendTo(button);

// The progress event tells the button to update the progress bar
button.on('progress', function(e, val, absolute, finish){

if(!button.hasClass('in-progress')){

// This is the first progress event for the button (or the
// first after it has finished in a previous run). Re-initialize
// the progress and remove some classes that may be left.

bar.show();
progress = 0;
button.removeClass('finished').addClass('in-progress')
}

// val, absolute and finish are event data passed by the progressIncrement
// and progressSet methods that you can see near the end of this file.

if(absolute){
progress = val;
}
else{
progress += val;
}

if(progress >= 100){
progress = 100;
}

if(finish){

button.removeClass('in-progress').addClass('finished');

bar.delay(500).fadeOut(function(){

// Trigger the custom progress-finish event
button.trigger('progress-finish');
setProgress(0);
});

}

setProgress(progress);
});

function setProgress(percentage){
bar.filter('.background-horizontal,.background-bar').width(percentage+'%');
bar.filter('.background-vertical').height(percentage+'%');
}

});

};

// progressStart simulates activity on the progress meter. Call it first,
// if the progress is going to take a long time to finish.

$.fn.progressStart = function(){

var button = this.first(),
last_progress = new Date().getTime();

if(button.hasClass('in-progress')){
// Don't start it a second time!
return this;
}

button.on('progress', function(){
last_progress = new Date().getTime();
});

// Every half a second check whether the progress
// has been incremented in the last two seconds

var interval = window.setInterval(function(){

if( new Date().getTime() > 2000+last_progress){

// There has been no activity for two seconds. Increment the progress
// bar a little bit to show that something is happening

button.progressIncrement(5);
}

}, 500);

button.on('progress-finish',function(){
window.clearInterval(interval);
});

return button.progressIncrement(10);
};

$.fn.progressFinish = function(){
return this.first().progressSet(100);
};

$.fn.progressIncrement = function(val){

val = val || 10;

var button = this.first();

button.trigger('progress',[val])

return this;
};

$.fn.progressSet = function(val){
val = val || 10;

var finish = false;
if(val >= 100){
finish = true;
}

return this.first().trigger('progress',[val, true, finish]);
};

// This function creates a progress meter that
// finishes in a specified amount of time.

$.fn.progressTimed = function(seconds, cb){

var button = this.first(),
bar = button.find('.tz-bar');

if(button.is('.in-progress')){
return this;
}

// Set a transition declaration for the duration of the meter.
// CSS will do the job of animating the progress bar for us.

bar.css('transition', seconds+'s linear');
button.progressSet(99);

window.setTimeout(function(){
bar.css('transition','');
button.progressFinish();

if($.isFunction(cb)){
cb();
}

}, seconds*1000);
};

})(jQuery);

progressInitialize устанавливает слушателя событий для кастомных событий progress, которые запускают другие функции, когда индикатор следует обновить. Благодаря кастомному событию, у нас имеются полностью независимые функции вроде progressStart, которые имеют собственный таймер и положение - progresInitialize должен быть проинформирован о progressStart.

Также важно отметить, что здесь мы задаем кнопкам 2 специальных класса - .in-progress, когда индикатор прогресса движется и .finished, когда движение будет завершено. Они обновляют текст на кнопках, как видно из следующего раздела.

CSS-код

Мы уже говорили, что мы устанавливаем 2 css-класса - .in-progress и .finished, - но каким образом это изменяет текст кнопки? Очень просто – мы используем css-трюк, в котором применяется CSS3-оператор ‘attr’, который в комбинации с ‘content’ способен выставлять текст псевдо-элемента :before или :after, который указан в соответствующем атрибуте элемента. Все станет более понятным, когда вы увидите это своими глазами (строки 44-52):

assets/css/styles.css

.progress-button{
display: inline-block;
font-size:24px;
color:#fff !important;
text-decoration: none !important;
padding:14px 60px;
line-height:1;
overflow: hidden;
position:relative;

box-shadow:0 1px 1px #ccc;
border-radius:2px;

background-color: #51b7e6;
background-image:-webkit-linear-gradient(top, #51b7e6, #4dafdd);
background-image:-moz-linear-gradient(top, #51b7e6, #4dafdd);
background-image:linear-gradient(top, #51b7e6, #4dafdd);
}

/* Hide the original text of the button. Then the loading or finished
text will be shown in the :after element above it. */

.progress-button.in-progress,
.progress-button.finished{
color:transparent !important;
}

.progress-button.in-progress:after,
.progress-button.finished:after{
position: absolute;
z-index: 2;
width: 100%;
height: 100%;
text-align: center;
top: 0;
padding-top: inherit;
color: #fff !important;
left: 0;
}

/* If the .in-progress class is set on the button, show the
contents of the data-loading attribute on the butotn */

.progress-button.in-progress:after{
content:attr(data-loading);
}

/* The same goes for the .finished class */

.progress-button.finished:after{
content:attr(data-finished);
}

/* The colorful bar that grows depending on the progress */

.progress-button .tz-bar{
background-color:#e667c0;
height:3px;
bottom:0;
left:0;
width:0;
position:absolute;
z-index:1;

border-radius:0 0 2px 2px;

-webkit-transition: width 0.5s, height 0.5s;
-moz-transition: width 0.5s, height 0.5s;
transition: width 0.5s, height 0.5s;
}

/* The bar can be either horizontal, or vertical */

.progress-button .tz-bar.background-horizontal{
height:100%;
border-radius:2px;
}

.progress-button .tz-bar.background-vertical{
height:0;
top:0;
width:100%;
border-radius:2px;
}

Остальная часть кода отвечает за оформление кнопок и встроенного индикатора прогресса. В styles.css мы также включили две дополнительные цветовые схемы и некоторые правила, которые здесь не приведены, но которые вы можете просмотреть и изучить в скачанных файлах.

Готово!

Итак, приведенный здесь код полностью готов к вашим модернизациям! Просто откройте styles.css в вашем любимом текстовом редакторе, и попробуйте поменять цвета, шрифты или стили таким образом, чтобы они сочетались с дизайном вашего сайта. Измените текст, поработав в HTML-коде и data-атрибутах. Либо вы можете дополнить код какими-нибудь дополнительными фишками. В данном случае, не забудьте поделиться результатом в комментариях!
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: кнопки, jQuery
Опубликовал Design FactoRy   Прочитано (раз): 4818   |   Оставлено комментариев: 1
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 16 января 2015 @ 09:49
Написал: RASTA — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Спасибо за статью! А как сделать что бы вместо надписи loading были цифры со значением например 40% или 50% по мере заполнения?
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц October по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Заказать ежедневники с логотипом компании
Рекламно-сувенирная компания. Нанесение логотипов
design.kella.ru
Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Декабрь 2017    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
25262728293031