Progressbar PHP vezérléssel szerver oldalról

Default book

Mindig érdekelt, hogyan lehet szerver oldalon futtatott kóddal kliens oldalon progressbart készíteni? A probléma az, hogy a szerver oldal csak lineárisan tudja kiírni a kliensnek a PHP kimenetet, viszont a kliens oldalon szeretnénk a progressbart egy helyben látni.

A megoldás azon az ötleten alapul, hogyha egy div-nek a helyét a böngészőben abszolúttá teszem és újra meg újra kiíírom a div-et a kliensnek, ugyanazzal az ID-val, akkor ugyanoda fog kikerülni.

A megoldandó problémák a következők:

  • A régi tartalom tűnjön el és kerüljön oda az új.
  • Lehetőleg az új tartalom írja felül a régit

Folyamatosan menjen és csak akkor írjon ki tartalmat, ha muszály.

Egy jquery-vel megtámogatott megoldást írtam, de valójában egy kis css és egy kis PHP kódról van szó. Szükség van egy jquery csomagra és négy db gif fájlra. A képfájlok innen szedhetők elő, és itt lehet megnézni a működésüket. http://t.wits.sg/misc/jQueryProgressBar/demo.php

Az eredeti kódok tisztán jqueryvel működtek és nem voltak képesek a progressbart működtetni, mivel a jquery kliens oldali és a php szerver oldali.

A kód használata roppant egyszerű:

<script type="text/javascript" src="js/jquery.js"></script>
<?php
  $max = 10000;
  $pr = new progressbar('foo',$max);   
  for($i=0;$i< $max ; ++$i ) {
     $pr->setValue($i);       
  }
  $pr->setValue($i);
  $pr->disable();
?>

​ Ezt az osztályt kell betenni egy include fájlba vagy az oldalra.

/**
 * Progressbar PHP-ból létrehozva
 *
 */
class progressbar {
    private $max;
    private $id;
    private $value;
    private $enabled;
    private $pold = -1;
    function __construct($id,$max,$width=120,$value = 0){
        $this->id      = $id;
        $this->max     = $max;
        $this->value   = $value;
        $this->enabled = true;
        $this->width   = $width;
        $this->styles();        
    }
    function styles(){
        print"
<style type='text/css'>
    .progressbar{
        position:absolute;    
        top:300px;
        background-color:".SETTXTBGCOLOR.";
        left: 50%;
        width:".($this->width+40)."px;
        margin-left:-60px;
        padding-top:5px;
        height: 20px;
        text-align:center;
    vertical-align: middle;        
    }
    .progressimage{
        width:'.$this->width.'px;    
      height: 12px;
         padding: 0pt;
         margin:0pt;
         vertical-align: middle;         
    }
    .progresstext{
    vertical-align: middle;
    }
</style>";
    }
    function write(){
        $percent = (int) ((100*$this->value) / $this->max);
        if($percent > $this->pold){
            $style='z-index:'.$percent.';';
            if(!$this->enabled){
                $style='display:none;';
            }        
            $out  = '<div id="progress'.$this->id.$percent.'" class="progressbar" style="'.$style.'">';
           
          $out .= '<img id="pr_percimage" class="progressimage" width="'.$this->width.'" src="js/progressbar/images/progressbar.gif"';
          $out .= 'style="';
          if($percent>80){
              $out .="background-image:url('js/progressbar/images/progressbg_green.gif'); ";
          }elseif($percent>40){
              $out .="background-image:url('js/progressbar/images/progressbg_yellow.gif'); ";
          }elseif($percent>40){
              $out .="background-image:url('js/progressbar/images/progressbg_orange.gif'); ";
          }elseif($percent>20){
              $out .="background-image:url('js/progressbar/images/progressbg_red.gif'); ";
          }else{
              $out .="background-image:url('js/progressbar/images/progressbg_black.gif'); ";
          }         
          $out .= ';background-position:'.(-120+(int)(($percent*$this->width)/100 )).'px 50%;" title=" '.$percent.'%">';
          $out .='<span id="pr_perctext" class="progresstext">'.$percent.'% </span></div>';
          $out .='<script>$("div#progress'.$this->id.$this->pold.'").css("display","none");</script>';        
            print $out;
            flush();
            $this->pold = $percent;
        }
    }
    function setValue($value=0){
        $this->value = $value;
        $this->write();
    }
    
    function enable(){
        $this->enable=true;
        $this->write();
    }
    function disable(){
        $this->enable=false;
        $this->write();
    }
}

 

Tags
PHP