Блог

Главная - Вопросы по программированию - проблема с отображением строки progressbar

проблема с отображением строки progressbar

#jquery #html #css

#jquery #HTML #css

Вопрос:

Я пытаюсь заставить jQuery UI progressbar отображать встроенную строку, поэтому вывод должен быть:

Процент завершения: {{progressbar}} 25%

Я пробовал варианты следующего, но безуспешно (я действительно думал, что это сработает, когда я помещу все в свой собственный div):

Я получаю:

Процент завершения: {{Progressbar}} 25%

 <p id="percent-complete" class="status" style="display:inline;">

Percent Complete: 

</p>
<div id="progress-container" style="width:125px; display:inline">

<div id="progress" class="ui-progressbar ui-widget ui-widget-content ui-corner-all" style="height:10px;      width:100px;" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="25"></div>
<span id="complete-text" class="status-update" style="display:inline;"></span>

</div>

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

Комментарии:

1. Ожидаемый результат и фактический результат выглядят одинаково для меня … я что-то упускаю?

2. Хммм странно. Фактический вывод прерывается на три строки в процентах завершения<br>{{прогресс}}<br>25%, но, очевидно, без тегов br.

Ответ №1:

Добавить display: inline-block в div строки выполнения.

пример jsfiddle: http://jsfiddle.net/m2nDG /

Ответ №2:

Возможно, вы используете Bootstrap 2 и используете стиль / класс Bootstrap 3 или наоборот. Пожалуйста, используйте стиль начальной загрузки 2 для прогрессивной строки, если вы используете Bootstrap 2 или Bootstrap 3 style / class для начальной загрузки 3.

Стиль Bootstrap 2:

 <div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span class="sr-only">60% Complete</span>
  </div>
</div>

для получения более подробной информации, пожалуйста, проверьте эту ссылку: http://getbootstrap.com/components /

Стиль Bootstrap 3:

 <div class="bs-component">
       <div class="progress progress-striped active">
          <div style="width: 45%" class="progress-bar"></div>
       </div>
    <div class="btn btn-primary btn-xs" id="source-button" style="display: none;">amp;< amp;></div></div>

для получения более подробной информации, пожалуйста, проверьте эту ссылку: http://bootswatch.com/cerulean /

Другой факт заключается в том, что вам также могут не хватать jQuery-UI, js и css. Пожалуйста, попробуйте подключиться, следуя cdn: 

 <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" type="text/css" media="all" /> 
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script>