Почему я не могу поместить индикатор прогресса jquery-ui в div с фиксированной позицией? - PullRequest
Новая
       11

Почему я не могу поместить индикатор прогресса jquery-ui в div с фиксированной позицией?

0 голосов
/ 28 мая 2010

Я запустил источник с этого примера выполнения , и он работает нормально. Мое единственное изменение состояло в том, чтобы установить ширину индикатора выполнения на "20%". 

<!DOCTYPE html>
<html>
<head>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

  <script>
  $(document).ready(function() {
    $("#progressbar").progressbar({ value: 37 }).css({ width : "20%"});
  });
  </script>
</head>
<body style="font-size:62.5%;">

<div id="progressbar"></div>

</body>
</html>

Затем я поместил индикатор выполнения в другой div и использовал css, чтобы исправить этот div в верхнем правом углу. 

<!DOCTYPE html>
<html>
<head>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <style type="text/css">
    #testContainer {
      position : fixed;
      top : 6;
      right : 6;
    }
  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

  <script>
  $(document).ready(function() {
    $("#progressbar").progressbar({ value: 37 }).css({ width : "20%"});
  });
  </script>
</head>
<body style="font-size:62.5%;">

<div id="testContainer">
    <div id="progressbar"></div>
</div>

</body>
</html>

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

Ответы [ 2 ]

3 голосов
/ 28 мая 2010

Свойство width устанавливает ширину элемента в 20% от ширины содержащего его блока , в первом примере это body, но div с идентификатором "testContainer" во втором примере.

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

0 голосов
/ 28 мая 2010

Вам нужно определить ширину для div # testcontainer.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...