The final effect is as follows:
step.inc.php installation Steps Effect class:
Copy Code code as follows:
/**
* step.inc.php Installation Steps Effect class *
* Extract the main code from the Comsenz product's datasheet installation effect for everyone to learn
* @author Tianxin
* @version 1.0.0 *
*/
Class Stepclass {
function Show_header () {
Define (' Show_header ', TRUE);
$step = 1;
$version = ' beta1.0 ';
$release = ' 20100223 ';
$install _lang = ' Simplified Chinese UTF8 version ';
$title = ' imitation Comsenz installation ';
$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 ">
<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"/>
<div class= "Container" >
<div class= "Header" >
<span> $version $install _lang $release </span>
EOT;
$step > 0 && $this->show_step ($step);
}
function Show_step ($step) {
$laststep = 4;
$title = ' imitation Comsenz installation ';
$comment = ' performing operation ';
$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}" >
<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://www.jb51.net ';
}
</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= "is executing ..." Disabled style= "height:25" id= "Laststep" onclick= "Initinput" () " >
</div>
<?php
}
function RunQuery () {
For ($i =1 $i <=15; $i + +)
{
$this->showjsmessage (' perform operation '. ') '. $i. '.' Success ");
Simulate a delay for each action performed
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" >©2001-2010 <a href= "http://www.jb51.net/" > Sweet heart </a> Yaoyao said kill very big .</div>
</div>
</div>
</body>
EOT;
$quit && exit ();
}
}
Call Method:
Copy Code code as follows:
Header (' content-type:text/html; Charset=utf-8 ');
Include (' step.inc.php ');
$step =new Stepclass ();
Show Page Head
$step->show_header ();
Show Operation Progress
$step->show_install ();
Run operations
$step->runquery ();
Echo ' <script type= "Text/javascript" >document.getelementbyid ("Laststep"). Disabled=false; document.getElementById ("Laststep"). Value = \ ' Perform all operations and enter next \ ';</script> '. \ r \ n ";
Show tail of page
$step->show_footer ();
The Complete Demo:stepdemo.rar