0

プログレスバーを作成していますが、jsfiddle デモでは正常に動作していますが、html ファイルで使用すると動作しません。ここでは私のコードです。jsfiddle で指定されたものと同じコードを書いていますが、動作していません。

 <html>
 <head>
 <style>
  .ui-progressbar.beginning .ui-progressbar-value { background: red; }
  .ui-progressbar.middle .ui-progressbar-value { background: yellow; }
  .ui-progressbar.end .ui-progressbar-value { background: green; }
 </style>
 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>

 </head>


 <script>
  var $progressbar = $("div").progressbar();


  function updateProgressbar(current, target) {


   var value = parseInt(current / target * 100);

   $progressbar

   .progressbar("value", value)

   .removeClass("beginning middle end")


    .addClass(value < 40 ? "beginning" : value < 80 ? "middle" : "end");
  }



  var total = 255;


   var working = 0;





 function update() {

   working++;
 updateProgressbar(working, total);
if (working < total) setTimeout(update, 10);

   }
var $progressbar = $("div").progressbar();

function updateProgressbar(current, target) {


var value = parseInt(current / target * 100);





$progressbar


    .progressbar("value", value)


    .removeClass("beginning middle end")


    .addClass(value < 40 ? "beginning" : value < 80 ? "middle" : "end");


   }





   var total = 255;


  var working = 0;


  function update() {


   working++;




updateProgressbar(working, total);


if (working < total) setTimeout(update, 10);


  }




  </script>
  </head>

<body onload="update()">

<div>


</div></body></html>

ここにjsフィドルリンクが機能しています

http://jsfiddle.net/ZQrnC/305/

4

2 に答える 2

0

「外部リソース」の下のjsfiddleの左側のサイドバーを見てください。そこにjQuery UI cssとjsを埋め込んprogressbar()でいますが、htmlファイルのjQuery UIがありません。

jquery-1.9.1.js-script-tagの後に次を追加します。

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
于 2013-04-03T11:51:01.353 に答える
0

うまくいかない理由は次の3つです。

  • robbi5が述べたように、jquery ui JSおよびCSSファイルをインポートしません
  • var $progressbar は、ページがまだ読み込まれていないときにヘッダーで初期化されるため、div が見つかりません。言い換えれば、$progressbar は何も指していません
  • プログレス バーの高さがゼロで非表示になっています。高さを固定したコンテナー div でラップする必要があります。

また、コードに重複部分が含まれていますが、コピー/貼り付けが間違っている可能性があります。

これは、修正されたポイントを含む更新された作業バージョンのページです。chrome と firefox でのみすばやく確認しましたが、動作します。

<html>
 <head>
 <style>
  .ui-progressbar.beginning .ui-progressbar-value { background: red; }
  .ui-progressbar.middle .ui-progressbar-value { background: yellow; }
  .ui-progressbar.end .ui-progressbar-value { background: green; }
 </style>

 <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet">


     <script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
     <script src=" http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>

 </head>

 <script>

  var $progressbar;

  function updateProgressbar(current, target) {
       var value = parseInt(current / target * 100);

        $progressbar.progressbar("value", value).removeClass("beginning middle end")
        .addClass(value < 40 ? "beginning" : value < 80 ? "middle" : "end");
  }

  var total = 255;
  var working = 0;

 function update() {
   $progressbar = $("#pbholder").progressbar();
   working++;
   updateProgressbar(working, total);
   if (working < total) setTimeout(update, 10);
  }

  </script>
  </head>

<body onload="update()">

<div id="container" style="height:50px">
    <div id="pbholder"> 
    </div>
</div>

</body></html>
于 2013-04-03T12:09:00.417 に答える