HTML PHP Progress Bar - PullRequest
       9

HTML PHP Progress Bar

14 голосов
/ 26 ноября 2009

У меня есть веб-сайт с формой, которая использует PHP для отправки данных формы. Есть ли способ создать индикатор прогресса на странице, который выглядит так, как будто он в действии, чтобы люди не нажимали кнопку более одного раза после ее нажатия и отправки информации PHP.

Спасибо.

Ответы [ 3 ]

20 голосов
/ 26 ноября 2009

Индикатор выполнения: простая текстовая версия:

<?php
// Output a 'waiting message'
echo 'Please wait while this task completes';

// Now while waiting for a certain task to
// complete, keep outputting .'s

while (true) {
  // Echo an extra dot, and flush the buffers
  // to ensure it gets displayed.
  echo ' .';
  flush();

  // Now sleep for 1 second and check again:
  sleep(1);
}
?>

Индикатор выполнения: на основе PHP (grphical):

<?php
// A function that will create the initial setup
// for the progress bar: You can modify this to
// your liking for visual purposes:
function create_progress() {
  // First create our basic CSS that will control
  // the look of this bar:
  echo "
<style>
#text {
  position: absolute;
  top: 100px;
  left: 50%;
  margin: 0px 0px 0px -150px;
  font-size: 18px;
  text-align: center;
  width: 300px;
}
  #barbox_a {
  position: absolute;
  top: 130px;
  left: 50%;
  margin: 0px 0px 0px -160px;
  width: 304px;
  height: 24px;
  background-color: black;
}
.per {
  position: absolute;
  top: 130px;
  font-size: 18px;
  left: 50%;
  margin: 1px 0px 0px 150px;
  background-color: #FFFFFF;
}

.bar {
  position: absolute;
  top: 132px;
  left: 50%;
  margin: 0px 0px 0px -158px;
  width: 0px;
  height: 20px;
  background-color: #0099FF;
}

.blank {
  background-color: white;
  width: 300px;
}
</style>
";

  // Now output the basic, initial, XHTML that
  // will be overwritten later:
  echo "
<div id='text'>Script Progress</div>
<div id='barbox_a'></div>
<div class='bar blank'></div>
<div class='per'>0%</div>
";

  // Ensure that this gets to the screen
  // immediately:
  flush();
}

// A function that you can pass a percentage as
// a whole number and it will generate the
// appropriate new div's to overlay the
// current ones:

function update_progress($percent) {
  // First let's recreate the percent with
  // the new one:
  echo "<div class='per'>{$percent}
    %</div>\n";

  // Now, output a new 'bar', forcing its width
  // to 3 times the percent, since we have
  // defined the percent bar to be at
  // 300 pixels wide.
  echo "<div class='bar' style='width: ",
    $percent * 3, "px'></div>\n";

  // Now, again, force this to be
  // immediately displayed:
  flush();
}

// Ok, now to use this, first create the
// initial bar info:
create_progress();

// Now, let's simulate doing some various
// amounts of work, and updating the progress
// bar as we go. The usleep commands will
// simulate multiple lines of code
// being executed.
usleep(350000);
update_progress(7);
usleep(1550000);
update_progress(28);
usleep(1000000);
update_progress(48);
usleep(1000000);
update_progress(68);
usleep(150000);
update_progress(71);
usleep(150000);
update_progress(74);
usleep(150000);
update_progress(77);
usleep(1150000);
update_progress(100);

// Now that you are done, you could also
// choose to output whatever final text that
// you might wish to, and/or to redirect
// the user to another page.
?>
4 голосов
/ 26 ноября 2009

Индикаторы выполнения на веб-контенте трудно понять правильно, потому что вы не знаете, сколько времени займет процесс, и у вас нет индикаторов прогресса, чтобы сообщить, когда обновить панель. Возможно, вам лучше использовать вращающееся загрузочное изображение, подобное имеющемуся на ajaxload.com .

Вы можете сделать скрытый div, покрывающий всю страницу, и активировать div в своем javascript, когда вы ждете.

В вашем html:

<div style="display:none;" id="wait"></div>

в css:

#wait {
   position:fixed;
   top:50%;
   left:50%;
   background-color:#dbf4f7;
   background-image:url('/images/wait.gif'); // path to your wait image
   background-repeat:no-repeat;
   z-index:100; // so this shows over the rest of your content

   /* alpha settings for browsers */
   opacity: 0.9;
   filter: alpha(opacity=90);
   -moz-opacity: 0.9;
}

А потом в вашем JavaScript:

...
$("#wait").show(); // when you want to show the wait image
...
$("#wait").hide(); // when your process is done or don't worry about it if the page is refreshing
2 голосов
/ 26 ноября 2009

Вам нужно будет использовать Javascript, я рекомендую вам взглянуть на ProgressBar JQuery .

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