最终的效果如下:php 仿Comsenz安装效果代码打包提供下载
step.inc.php 安装步骤效果类: 代码如下:
/** * step.inc.php 安装步骤效果类 * * 从Comsenz产品的数据表安装效果中提取出主要代码,以供大家学习 * @author tianxin * @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" c /> <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 c name="Copyright" /> </head> <div> <div> <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> <h2>$title</h2> <p>$comment</p> </div> <div> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <div></div> </div> </div> <div> 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> <div><textarea name="notice" read></textarea></div> <div> <input type="button" name="submit" value="正在执行……" disabled >
代码如下:
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:stepdemo.rar