Как плавно анимировать, настраивать цвет и управлять индикатором выполнения jQuery UI?

Question

Как плавно анимировать, настраивать цвет и управлять индикатором выполнения jQuery UI?

0

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

Faisal 21 сен. 2013, в 13:59

Источник

Теги:

javascript

jquery

html5

jquery-ui

1 ответ

Ещё вопросы

Faisal · Accepted Answer · 2013-09-21T10-44-00.000Z

Следующий мой код, который я пробовал, и он работает, просто хотел поделиться со всеми.

jquery-ui.css:

.ui-progressbar .ui-progressbar-value {
    margin: -1px;
    height: 100%;
    transition: width 0.5s;
    -webkit-transition: width 0.5s;
}

код:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Progressbar - Default functionality</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <!--<link rel="stylesheet" href="/resources/demos/style.css" />-->
  <script>
  var x=0.1;
  /* Just display progress bar at 1st*/
  $(function() {
    $( "#progressbar" ).progressbar({
      value: x
    });
  });

  function update(){
    // For 25% increase
     var c1 = $('input[name="c1"]:checked').length > 0;
    if(c1){
     x=25;
    $( "#progressbar" ).progressbar({ value: x });
    x+=25;
    }
     if(!c1){
     x-=24.9;
    $( "#progressbar" ).progressbar({ value: x });
    }
    // For 50% increase
    var c2 = $('input[name="c2"]:checked').length > 0;
    if(c2){
    $( "#progressbar" ).progressbar({ value: x });
    x+=25;
    }
     if(!c2){
    $( "#progressbar" ).progressbar({ value: x-25 });
    }
    // For 75% increase
    var c3 = $('input[name="c3"]:checked').length > 0;
    if(c3){
    $( "#progressbar" ).progressbar({ value: x });
    x+=25;
    }
     if(!c3){
    $( "#progressbar" ).progressbar({ value: x-25 });
    }
    // For 100% increase
    var c4 = $('input[name="c4"]:checked').length > 0;
    if(c4){
    $( "#progressbar" ).progressbar({ value: x });
    x+=25;
    }
     if(!c4){
    $( "#progressbar" ).progressbar({ value: x-25 });
    }
  }
  </script>
</head>
<body>

<div id="progressbar" style="width:400px; height:15px; box-shadow:#666 0px 2px 2px"></div>
<br />
25% <input type="checkbox" name="c1" id="c1" onChange="update();" /> 
&nbsp;
50% <input type="checkbox" name="c2" id="c2" onChange="update();" /> 
&nbsp;
75% <input type="checkbox" name="c3" id="c3" onChange="update();" />  
&nbsp;
100% <input type="checkbox" name="c4" id="c4" onChange="update();" />  
</body>
</html>

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