jQuery Прогресс-бар и счетчик - PullRequest
Новая
       23

jQuery Прогресс-бар и счетчик

0 голосов
/ 27 февраля 2012

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

Пример, когда вы нажимаете кнопку ВВЕРХ, вы добавляете 10 к индикатору выполнения, а когда нажимаете кнопку ВНИЗ, вы удаляете 10 из бара.

То, что я хотел бы реализовать, - это скрипт, который может «читать» состояние индикатора выполнения и с помощью функции if или else отображать текст из абзаца

(Если> 50, он будет исчезать в тексте, иначе <50 будет исчезать в другом тексте) Надеюсь, я все хорошо объяснил и надеюсь, что кто-нибудь может мне помочь. Я все еще новичок в jQuery / JavaScript. </p>

Ответы [ 2 ]

1 голос
/ 27 февраля 2012

jQuery UI имеет встроенный индикатор выполнения, который вы можете легко делать, что хотите.

http://jqueryui.com/demos/progressbar/

Вот простая реализация того, что вы пытаетесь сделать:

http://jsfiddle.net/makotosan/bW5Wd/3/

1 голос
/ 27 февраля 2012

Вот небольшой пример, с чего можно начать; В этом сценарии много возможностей, не бойтесь немного поэкспериментировать: 

<!doctype html>
<html lang="en" dir="ltr">
<head>
    <title>Progress Bar</title>
    <meta charset="utf-8" />
    <style>
        #progress {
            position:relative;
            width:25px;
            height:100px;
            border:2px solid #000;
            background-color:#ccc;
        }
        #progress div {
            position:absolute;
            bottom:0;
            height:0;
            width:25px;
            background-color:#f00;
        }
        span {
            margin:10px auto;
        }
    </style>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
        $(function(){
            // Define your variables
            var interval=10;
            var half=50;
            var max=100;
            var texts=['Less then 50...','More then 50!'];
            var upButton=$('button[name="up"]');
            var downButton=$('button[name="down"]');
            var bar=$('#progress').find('div');
            upButton.on('click',function(){
                var height=bar.height();
                if(height>=0 && height<max) {
                    var newHeight=parseFloat(height+interval,10);
                    bar.css('height',newHeight);
                    $('span').hide().text((newHeight<half) ? texts[0] : texts[1]).fadeIn();
                }
            });
            downButton.on('click',function(){
                var height=bar.height();
                if(height>0 && height<=max) {
                    var newHeight=parseFloat(height-interval,10);
                    bar.css('height',newHeight);
                    $('span').hide().text((newHeight<half) ? texts[0] : texts[1]).fadeIn();
                }
            });
        });
    </script>
</head>
<body>
    <h1>Progress Bar</h1>
    <p>
        <button name="up">Add</button> <button name="down">Remove</button>
    </p>
    <div id="progress">
        <div>&nbsp;</div>
    </div>
    <span></span>
</body>
</html>
...