Использование JQuery/JavaScript для включения кнопки в индикатор выполнения.

Я пытаюсь выяснить, как включить кнопку в индикатор выполнения. Например, в загрузочной кнопке, такие как:Использование JQuery/JavaScript для включения кнопки в индикатор выполнения.

<button class="btn btn-large btn-primary" type="button">Load</button>

настоящее время я использую классический индикатор начальной загрузки и обновления его с помощью JQuery setInterval:

<div class="progress progress-striped"><div id="data_loaded" \ 
class="bar" style="width: 100%;"></div></div>

Можно ли повернуть кнопку в индикатор прогресса - так что продвигающийся прогресс заполняет фон фактической кнопки, а не использует отдельный элемент страницы для индикатора выполнения?

источник

2013-02-22 2scottish

Я думаю, что это лучше использовать два разных элемента, чтобы вы могли сбросить форму, когда вы закончите с этим, howev это можно сделать с помощью одного div, но вам все равно нужно добавить элемент панели выполнения к кнопке, если у вас нет другого способа сделать индикатор выполнения ... прогресса.

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

Вот скрипку вы начали: http://jsfiddle.net/zRBxR/

CSS:

.progress, 
.progress:hover { 
    background: transparent; 
    padding: 0; 
    height: 30px; 
    width: 68px; 
} 

#progress-bar { 
    background: #000; 
    display: block; 
    height: 30px; 
    width: 0; 
}

HTML:

<html> 
    <body> 
     <div id="progress-button" class="btn btn-primary btn-default" onclick="startProgress();">Button</div> 
    </body> 
</html>

ЯШ:

var progress = 0; 

function startProgress() 
{ 

    // change button to progress button, and add progress bar 
    $('#progress-button').addClass('progress').html('<span id="progress-bar"></span>'); 

    // update progress bar every 0.5 second 
    setInterval(function(){ 
     $('#progress-bar').width(progress); 
     progress++; 
    }, 500); 
}

источник

2013-02-22 08:21:18 sjdaws

Спасибо! Я думаю, что это определенно указывает мне в правильном направлении! – 2scottish

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

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

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

Другое решение состоит в том, чтобы переключаться между кнопкой и индикатором выполнения <div>, который вы показывали.

источник

2013-02-22 08:02:41 Knelis

Спасибо за ваш вклад. При всей помощи я направляюсь в правильном направлении! – 2scottish

Вы можете скрыть кнопку onclick и отобразить индикатор выполнения в положении кнопки.

<button class="btn btn-large btn-primary" type="button" onClick="showProgress()">Load</button> 

function showProgress(){ 
    $("button").fadeOut(); 
    $("#data_loaded").fadeIn(); 
    }

источник

2013-02-22 08:04:05

Спасибо за ваш вклад. Я думаю, что это определенно жизнеспособный вариант. Мне всегда нравится наименьший многословный подход, но я думаю, что в этом случае я могу попробовать решение SJDaws. – 2scottish

Да, JQuery имеет метод .replaceWith().

Описание: Заменить каждый элемент в наборе соответствующих элементов с предоставленный новый контент и возвращает набор элементов, который был удален .

Предположим, что вы хотите использовать HTML5 Progressbar вы можете написать код так: HTML5

<button class="btn btn-large btn-primary" type="button">Load</button>

JS:

$('button').replaceWith('<progress max="100" value="60">\ 
     <strong>Progress: 60% done.</strong>\ 
    </progress>');

Скрипач: http://fiddle.jshell.net/KQr7S/

источник

2013-02-22 08:06:30 Stefan

Я не знал о .replaceWith(). Спасибо! Трудно выбрать один ответ, когда каждый комментарий мне помог. – 2scottish

вы можете их перенести;) – Stefan

Да, это очень верно! Я сделаю это. :) – 2scottish

Использование JQuery/JavaScript для включения кнопки в индикатор выполнения.

ответ

Смежные вопросы