php 仿Comsenz 安装效果

一直都觉得Comsenz产品的数据表安装效果很漂亮，今天抽了个空，把它的核心代码都提炼出来了。

最终的效果如下：

 

step.inc.php 安装步骤效果类：

/* *
* step.inc.php 安装步骤效果类   *
* 从Comsenz产品的数据表安装效果中提取出主要代码，以供大家学习
* @author tianxin
* @link http://tianxin2001x.cnblogs.com
* @version 1.0.0   *
*/

class  StepClass {
    function  show_header() {
     define ( ' SHOW_HEADER ' ,   TRUE );
     $step   =   1 ;
     $version   =   ' beta1.0 ' ;
     $release   =   ' 20100223 ' ;
     $install_lang   =   ' 简体中文UTF8版 ' ;
     $title   =   ' 仿Comsenz安装 ' ;
     $charset   =   ' uft-8 ' ;
     echo   <<< EOT
<! DOCTYPE html  PUBLIC   " -//W3C//DTD XHTML 1.0 Transitional//EN "   " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " >
< html xmlns = " http://www.w3.org/1999/xhtml " >
< head >
< meta http - equiv = " Content-Type "  content = " text/html; charset= $charset "   />
< title > $title </ title >
< link rel = " stylesheet "  href = " style.css "  type = " text/css "  media = " all "   />
< script type = " text/javascript " >
     function  $(id) {
         return  document . getElementById(id);
    }

     function  showmessage(message) {
        $( ' notice ' ) . value  +=  message  +   " \\r\\n " ;
    }
</ script >
< meta content = " Comsenz Inc. "  name = " Copyright "   />
</ head >
< div  class = " container " >
     < div  class = " header " >
         < h1 > $title </ h1 >
         < span > $version   $install_lang   $release </ span >
EOT;

     $step   >   0   &&   $this -> show_step( $step );
}


function  show_step( $step ) {

     $laststep   =   4 ;
     $title   =   ' 仿Comsenz安装 ' ;
     $comment   =   ' 正在执行操作 ' ;

     $stepclass   =   array ();
     for ( $i   =   1 ;  $i   <=   $laststep ;  $i ++ ) {
         $stepclass [ $i ]  =   $i   ==   $step   ?   ' current '   :  ( $i   <   $step   ?   ''   :   ' unactivated ' );
    }
     $stepclass [ $laststep ]  .=   '  last ' ;

     echo   <<< EOT
     < div  class = " setup step{ $step } " >
         < h2 > $title </ h2 >
         < p > $comment </ p >
     </ div >
     < div  class = " stepstat " >
         < ul >
             < li  class = " $stepclass [1] " > 1 </ li >
             < li  class = " $stepclass [2] " > 2 </ li >
             < li  class = " $stepclass [3] " > 3 </ li >
             < li  class = " $stepclass [4] " > 4 </ li >
         </ ul >
         < div  class = " stepstatbg stepstat1 " ></ div >
     </ div >
</ div >
< div  class = " main " >
EOT;

}

function  show_install() {
?>
< script type = " text/javascript " >
function  showmessage(message) {
    document . getElementById( ' notice ' ) . value  +=  message  +   " \r\n " ;
}
function  initinput() {
    window . location = ' http://tianxin2001x.cnblogs.com ' ;
}
</ script >
     < div  class = " main " >
         < div  class = " btnbox " >< textarea name = " notice "  style = " width: 80%; "   readonly = " readonly "  id = " notice " ></ textarea ></ div >
         < div  class = " btnbox marginbot " >
     < input type = " button "  name = " submit "  value = " 正在执行…… "  disabled style = " height: 25 "  id = " laststep "  onclick = " initinput() " >
     </ div >
<? php
}


function  runquery() {
     for ( $i = 1 ; $i <= 15 ; $i ++ )
    {
         $this -> showjsmessage( ' 执行操作 ' . '   ' . $i . '  ...  ' . ' 成功 ' );
         // 模拟每执行完一个动作的延时
         sleep ( 1 );
    }
}

function  showjsmessage( $message ) {
     echo   ' <script type="text/javascript">showmessage(\ '' .addslashes($message). '  \ ' );</script> ' . " \r\n " ;
     flush ();
     ob_flush ();
}

function  show_footer( $quit   =   true ) {

     echo   <<< EOT
         < div  class = " footer " >& copy ; 2001   -   2010   < a href = " http://tianxin2001x.cnblogs.com/ " > 甜心 </ a >  瑶瑶说杀很大 .</ div >
     </ div >
</ div >
</ body >
</ html >
EOT;
     $quit   &&   exit ();
}

}

 

 

调用方法：

     header ( ' Content-Type: text/html; charset=utf-8 ' );

     include ( ' step.inc.php ' );

     $step = new  StepClass();

     // 显示页面头部
     $step -> show_header();
     // 显示操作进度
     $step -> show_install();
     // 运行操作
     $step -> runquery();
     echo   ' <script type="text/javascript">document.getElementById("laststep").disabled=false;document.getElementById("laststep").value = \ ' 执行完所有操作，进入下一步\ ' ;</script> ' . " \r\n " ;
     // 显示页面尾部
     $step -> show_footer();

 

 

完整的demo：/Files/tianxin2001x/stepdemo.rar

转载于:https://www.cnblogs.com/tianxin2001x/archive/2010/02/23/1671914.html