進度欄在HTML文件中不起作用

Question

我正在創建一個progrees酒吧，它在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/

Answer 1

在“外部資源”下方的jsfiddle左側欄中查看。 您正在將progressbar()嵌入jQuery UI css和js，但是缺少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>

Answer 2

無效的三個原因：

如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>

進度欄在HTML文件中不起作用

問題描述

2 個解決方案

解決方案1
0 2013-04-03 11:51:01

解決方案2
0 2013-04-03 12:09:00

進度欄在HTML文件中不起作用

問題描述

2 個解決方案

解決方案1 0 2013-04-03 11:51:01

解決方案2 0 2013-04-03 12:09:00

解決方案1
0 2013-04-03 11:51:01

解決方案2
0 2013-04-03 12:09:00